AngularJS内容和谷歌 [英] AngularJS content and Google

问题描述

最近我看到的文章指出，谷歌现在抓取网站并呈现CSS和Javascript。例如文章由谷歌自己：的http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html

Recently I've seen articles stating that Google now crawls sites and renders CSS and Javascript. Example article by Google themselves: http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html

我在角与路由上的HTML5模式单页的应用程序设置。在 NG-视图我的 index.html的的基础上，像这样的URL被填充：

I have a single page application setup in Angular with HTML5 mode on the routing. An ng-view in my index.html is populated based on the URL like so:

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

  $locationProvider.html5Mode(true);

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

});

谷歌现在应该去 www.example.com/portfolio ，执行带来的内容从的意见/ portfolio.html 键，能够读取所有的内容吧？

Google should now go to www.example.com/portfolio, execute the javascript which brings in the content from views/portfolio.html and be able to read all that content right?

这是要根据我读过这些文章发生什么。这其中特别解释了它在细节方面角：的https： //weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html

That's what should happen according to those articles I've read. This one in particular explains it in detail regarding Angular: https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html

下面就是问题所在。当我使用谷歌网站管理员工具和取或抓取并呈现来看看功能谷歌如何看待我的网页，它不渲染JS，只是表明我的 index.html的最初的HTML。

Here's the problem. When I use Google Webmaster Tools and the Fetch, or Fetch and Render functionality to see how Google sees my pages, it doesn't render the JS and just shows the initial HTML in my index.html.

时它的工作？难道我做错了什么？如何测试呢？

Is it working? Have I done something wrong? How can I test it?

推荐答案

因此​​，正如我在评论中提到，希望这个答案给了我的意思更多的上下文。

So as I mentioned in the comments, hopefully this answer gives more context of what I mean.

所以，当你做你的 html5Mode 的声明中，还包括散preFIX ：

So when you do your declaration of html5Mode, also include the hashPrefix:

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

然后，在你的＆LT; HEAD＆GT; ，包括这个标签：

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

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

What happens here is that you are providing a fallback measure for the History API, meaning for all users visiting with compliant browsers (basically everything nowadays) they will see this:

http://example.com/home/

和只恐龙浏览器，如IE9，他们会看到这一点：

And only on dinosaur browsers like IE9 would they see this:

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

现在，就是在实际人为游客真实的生活。有关谷歌，它使用机器人被索引您特别要求。他们会尽力去 example.com/home / 作为一个实际的目标的服务器上（即 /家庭/的index.html ），这显然不存在。通过提供＆LT;元＆GT; 标签上方，您所提供的提示机器人，而不是去一个 _ escaped_fragment 版本的网站（如 index.html的？_escaped_fragment =家园），并与该URL相关联的是 /家庭/ 在实际的谷歌搜索。

Now, that is in real life with actual people as visitors. You asked specifically about being indexed by Google, which uses bots. They will try to go to example.com/home/ as an actual destination on your server (meaning /home/index.html), which obviously doesn't exist. By providing the <meta> tag above, you have provided the hint to the bot to instead go to an ?_escaped_fragment version of the site (like index.html?_escaped_fragment=home) and associated it with that URL of /home/ in the actual Google searches.

这完全是在后台，所有的游客到您的网站仍然会看到干净的URL，因为引擎盖下角使用的location.hash，这是没有看到在服务器端才是必需的。底线，你的实际用户将不会受到影响，而不是有丑陋的URL，除非他们是在不支持历史API的浏览器。对于这些用户，你所做的一切就是使网站开始为他们工作（如前它会被打破）。

It is entirely on the backend, all visitors to your site will still see the clean URL, and is only necessary because under the hood Angular uses location.hash, which is not seen on server-side. Bottom line, your actual users will be unaffected and not have the ugly URL, unless they're on a browser that does not support the History API. For those users, all you've done is make the site start working for them (as before it would have been broken).

希望这有助于！

更新

由于您使用的是MEAN堆栈，你也可以去不同的方向这已经很长一段时间，这是用HTML快照。有迹象表明，将提供快照（即从后呈现静态HTML），可以从您的服务器在所示的位置来担任了国家防范机制。这技术是有点过时，但它既然喜欢了2012左右，并证明工作。

Since you are using a MEAN stack, you can also go a different direction which has been around a long time, which is to use HTML snapshots. There are npms that will provide snapshots (meaning static HTML from post-render) that can be served up from your server at the locations shown. That technique is a little outdated, but its been around since like 2012 and is proven to work.

回来时，我做到了，我用咕噜-HTML快照，但有在别人那里。你甚至可以使用PhantomJS使快照，虽然我从来没那么做。

Back when I did it, i used grunt-html-snapshot, but there are others out there. You can even use PhantomJS to make the snapshots, although I never did it.

这篇关于AngularJS内容和谷歌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！