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

小编典典

html

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

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

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

<h1>尽管位于自定义标签中仍会被索引？

2）有没有一种方法可以避免搜索引擎将{{}}编入索引的字面绑定？即

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

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

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

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

阅读 681

2020-05-10

共1个答案

小编典典

使用PushState和预合成
实现方法是使用JavaScript pushState方法。

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

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

预合成

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

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

预组合将初始有效负载捆绑到服务器的第一个响应中，可能作为JSON对象。这使搜索引擎无需执行AJAX调用即可呈现页面。

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

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

搜索引擎对PushState URL的支持
Google和Bing当前支持PushState。

不要使用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模式。

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

$locationProvider.html5Mode(true);

服务器端

由于您使用的是真实网址，因此您需要确保服务器为所有有效的网址提供了相同的模板（加上一些预先组合的内容）。如何执行此操作将取决于服务器体系结构。

网站地图

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

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

浏览器支持

Pushstate可在IE10中使用。在较旧的浏览器中，Angular将自动回退到哈希样式的URL

2020-05-10