angularjs ngMeta 标题描述未被谷歌抓取

Question

在我的 Angularjs 应用程序中，我正在使用这个 https://github.com/vinaygopinath/ngMeta .

<title ng-bind="ngMeta.title"></title>
<meta property="og:title" content="{{ngMeta.title}}" />
<meta property="og:description" content="{{ngMeta.description}}" />

我的 Controller 代码是

app.controller('controller1',function($scope, $location , $http , $routeParams, ngMeta, $route){
    $scope.$route = $route;
    ngMeta.setTitle('site title');
    ngMeta.setTag('description', 'this is description');
    ngMeta.setTag('keywords', 'tag1, tsg2, tag3');
});

页面加载后一切正常，但谷歌显示 {{ngMeta.description}} {{ngMeta.title}}像这样
任何帮助解决这个问题。

Answer 1

SPA 应用中的 SEO 无法以传统方式运作。您必须调整一些代码才能正确抓取您的网站。有两个步骤可以做到这一点:

添加 meta在您的 head 中添加标签告诉爬虫“这是一个高度依赖 JS 的站点，你必须以不同的方式请求这个页面”。

喜欢: <meta name="fragment" content="!">

您必须为带有 ?_escaped_fragment_= 参数的 url 预先渲染您的站点(意思是:如果 JS 完全加载并正确运行，则创建一个静态站点 - 正确的标题和描述)。

IE:如果你有 www.example.com ，您的服务器需要为以下请求返回预渲染的站点: www.example.com?_escaped_fragment_=
为什么:

当爬虫机器人看到 meta标记它将使用 ?_escaped_fragment_= 请求页面参数，认为它会得到带有硬编码的预渲染页面 {{ngMeta.title}}和 {{ngMeta.description}} .

所以，如何预渲染您的网站？

使用: https://prerender.io/正如斯捷潘·苏沃洛夫所说，或者，
结帐 http://phantomjs.org/screen-capture.html或 http://htmlunit.sourceforge.net/

资源:

https://builtvisible.com/javascript-framework-seo/

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started