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

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

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

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

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

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

我知道我可以做点什么

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

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


当前回答

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

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

其他回答

自从提出这个问题以来,情况已经发生了很大的变化。现在有一些选项可以让谷歌索引你的AngularJS站点。我发现最简单的选择是使用http://prerender.io的免费服务,它会为你生成可抓取的页面,并将其提供给搜索引擎。几乎所有服务器端web平台都支持它。我最近开始使用它们,支持也很好。

我和他们没有任何关系,这是来自一个快乐的用户。

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

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

爬虫(或机器人)被设计用来抓取网页的HTML内容,但由于异步数据抓取的AJAX操作,这成为一个问题,因为它需要一段时间来呈现页面并在其上显示动态内容。类似地,AngularJS也使用异步模型,这给谷歌爬虫带来了问题。

一些开发人员使用真实数据创建基本的html页面,并在爬行时从服务器端提供这些页面。我们可以在服务端用PhantomJS渲染相同的页面,它有_escaped_fragment_(因为谷歌寻找#!在我们网站的url中,然后取#!并将其添加到_escaped_fragment_查询参数中)。更多细节请阅读这篇博客。

你真的应该看看moo博客上关于如何构建一个seo友好的AngularJS网站的教程。他会带领你完成Angular文档中列出的所有步骤。http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

使用这种技术,搜索引擎看到的是展开的HTML,而不是自定义标记。

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

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

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