小编典典

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

html

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

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

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

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

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

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

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

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

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


阅读 600

收藏
2020-05-10

共1个答案

小编典典

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

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

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

预合成

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

  1. 通过PushState,用户单击PushState链接,然后将内容AJAXed到其中。
  2. 通过直接点击URL。
    网站上的最初匹配将涉及直接匹配URL。当PushState更新URL时,随后的命中内容将只是AJAX。

抓取工具从页面中收集链接,然后将其添加到队列中以供以后处理。这意味着对于爬虫而言,服务器上的每个命中都是直接命中,它们不会通过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