搜索引擎如何处理AngularJS应用程序?

我看到AngularJS应用程序关于搜索引擎和SEO的两个问题:

1)自定义标签会发生什么?搜索引擎会忽略这些标签中的全部内容吗?例如，假设我有

<custom>
  <h1>Hey, this title is important</h1>
</custom>

<h1>是否在自定义标记中被索引?

2)有没有办法避免搜索引擎索引{{}}绑定字面上?即。

<h2>{{title}}</h2>

我知道我可以做点什么

<h2 ng-bind="title"></h2>

但是如果我真的想让爬虫“看到”标题呢?服务器端渲染是唯一的解决方案吗?

当前回答

Angular自己的网站为搜索引擎提供简化的内容:http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

假设你的Angular应用正在使用一个Node.js/ express驱动的JSON api，比如/api/path/to/resource。也许您可以使用?_escaped_fragment_将任何请求重定向到/api/path/to/resource.html，并使用内容协商来呈现内容的HTML模板，而不是返回JSON数据。

唯一的问题是，你的Angular路由需要与你的REST API 1:1匹配。

编辑:我意识到这有可能真正搅乱你的REST api，我不建议在非常简单的用例之外使用它，在那里它可能是一个自然的适合。

相反，您可以为机器人友好的内容使用完全不同的路由和控制器集。但是你在Node/Express中复制了所有AngularJS的路由和控制器。

我决定用无头浏览器生成快照，尽管我觉得这有点不太理想。

2013-11-21 01:25:32

其他回答

让我们来明确AngularJS和SEO

谷歌、雅虎、必应和其他搜索引擎使用传统的爬行器以传统的方式爬行网络。他们运行机器人抓取网页上的HTML，在此过程中收集信息。他们保留有趣的单词，并寻找到其他页面的其他链接(这些链接，它们的数量和数量将与SEO发挥作用)。

那么为什么搜索引擎不处理javascript网站呢?

答案与搜索引擎机器人通过无头浏览器工作的事实有关，它们通常没有javascript渲染引擎来渲染页面的javascript。这适用于大多数页面，因为大多数静态页面并不关心JavaScript是否呈现其页面，因为它们的内容已经可用。

对此我们能做些什么呢?

幸运的是，大型站点的爬虫程序已经开始实现一种机制，允许我们使JavaScript站点可爬行，但这需要我们对站点进行更改。

如果我们将hashPrefix改为#!而不是简单的#，那么现代搜索引擎将更改请求使用_escaped_fragment_而不是#!(在HTML5模式下，即我们没有哈希前缀的链接，我们可以通过查看后端的User Agent头来实现相同的功能)。

也就是说，不是来自普通浏览器的请求，看起来像:

http://www.ng-newsletter.com/ !/注册页面

搜索引擎将使用以下方法搜索页面:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

我们可以使用ngRoute的内置方法来设置Angular应用的哈希前缀:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

并且，如果我们使用html5Mode，我们需要使用meta标签来实现这个:

<meta name="fragment" content="!">

提醒，我们可以用$location服务设置html5Mode():

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

处理搜索引擎

我们有很多机会来决定如何以静态HTML的形式将内容实际交付给搜索引擎。我们可以自己托管后端，我们可以使用服务托管后端，我们可以使用代理来交付内容，等等。让我们来看看一些选择:

自托管

We can write a service to handle dealing with crawling our own site using a headless browser, like phantomjs or zombiejs, taking a snapshot of the page with rendered data and storing it as HTML. Whenever we see the query string ?_escaped_fragment_ in a search request, we can deliver the static HTML snapshot we took of the page instead of the pre-rendered page through only JS. This requires us to have a backend that delivers our pages with conditional logic in the middle. We can use something like prerender.io's backend as a starting point to run this ourselves. Of course, we still need to handle the proxying and the snippet handling, but it's a good start.

通过付费服务

将内容导入搜索引擎最简单、最快的方法是使用服务Brombone、seo.js、seo4ajax和prerender。IO是其中的一个很好的例子，它将为您提供上面的内容呈现。当我们不想处理运行服务器/代理时，这是一个很好的选择。而且，它通常非常快。

要了解更多关于Angular和SEO的信息，我们在http://www.ng-newsletter.com/posts/serious-angular-seo.html上写了一个关于它的广泛教程，我们在我们的书ng-book: The Complete book on AngularJS中更详细地介绍了它。请登录n-book.com查看。

2013-12-24 20:05:37

在这里可以找到一个好的实践:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

2014-03-16 13:56:49

2014年5月更新

谷歌爬虫现在执行javascript -您可以使用谷歌网站管理员工具来更好地理解您的网站是如何通过谷歌呈现的。

原来的答案如果你想优化你的应用程序的搜索引擎，不幸的是没有办法提供预渲染版本的爬虫。你可以在这里阅读谷歌对ajax和javascript较多的网站的更多推荐。

如果这是一个选项，我会推荐阅读这篇关于如何使用服务器端渲染为Angular做SEO的文章。

我不确定当爬虫遇到自定义标记时它会做什么。

2012-11-23 00:17:30

这种情况已经发生了巨大的变化。

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946