协慌网

登录 贡献 社区

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

我看到了有关搜索引擎和 SEO 的 AngularJS 应用程序两个问题:

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

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

<h1>是否在自定义标签中仍会被索引?


2)有没有一种方法可以避免索引 {{}} 的搜索引擎按字面意义绑定? IE

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

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

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

但是,如果我想让搜寻器 “看到” 标题怎么办?服务器端渲染是唯一的解决方案吗?

答案

使用 PushState 和预合成

当前(2015 年)的实现方法是使用 JavaScript pushState 方法。

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

单击选项卡后,使用 pushState 更新地址栏中的 URL。呈现页面后,使用地址栏中的值确定要显示的选项卡。角路由将自动为您完成此操作。

预合成

有两种方法可以打入 PushState 单页应用程序(SPA)

  1. 通过 PushState,用户单击 PushState 链接,然后将内容 AJAXed 到其中。
  2. 通过直接点击 URL。

网站上的最初匹配将涉及直接匹配 URL。当 PushState 更新 URL 时,随后的命中内容将只包含 AJAX 内容。

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

Precomposition 将初始有效负载捆绑到服务器的第一个响应中,可能作为 JSON 对象。这使搜索引擎可以在不执行 AJAX 调用的情况下呈现页面。

有证据表明 Google 可能不会执行 AJAX 请求。有关此的更多信息:

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

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

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

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

搜索引擎对 PushState URL 的支持

Google 和 Bing 当前支持 PushState。

谷歌

这是马特 · 卡茨(Matt Cutts)回应保罗 · 爱尔兰(Paul Irish)关于 PushO for SEO 的问题:

http://youtu.be/yiAF9VdvRPw

以下是 Google 宣布对蜘蛛的完整 JavaScript 支持:

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

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

另请参阅以 Googlebot 身份获取 Google 网站站长工具。您将看到您的 JavaScript(包括 Angular)已执行。

ing

以下是 Bing 宣布支持日期为 2013 年 3 月的漂亮 PushState URL:

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

不要使用 HashBangs#!

Hashbang 网址是一个丑陋的权宜之计,要求开发人员在特定位置提供网站的预渲染版本。它们仍然有效,但是您不需要使用它们。

Hashbang URL 如下所示:

domain.com/#!path/to/resource

这将与像这样的元标记配对:

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

Google 不会以这种形式将它们编入索引,而是会从_escaped_fragments_ URL 中提取网站的静态版本并对其进行索引。

Pushstate URL 看起来像任何普通 URL:

domain.com/path/to/resource

区别在于 Angular 会通过拦截 JavaScript 中对 document.location 的更改来为您处理这些更改。

如果您想使用 PushState URL(并且您可能会这样做),请删除所有旧的哈希样式 URL 和元标记,然后在配置块中启用 HTML5 模式。

测试您的网站

Google 网站管理员工具现在包含一个工具,该工具可让您以 google 形式获取网址,并以 Google 呈现的方式呈现 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 URL 呈现的:

http://html5.gingerhost.com/london

可以验证的是,在此链接上,内容已建立索引并显示在 Google 中。

提供 404 和 301 标头状态代码

由于搜索引擎将始终为每个请求命中服务器,因此您可以从服务器提供标头状态代码,并期望 Google 看到它们。

2014 年 5 月更新

Google 搜寻器现在执行 javascript-您可以使用Google 网站站长工具更好地了解 Google 如何呈现您的网站。

原始答案
如果您想针对搜索引擎优化应用程序,那么很遗憾无法为搜寻器提供预渲染的版本。您可以在此处阅读有关 Google 针对 ajax 和 javascript 繁重网站的建议的更多信息。

如果这是一个选项,我建议阅读这篇文章,了解如何使用服务器端渲染对 Angular 进行 SEO。

我不确定搜寻器在遇到自定义标签时会做什么。

让我们对 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 标记实现此目标:

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

提醒一下,我们可以使用$location服务html5Mode()

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

处理搜索引擎

我们有很多机会来决定如何处理将内容作为静态 HTML 实际交付给搜索引擎的方式。我们可以自己托管一个后端,我们可以使用服务为我们托管一个后端,我们可以使用代理来交付内容,等等。让我们看一些选择:

自托管

我们可以编写服务来处理使用无头浏览器(例如 phantomjs 或 zombiejs)抓取我们自己的网站,对包含渲染数据的页面快照并将其存储为 HTML 的情况。每当我们在搜索请求中看到查询字符串?_escaped_fragment_时,我们都可以仅通过 JS 传递我们为页面拍摄的静态 HTML 快照,而不是预先渲染的页面。这要求我们有一个后端,该后端在中间提供带有条件逻辑的页面。我们可以使用诸如prerender.io 的后端之类的内容作为自己运行该程序的起点。当然,我们仍然需要处理代理和代码段处理,但这是一个好的开始。

有偿服务

将内容引入搜索引擎的最简单,最快的方法是使用服务Bromboneseo.jsseo4ajaxprerender.io是这些的很好的例子,它们将为您提供上述内容呈现。在我们不想处理运行服务器 / 代理的情况下,这是一个很好的选择。而且,它通常超级快。

有关角和搜索引擎优化的更多信息,我们写了一篇关于它的广泛的教程在http://www.ng-newsletter.com/posts/serious-angular-seo.html 我们详细介绍它在我们的书吴书更是:关于 AngularJS 的完整书籍。在ng-book.com 上进行检查。