搜索引擎如何处理AngularJS应用程序？

 

我看到有关搜索引擎和搜索引擎优化的AngularJS应用程序的两个问题：

1）自定义标签会发生什么？ 搜索引擎会忽略这些标签中的全部内容吗？ 即假设我有 

<custom>
  <h1>Hey, this title is important</h1>
</custom>

尽管在自定义标签内，会不会索引<h1> ？


2）有没有办法避免索引{{}}的搜索引擎直接绑定？ 即 

<h2>{{title}}</h2>

我知道我可以做类似的事情 

<h2 ng-bind="title"></h2>

但是如果我想让爬虫“看到”标题呢？ 服务器端是唯一的解决方案吗？

2014年5月更新

Google抓取工具现在可以执行JavaScript - 您可以使用Google网站站长工具来更好地了解您的网站是如何由Google呈现的。

原始答案
如果你想优化你的搜索引擎的应用程序，不幸的是没有办法为爬虫提供预渲染的版本。 您可以在这里阅读更多关于Google对ajax和javascript-heavy网站的建议。

如果这是一个选项，我会推荐阅读这篇关于如何为服务器端渲染做Angular SEO的文章。

我不确定抓取工具在遇到自定义代码时会做些什么。

使用PushState和预分解

目前（2015年）做到这一点的方法是使用JavaScript pushState方法。

PushState更改顶部浏览器栏中的URL，而无需重新加载页面。 假设您有一个包含选项卡的页面。 这些标签隐藏并显示内容，并且动态插入内容，可以使用AJAX或通过简单设置display：none和display：block来隐藏和显示正确的标签内容。

点击标签后，使用pushState更新地址栏中的网址。 当页面呈现时，使用地址栏中的值来确定显示哪个标签。 角度路由将自动为您完成。

Precomposition

