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

我发现AngularJS应用程序在搜索引擎和SEO方面存在两个问题:

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

<定制>
<h1>嘿,这个标题很重要&lt/h1>
&lt/定制>

<h1&gt即使在自定义标记中也要编制索引吗

2) 有没有办法避免搜索引擎从字面上索引{{}绑定?i、 e

<h2>{{title}}&lt/h2>

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

<h2 ng bind=“title”&gt&lt/h2>

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

使用PushState和预合成

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

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

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

预合成

点击PushState单页应用程序(SPA)有两种方式

  1. 通过PushState,用户单击一个PushState链接,内容会自动插入
  2. 通过直接点击URL

网站的最初点击将涉及直接点击URL。当PushState更新URL时,随后的点击将只是内容中的AJAX

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

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

有证据表明谷歌可能不会执行AJAX请求。更多信息请点击此处:

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

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

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

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

搜索引擎对PushState URL的支持

PushState目前由Google和Bing支持

谷歌

下面是Matt Cutts回答Paul Irish关于PushState for SEO的问题:

下面是Google宣布的对spider的完全JavaScript支持:

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

结果是Google支持PushState并将为PushState URL编制索引

另请参见谷歌网站管理员工具“作为谷歌机器人获取”。您将看到JavaScript(包括Angular)被执行

以下是Bing于2013年3月发布的支持pretty PushState URL的声明:

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

不要使用hashbang

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

Hashbang URL如下所示:

domain.com/#!路径/目标/资源

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

<meta name=“fragment”content=“!”&gt

谷歌不会以这种形式为他们编制索引,而是会从“转义”URL中提取网站的静态版本,并为其编制索引

Pushstate URL与任何普通URL类似:

domain.com/path/to/resource

区别在于Angular通过截取对document.location的更改来为您处理它们,并在JavaScript中处理它

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

测试您的站点

GoogleWebmasterTools现在包含一个工具,它允许您以Google的方式获取URL,并以Google的方式呈现JavaScript

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

以角度方式生成PushState URL

要以角度而不是前缀的方式生成真正的URL,请在$locationProvider对象上设置HTML5模式

$locationProvider.html5Mode(true);

服务器端

因为您使用的是真实的URL,所以需要确保服务器为所有有效的URL提供相同的模板(加上一些预合成的内容)。如何做到这一点取决于您的服务器体系结构

网站地图

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

无论如何,拥有一个网站地图是个好主意

浏览器支持

Pushstate在IE10中工作。在较旧的浏览器中,Angular将自动退回到哈希样式的URL

演示页

使用带预合成的pushstate URL呈现以下内容:

http://html5.gingerhost.com/london

可以验证的是,在这个链接中,内容被编入索引并出现在谷歌上

提供404和301报头状态代码

因为搜索引擎总是会为每个请求点击你的服务器,你可以从你的服务器提供标题状态代码,并期望谷歌看到它们

发表评论