AngularJS 内容和谷歌答案

【问题标题】：AngularJS content and GoogleAngularJS 内容和谷歌
【发布时间】：2015-03-02 16:19:43
【问题描述】：

最近我看到一些文章说 Google 现在会抓取网站并呈现 CSS 和 Javascript。 Google 自己的示例文章：http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html

我在 Angular 中有一个单页应用程序设置，在路由上使用 HTML5 模式。我的 index.html 中的 ng-view 是根据 URL 填充的，如下所示：

app.config(function($routeProvider, $locationProvider){

  $locationProvider.html5Mode(true);

  $routeProvider.when("/", {
    templateUrl: "/views/dashboard.html"
  }).when("/portfolio", {
    templateUrl: "/views/portfolio.html"
  });

});

Google 现在应该转到www.example.com/portfolio，执行从views/portfolio.html 引入内容的javascript，并且能够读取所有这些内容吗？

根据我读过的那些文章，这就是应该发生的事情。这一篇特别详细解释了关于Angular：https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html

这就是问题所在。当我使用 Google 网站管理员工具和 Fetch 或 Fetch and Render 功能查看 Google 如何查看我的页面时，它不会呈现 JS，而只会在我的 index.html 中显示初始 HTML。

有效吗？我做错了什么吗？如何测试？

【问题讨论】：

您添加了.hashPrefix('!') 和<meta name="fragment" content="!"> 部分吗？它们对于机器人所需的 _escaped_fragment 部分是必需的。=> developers.google.com/webmasters/ajax-crawling/docs/…
@PlantTheIdea 当我阅读问题中的第二篇文章时，我切换到了 HTML5 模式（没有 hashPrefix）。那里的博主解释了如何使用 HTML5 模式，Google 仍然会执行 JS。不确定这是不是真的。
另外，肯定有可能有漂亮的网址但仍然在谷歌上索引？不这样做似乎很可笑。
有很多方法可以做到这一点，但最安全的方法是使用该片段。它是 Google（以及其他搜索机器人）将转义片段应用于站点的标识符。我最近刚刚使用 Angular 建立了一个站点，并且提到了 <meta> 标签，在网站管理员工具上呈现没有问题。
@PlantTheIdea 因此，从 MEAN 堆栈 SPA 在 Google 上获得索引的唯一安全方法是使用 /#!/ 破坏您的网站 URL？这对我来说似乎有点疯狂，并且可能足以让很多人停止使用这项技术。

标签： javascript html angularjs seo

【解决方案1】：

正如我在 cmets 中提到的，希望这个答案能提供更多我的意思的上下文。

因此，当您声明html5Mode 时，还要包括hashPrefix：

$locationProvider
    .html5Mode(true)
    .hashPrefix('!');

然后，在您的<head> 中包含这个标签：

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

这里发生的情况是，您为 History API 提供了一个后备措施，这意味着所有使用兼容浏览器访问的用户（基本上现在所有的浏览器）都会看到：

http://example.com/home/

只有在像 IE9 这样的恐龙浏览器上，他们才会看到：

http://example.com/#!/home/

现在，这是现实生活中的真实访客。您特别询问了被使用机器人的谷歌索引的问题。他们会尝试将example.com/home/ 作为您服务器上的实际目的地（意思是/home/index.html），这显然不存在。通过提供上面的 <meta> 标记，您已向机器人提供了提示，以改为转到站点的 ?_escaped_fragment 版本（如 index.html?_escaped_fragment=home）并将其与实际 Google 搜索中的 /home/ 的 URL 相关联.

它完全在后端，您网站的所有访问者仍然会看到干净的 URL，并且只是必要的，因为 Angular 在后台使用 location.hash，而在服务器端看不到。最重要的是，您的实际用户不会受到影响并且不会有丑陋的 URL，除非他们使用的浏览器不支持 History API。对于这些用户，您所做的只是让网站开始为他们工作（就像在它被破坏之前一样）。

希望这会有所帮助！

更新

由于您使用的是 MEAN 堆栈，因此您还可以采用一个已经存在很长时间的不同方向，即使用 HTML 快照。有一些 npms 将提供快照（即来自渲染后的静态 HTML），可以在所示位置从您的服务器提供这些快照。这种技术有点过时了，但它从 2012 年开始就出现了，并且被证明是有效的。

当我这样做时，我使用了grunt-html-snapshot，但还有其他人。你甚至可以使用 PhantomJS 来制作快照，虽然我从来没有这样做过。

【讨论】：

感谢您的回复。这似乎合乎逻辑，我还没有尝试过 HTML5 模式和 hashPrefix 一起。我会在早上第一件事尝试然后回复。
所以只是想知道，在我的 MEAN 堆栈情况下，我是否必须做 HTML 快照？我是否还需要将?_escaped_fragment 请求路由到我的节点后端中的正确位置？我试图避免在 Google 执行 javascript 并因此可以访问内容的情况下进行快照。不是这样吗？
使用?_escaped_fragment 方法后，我不再需要制作 HTML 快照，它应该是其中之一，而不是两者。
确实很有趣。所以澄清一下，如果我同时使用 HTML5 模式和 hashPrefix，然后添加元片段标签，谷歌会明白它需要渲染 javascript 来获取内容吗？用户会去www.example.com/portfolio，但谷歌会去www.example.com/portfolio?_escaped_fragment？
许多文章（包括 Google 自己）仍然说您需要为任何 ajax 内容做 HTML 快照。对此 Stackoverflow 答案的评论还解释了其他搜索引擎绝对不会呈现 JS：stackoverflow.com/questions/13499040/…。如果是这种情况，并且我需要使用 HTML5 模式制作 HTML 快照，那么 ?_escaped_fragment URL 的外观如何？我需要检测到它并将其重定向到快照吗？