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

Question

我发现 AngularJS 应用程序有两个关于搜索引擎和 SEO 的问题：

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

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

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

1. 有没有办法避免索引 {{}} 的搜索引擎按字面意思绑定？ IE

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

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

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

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

原文由 luisfarzati 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2014 年 5 月更新

Google 抓取工具 现在执行 javascript - 您可以使用 Google 网站管理员工具 来更好地了解 Google 如何呈现您的网站。

原始答案

如果您想针对搜索引擎优化您的应用程序，不幸的是，没有办法向爬虫提供预渲染版本。您可以 在此处 阅读有关 Google 对 ajax 和 javascript-heavy 网站的建议的更多信息。

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

我不确定爬虫在遇到自定义标签时会做什么。

原文由 joakimbl 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

(2022) 尽可能使用服务器端渲染，并使用 Pushstate 生成 URL

谷歌现在可以并且将会运行 JavaScript，因此只要您创建合理的 URL 结构，就很有可能仅使用 JavaScript 构建网站。然而，pagespeed 已经成为一个越来越重要的排名因素，通常在客户端构建的页面在初始渲染时表现不佳。

服务器端呈现 (SSR) 可以帮助您在服务器上预先生成您的页面。您的 html 包含将用作页面根目录的 div，但这不是一个空的 div，它包含如果允许运行 JavaScript 将生成的 html。

客户端下载 HTML 并呈现它以提供非常快速的初始加载，然后它执行 JavaScript，在称为水合作用的过程中用生成的内容替换根 div 的内容。

许多较新的框架都内置了 SSR，尤其是 NextJS。

(2015) 使用 PushState 和预合成

当前（2015 年）的方法是使用 JavaScript pushState 方法。

PushState 在不重新加载页面的情况下更改顶部浏览器栏中的 URL。假设您有一个包含选项卡的页面。选项卡隐藏和显示内容，并且内容是动态插入的，使用 AJAX 或通过简单地设置 display:none 和 display:block 来隐藏和显示正确的选项卡内容。

单击选项卡时，使用 pushState 更新地址栏中的 URL。呈现页面时，使用地址栏中的值来确定要显示的选项卡。 Angular 路由会自动为你做这件事。

预合成

有两种方式可以打一个PushState Single Page App (SPA)

1. 通过 PushState，用户单击 PushState 链接，内容被 AJAX 化。
2. 通过直接点击 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

谷歌已经能够解析 JavaScript 一段时间了，这就是他们最初开发 Chrome 的原因，作为谷歌蜘蛛的全功能无头浏览器。如果一个链接有一个有效的 href 属性，新的 URL 可以被索引。没有什么可做的了。

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

搜索引擎对 PushState URL 的支持

PushState 目前由 Google 和 Bing 支持。

谷歌

以下是 Matt Cutts 对 Paul Irish 关于用于 SEO 的 PushState 的问题的回应：

http://youtu.be/yiAF9VdvRPw

这是谷歌宣布对蜘蛛的全面 JavaScript 支持：

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

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

另请参阅 Google 网站管理员工具作为 Googlebot 的抓取。你会看到你的 JavaScript（包括 Angular）被执行了。

必应

以下是 Bing 在 2013 年 3 月发布的支持漂亮 PushState URL 的公告：

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

不要使用 HashBangs #！

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

Hashbang 网址如下所示：

domain.example/#!path/to/resource

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

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

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

Pushstate URL 看起来像任何普通的 URL：

domain.example/path/to/resource

不同之处在于 Angular 通过拦截对 document.location 的更改来为您处理它们，并在 JavaScript 中对其进行处理。

如果您想使用 PushState URL（您可能会这样做），请移除所有旧的哈希样式 URL 和元标记，并在您的配置块中启用 HTML5 模式。

测试您的网站

Google 网站管理员工具现在包含一个工具，允许您像 Google 一样获取 URL，并像 Google 呈现它一样呈现 JavaScript。

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

在 Angular 中生成 PushState URL

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

 $locationProvider.html5Mode(true);

服务器端

由于您使用的是真实 URL，因此您需要确保您的服务器为所有有效 URL 发送相同的模板（加上一些预先编写的内容）。您如何执行此操作将因您的服务器架构而异。

网站地图

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

无论如何，拥有站点地图是个好主意。

浏览器支持

Pushstate 适用于 IE10。在旧版浏览器中，Angular 会自动回退到哈希样式的 URL

演示页面

以下内容是使用带有预合成的 pushstate URL 呈现的：

http://html5.gingerhost.com/london

正如可以验证的那样，在 此链接 中，内容已编入索引并出现在 Google 中。

服务 404 和 301 标头状态代码

因为搜索引擎总是会为每个请求访问您的服务器，所以您可以从您的服务器提供标头状态代码并期望 Google 看到它们。

原文由 superluminary 发布，翻译遵循 CC BY-SA 4.0 许可协议