我发现AngularJS应用程序在搜索引擎和SEO方面存在两个问题:
1) 自定义标记会发生什么情况?搜索引擎会忽略这些标签中的全部内容吗?i、 假设我有
<;定制>;
<;h1>;嘿,这个标题很重要</h1>;
</定制>;
将<;h1>即使在自定义标记中也要编制索引吗
2) 有没有办法避免搜索引擎从字面上索引{{}绑定?i、 e
<;h2>;{{title}}</h2>;
我知道我可以做类似的事情
<;h2 ng bind=“title”></h2>;
但是如果我真的想让爬虫“看到”标题呢?服务器端渲染是唯一的解决方案吗
使用PushState和预合成
当前(2015年)的方法是使用JavaScript pushState方法
PushState更改顶部浏览器栏中的URL,而无需重新加载页面。假设您有一个包含选项卡的页面。选项卡隐藏和显示内容,并且动态插入内容,可以使用AJAX,也可以通过简单地设置display:none和display:block来隐藏和显示正确的选项卡内容
单击选项卡时,使用pushState更新地址栏中的url。呈现页面时,使用地址栏中的值确定要显示的选项卡。角度布线将自动为您执行此操作
预合成
点击PushState单页应用程序(SPA)有两种方式
- 通过PushState,用户单击一个PushState链接,内容会自动插入
- 通过直接点击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=“!”>
谷歌不会以这种形式为他们编制索引,而是会从“转义”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报头状态代码
因为搜索引擎总是会为每个请求点击你的服务器,你可以从你的服务器提供标题状态代码,并期望谷歌看到它们