如何使Angularjs应用程序可以爬行

Question

我使用Angular.js构建单页应用程序，我的问题是如何使应用程序可以抓取，因为在客户端使用ng-view处理路由，而服务器只返回简单的头文件。

网站链接：http://india-elections.in/

Answer 1

我所知道的唯一可行解决方案是AngularJS团队核心文档网站使用的解决方案。

• 首先，他们使用网址的HTML5历史记录和使用hashbang的后备广告。带有hashbang的网址会使Google在查询字符串中使用_escaped_fragment_抓取它们。
• 然后他们在后端使用AngularJS字符串插值和指令来呈现模板，因为当用户加载页面并且AngularJS解析它时它们将在DOM中。
• 他们将其传递给Google，因此他们在搜索索引中的内容与用户浏览器中的内容相同（因此这不是隐藏真实内容）。

AngularJS Google小组的核心开发人员提到了这一点。 [1] [2] [3]

另外，我认为他们使用PhantomJS和NodeJS来解析页面。

[1] https://groups.google.com/d/msg/angular/yClOeqR5DGc/4YXGx9z8EpAJ

[2] https://groups.google.com/d/msg/angular/EGwg49uAmMI/j-kj9nytT-IJ

[3] https://groups.google.com/d/msg/angular/EGwg49uAmMI/j-kj9nytT-IJ

Answer 2

我使用以上所有点和以下链接在我的网站中实施了抓取 https://developers.google.com/webmasters/ajax-crawling/

http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

http://india-elections.in

使用PhantomJs创建静态模板

Answer 3

我遇到this service，可能值得一试。它运行一个PhantomJS服务器并为您完成所有的工作。

Answer 4

制作单页应用程序爬网能够交互不是一项直接的任务。您必须考虑UX视角中的接入点，这些接入点将允许后退按钮，并跳转访问。例如，当按下后退按钮时，需要在服务器上重新创建对象状态的标记，而无需用户交互生成相同的标记，因为到达该访问点的使用将在客户端上创建。 Phantom.js可以用于此任务，或者客户端/服务器不可知的js可以用于在两端运行，或者像在好日子里那样复制访问点状态的整个逻辑可以重写为服务器。 @Ajay Beniwal详细介绍了如何创建html快照的一些链接。

假设您有一个Web服务器，可以在给定特定对象状态的情况下抛出引导标记。状态可以通过状态标识符提供，这需要是可以抓取代码的URL。像Angular js和Backbone.js这样的库提供了像Backbone.Router这样的机制，后者又使用链接片段或HTML5 pushState（）方法在客户端上存储状态标识符。然而，HTML5的优点在于刷新直接调用服务器的正确对象状态，而无需加载解析所提供的哈希的初始页面并重定向到正确的对象状态URL，因此没有其他选项可供使用浏览器，围绕HTML5范例构建应用程序将使它们成为爬虫的蛋糕，并且大多数HTML5 pushState的实现（如Backbone.Router）优先降级为旧版浏览器的哈希标记状态标记实现，仍然允许后退按钮。

Answer 5

自2015年10月起，您无需执行任何操作即可对应用程序进行抓取（我假设您指的是Google抓取）。

查看这篇文章：

https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html