angularjs ngMeta 标题描述没有被谷歌抓取答案

【问题标题】：angularjs ngMeta title description is not crawling by googleangularjs ngMeta 标题描述没有被谷歌抓取
【发布时间】：2017-02-08 17:38:41
【问题描述】：

在我的 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}}" />

我的控制器代码是

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}} 像这样任何帮助解决这个问题。

【问题讨论】：

控制台中是否显示任何错误？ Google 需要能够在您的网站上正确执行 Javascript，以获取 Angular 中设置的元标记信息。如果有错误，它只会拾取原始的、未插值的元内容，例如 {{ngMeta.title}}
您能否提供一个能重现该问题的插件？
如果您在应用程序中使用的角度模块（任何依赖项）未正确加载，则可能会发生此类错误。
这个问题没有显示任何搜索工作。即使在 github 页面中，所有者本身也对此进行了解释，请参见github.com/vinaygopinath/ngMeta#support-for-other-crawlers
一篇关于“谷歌是否执行javascript”的文章stephanboyer.com/post/122/does-google-execute-javascript

标签： angularjs

【解决方案1】：

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

在你的head中添加一个meta标签，告诉爬虫“这是一个高度依赖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/ 正如 Stepan Suvorov 所说，或者，结帐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

【讨论】：

2017 年真的是这样吗？谷歌只是不喜欢元标签。在我的情况下，它们不会被评估。
是的，谷歌最近更新了他们的 JS 重网站搜索引擎，我们不再需要这个元标记了。但是添加元标记不会造成任何伤害，对于尚未升级但仍使用元标记的引擎。

【解决方案2】：

我在使用 SEO 的 React 应用程序时遇到了类似的问题。

我建议处理此问题的最佳方法是使用预渲染。

我这样说是因为如果您的单页应用程序正在进行 API 调用，Google 爬虫不会等待 ajax 调用完成，因此从技术上讲，它不会读取您通过 API 调用传入的任何内容。我花了几天时间使用网站管理员解决了这个问题。

因此，您可以使用 phantomJS 或 prerender.io（内部使用 phantomjs）。所以它的作用是解析你的 html 文件并用静态内容替换 Javascript 的内容，从而为机器人提供正确和完整的内容。

否则，如果页面是第一次加载，您可以直接从后端提供页面，所以这也有帮助。

【讨论】：