AngularJS 内容和 Google

Question

最近我看到文章指出 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，只会显示初始 HTML 在我的 index.html 中。

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

Answer 1

因此，正如我在评论中提到的，希望这个答案能为我的意思提供更多背景信息。

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

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

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

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

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

http://example.com/home/

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

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

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

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

希望对您有所帮助！

更新

由于您使用的是 MEAN 堆栈，因此您还可以选择一个已经存在很长时间的不同方向，即使用 HTML 快照。有 npms 将提供快照（意思是来自 post-render 的静态 HTML），可以在显示的位置从您的服务器提供这些快照。该技术有点过时，但自 2012 年以来就已经存在并且被证明是有效的。

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

AngularJS 内容和 Google

AngularJS content and Google

javascript

html

angularjs

seo