AngularJS内容和谷歌

AngularJS content and Google

本文关键字：谷歌 AngularJS      更新时间：2024-08-07

最近我看到一些文章说谷歌现在抓取网站并呈现CSS和Javascript。谷歌自己的文章示例：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"
  });
});

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

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

问题来了。当我使用Google Webmaster Tools和Fetch或Fetch and Render功能来查看Google如何查看我的页面时，它不会呈现JS，只是在我的index.html中显示初始HTML。

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

正如我在评论中提到的，希望这个答案能提供更多我的意思。

因此，当您申报html5Mode时，还应包括hashPrefix:

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

然后，在您的<head>中，包括以下标签：

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

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

http://example.com/home/

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

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

现在，这是在现实生活中，有真实的人作为访客。你特别询问了使用机器人的谷歌对其进行索引的情况。他们会尝试将example.com/home/作为服务器上的实际目的地（意思是/home/index.html），但这显然不存在。通过提供上面的<meta>标签，您已经向机器人程序提供了一个提示，让其转到网站的?_escaped_fragment版本（如index.html?_escaped_fragment=home），并将其与实际谷歌搜索中的/home/ URL相关联。

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

希望这能有所帮助！

更新

由于您使用的是MEAN堆栈，所以您也可以使用一个已经存在很长时间的不同方向，即使用HTML快照。有一些npm将提供快照（意思是渲染后的静态HTML），这些快照可以从服务器上显示的位置提供。这项技术有点过时，但它从2012年开始就存在了，并被证明是有效的。

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

相关文章：