有两种方法可以触发PushState单页应用程序（SPA）

  • 通过PushState，用户点击一个PushState链接并且内容被AJAX引入。
  • 直接点击URL。

    • 网站上的最初命中将涉及直接点击URL。 随着PushState更新URL，随后的点击只会在内容中显示AJAX。

    爬行程序从页面收集链接，然后将它们添加到队列中以供日后处理。 这意味着对于爬虫来说，服务器上的每次命中都是直接命中，它们不会通过Pushstate进行导航。

    预整合将初始有效负载捆绑到来自服务器的第一个响应中，可能是JSON对象。 这允许搜索引擎在不执行AJAX调用的情况下呈现页面。

    有一些证据表明Google可能不会执行AJAX请求。 更多关于这里：

    https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

    搜索引擎可以读取和执行JavaScript

    Google已经能够解析JavaScript一段时间了，这就是为什么他们最初开发Chrome的原因，是为了充当Google spider的全功能无头浏览器。 如果链接具有有效的href属性，则可以对新URL进行索引。 没有什么可做的了。

    如果另外点击链接触发pushState调用，则用户可以通过PushState导航站点。

    搜索引擎支持PushState网址

    PushState目前由Google和Bing支持。

    谷歌

    马特卡茨回应Paul Irish关于PushState搜索引擎优化的问题：

    http://youtu.be/yiAF9VdvRPw

    Google宣布对蜘蛛完全支持JavaScript：

    http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

    结果是Google支持PushState并将索引PushState URL。

    另请参阅Google网站站长工具的Googlebot抓取工具。 你会看到你的JavaScript（包括Angular）被执行。

    兵

    这是Bing公司于2013年3月发布的支持美国PushState网址的公告：

    http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

    不要使用HashBangs＃！

    Hashbang网站是一个丑陋的主题，要求开发人员在特定位置提供预渲染版本的网站。 他们仍然工作，但你不需要使用它们。

    Hashbang网址如下所示：

    domain.com/#!path/to/resource

    这将与这样的元标签配对：

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

    Google不会以这种形式为它们编制索引，而是会从_escaped_fragments_网址中提取该网站的静态版本并将其编入索引。

    推送状态URL看起来像任何普通的URL：

    domain.com/path/to/resource

    不同之处在于Angular通过拦截在JavaScript中处理document.location的变化来处理它们。

    如果你想使用PushState URLs（你可能会这样做）去掉所有旧的哈希样式URL和元标记，并简单地在你的配置块中启用HTML5模式。

    测试你的网站

    谷歌网站管理员工具现在包含一个工具，它可以让你获取一个网址为谷歌，并呈现在谷歌呈现它的JavaScript。

    https://www.google.com/webmasters/tools/googlebot-fetch

    在Angular中生成PushState URL

    要在Angular中生成真实的URL，而不是＃前缀，请在$ locationProvider对象上设置HTML5模式。 

    $locationProvider.html5Mode(true);

    服务器端

    由于您使用的是真实网址，因此您需要确保服务器为所有有效的网址提供相同的模板（以及一些预先制作的内容）。 你如何做到这一点将取决于你的服务器体系结构。

    网站地图

    您的应用可能会使用不寻常的导航形式，例如悬停或滚动。 为确保Google能够驱动您的应用，我可能会建议您创建一个网站地图，这是您的应用响应的所有网址的简单列表。 您可以将其放置在默认位置（/ sitemap或/sitemap.xml），或者使用网站管理员工具告知Google。

    无论如何，有一个网站地图是一个好主意。

    浏览器支持

    Pushstate在IE10中工作。 在旧版浏览器中，Angular会自动回退到哈希风格的URL

    演示页面

    以下内容使用具有预合成功能的pushstate网址呈现：

    http://html5.gingerhost.com/london

    可以验证的是，在此链接中，内容已编入索引并显示在Google中。

    提供404和301标题状态代码

    由于搜索引擎总是会针对您的服务器提出每次请求，因此您可以从服务器提供标题状态代码，并希望Google能够看到它们。

    让我们了解一下AngularJS和SEO

    Google，Yahoo，Bing和其他搜索引擎使用传统的抓取工具以传统方式抓取网页。 他们运行机器人抓取网页上的HTML，沿途收集信息。 他们保持有趣的话，并寻找其他网页的其他链接（这些链接，它们的数量和它们的数量与SEO发挥作用）。

    那么，为什么不搜索引擎处理JavaScript网站？

    答案与搜索引擎机器人通过无头浏览器工作的事实有关，并且他们通常没有JavaScript呈现引擎来呈现页面的JavaScript。 这适用于大多数页面，因为大多数静态页面不关心JavaScript呈现页面，因为它们的内容已经可用。

    可以做些什么呢？

    幸运的是，大型网站的抓取工具已经开始实施一种机制，使我们能够抓取我们的JavaScript网站，但这需要我们对我们的网站实施更改 。

    如果我们将hashPrefix更改为#! 而不是简单的# ，那么现代搜索引擎将改变请求使用_escaped_fragment_而不是#! 。 （使用HTML5模式，即我们有没有哈希前缀的链接，我们可以通过查看我们后端的User Agent头来实现相同的功能）。

    也就是说，而不是来自正常浏览器的请求，如下所示：

    http://www.ng-newsletter.com/#!/signup/page

    搜索引擎将通过以下方式搜索页面：

    http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

    我们可以使用ngRoute的内置方法来设置Angular应用程序的哈希前缀： 

    angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

    而且，如果我们使用html5Mode ，我们需要使用元标记来实现它： 

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

    提醒一下，我们可以用$location服务设置html5Mode() ： 

    angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

    处理搜索引擎

    我们有很多机会来确定我们如何处理将内容实际提供给搜索引擎的静态HTML。 我们可以自己托管一个后端，我们可以使用服务为我们托管后端，我们可以使用代理来交付内容等。让我们看看几个选项：

    自托管

    我们可以编写一个服务来处理如何使用无头浏览器（例如phantomjs或zombiejs）来抓取我们自己的网站，并使用呈现的数据对网页进行快照并将其存储为HTML。 无论何时我们在搜索请求中看到查询字符串?_escaped_fragment_ ，我们都可以通过仅提供静态HTML快照来获取页面，而不是通过JS预渲染的页面。 这就要求我们有一个后端，它在中间提供了带有条件逻辑的页面。 我们可以使用像prerender.io的后端作为起点来运行它自己。 当然，我们仍然需要处理代理和代码段处理，但这是一个好的开始。

    使用付费服务

    获取内容到搜索引擎的最简单和最快速的方法是使用服务Brombone，seo.js，seo4ajax和prerender.io是这些将为您提供上述内容呈现的好例子。 对于我们不想处理运行服务器/代理的时代来说，这是一个很好的选择。 另外，它通常超级快。

    有关Angular和SEO的更多信息，我们在http://www.ng-newsletter.com/posts/serious-angular-seo.html上写了一篇关于它的广泛教程，我们在书中详细介绍了它：关于AngularJS的完整书籍 。 在ng-book.com上查看。

    链接地址: http://www.djcxy.com/p/3929.html

    上一篇: How do search engines deal with AngularJS applications?

    下一篇: What is the difference between a framework and a library?