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

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

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

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

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

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

我知道我可以做点什么

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

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


当前回答

爬虫不需要一个功能丰富的漂亮的图形用户界面,他们只想看到内容,所以你不需要给他们一个已经为人类构建的页面的快照。

我的解决方案:给爬虫程序想要的东西:

你必须考虑爬虫者想要什么,只给他那个。

小贴士:不要弄脏后面。只需使用相同的API添加一点服务器端前视图

其他回答

爬虫不需要一个功能丰富的漂亮的图形用户界面,他们只想看到内容,所以你不需要给他们一个已经为人类构建的页面的快照。

我的解决方案:给爬虫程序想要的东西:

你必须考虑爬虫者想要什么,只给他那个。

小贴士:不要弄脏后面。只需使用相同的API添加一点服务器端前视图

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

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

如果你使用: 美元locationProvider.html5Mode(真正的); 你准备好了。

不再有渲染页面。

让我们来明确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查看。

使用像PreRender这样的东西,它可以创建站点的静态页面,这样搜索引擎就可以索引它。

你可以在这里找到它适用于哪些平台:https://prerender.io/documentation/install-middleware#asp-net

谷歌的可爬行Ajax规范,在这里的其他答案中引用,基本上是答案。

如果你对其他搜索引擎和社交机器人如何处理同样的问题感兴趣,我在这里写了最新的技术:http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

我在一家https://ajaxsnapshots.com公司工作,该公司将可爬行Ajax规范作为一种服务来实现——报告中的信息是基于我们对日志的观察。