索引 angularjs 应用程序 - Googlebot 模拟与站点：域答案

【问题标题】：Indexing angularjs app - Googlebot-simulation vs site:domain索引 angularjs 应用程序 - Googlebot 模拟与站点：域
【发布时间】：2015-12-15 12:59:56
【问题描述】：

我最近使用Angularjs 创建了一个网页，我目前正尝试使用pushstate 让Google 将其编入索引。

我做了相当多的研究，发现我可以使用Googlebot-simulater in Google Webmaster tools 来模拟我网站上的 Google 访问，并查看机器人如何查看我的网页与用户看到的内容。

这里的结果看起来不错，Google 看到的内容与我的用户完全相同，并且所有页面/子页面的状态均为 partially 或 fully。

今天早上我被告知要查看Google 在我的网站上看到的内容的另一种方式是谷歌搜索site:domainname。这里列出了Google 和cached 的所有页面/子页面列表，通过单击不同的链接，您可以看到相应页面的显示位置。

这是我有点担心我错过了什么，因为无论我的页面从Goolgebot-simulation 获得的partially/fully 状态如何，当我查看我的页面时（使用第二种方法），页面都是空白的。

这是我第一次索引网页，我已经尝试了好几天，但没有任何运气。有没有人可以告诉我做错了什么/错过了什么，或者至少指出正确的方向？还是我应该再耐心一点？

【问题讨论】：

我添加了一个赏金，我处于完全相同的情况。
嘿，我也遇到了同样的问题，所以一直在尝试组合一个工具来帮助解决这个问题 - github.com/jjbskir/angular-prerender - 它会预先渲染您的网站，使其对 SEO 更加友好，并且不需要后端服务。

标签： javascript angularjs indexing web-crawler google-crawlers

【解决方案1】：

Johannes Ferner 的回答不正确。过去是这样，而且 Google 更新文档的速度真的很慢，但他们已经正式宣布只要您使用 pushstates，他们就可以处理 AJAX 页面而不需要 HTML 快照。必应遵循套件并处理推送状态。

例如，搜索 site:yoamoseguros.com 并检查那里的缓存结果。该页面是用 Angular 构建的，完全使用 AJAX 和 pushstates 加载，并且显示和索引都很好。

忽略损坏的页面，几天前我进行了一次失败的部署，重定向完全损坏，把所有东西都搞砸了，谷歌有时间在我有机会删除损坏的页面之前将它们编入索引。有一次他们快速索引了我的东西...：/

因此，如果您使用的是 pushstates（html5mode 开启）并且您的页面没有被 Google 正确显示，那么还有其他事情发生。检查您的 robots.txt，您是否阻止 Google 读取 js 文件或图像等静态内容？它需要访问这样的文件才能正确索引页面。

另外，请确保您的片段只是“#”而不是“#!”。在后一种情况下，Google 会假设您要使用 html 快照并尝试找到它们，但可能会失败。因此，如果您想使用更简单的 pushstate 版本，请确保您没有使用“#！”。

最后一点，Facebook 确实不支持推送状态。所以 Facebook 仍然需要快照（或者只是在 index.html 中硬编码 og-tags，具体取决于您拥有的内容类型）。

【讨论】：

【解决方案2】：

一些信息：

pushstate 与索引您的页面无关；它只是用来操纵浏览器历史记录，模拟 URI 更改，而实际上 SPA（单页应用程序，又名您的 Angular 应用程序）在内部路由而不重新加载页面。（Angular 也称其为 HTML5Mode）

Javascript 和 Googlebot：

虽然 google-bot（或任何其他搜索爬虫）基本上只是一个没有运行页面 JavaScript 代码功能的无头浏览器，但它不会看到动态生成的内容。

为了索引 SPA 并将动态内容传送给爬虫，您需要提供动态生成页面的静态 HTML 快照并将其提供给机器人。

如果您不使用静态 HTML 快照，那么 google bot 看到的唯一内容就是

<html>
<body>

<div ui-view="mainContent"></div>

</body>

为了生成这些快照，您可以使用多种 SPA 索引服务之一，例如 https://prerender.io/（如果您自己托管，则免费；或付费托管版本）。他们所做的是使用 JS-Support (phantomjs) 启动浏览器，然后打开所有提供的 URL（通过静态列表、爬行、sitemap.xml ...）运行页面上的所有 JavaScript 代码，等待页面完成（通过超时或您必须触发的某个事件），然后保存页面的静态版本（=快照）。

为确保机器人找到您必须处理的快照并提供 escaped_fragment ，默认情况下这将是一个 # ，或者如果您的应用程序中已使用 # ，则使用 <meta name="fragment" content="!"> 覆盖它。

如果你使用 prerender.io 提供的中间件（我和项目无关，只是使用它），很多困难的东西已经处理好了。

【讨论】：

嗨，Johannes，你能看看我使用 prerender 的后续问题吗：stackoverflow.com/questions/32696549/…
pushstate 有 something 与索引页面有关。与散列状态相反，pushstate 需要真实的 url，以便可以为页面添加书签和重新加载。这个想法是重新创建与硬加载相同的屏幕，但不重新加载。如果您在 SPA 地址路径后面没有实际的 url，则应该使用片段。如果 SPA 和“REST”都匹配，Google 将可以轻松抓取您的网站，并且您的用户将获得快速的页面更新。
这不再正确。虽然 Google 更新文档的速度很慢，但他们会使用 pushstate 正确索引网站，而无需 html 快照。