我看到了有关搜索引擎和 SEO 的 AngularJS 应用程序两个问题:
1)自定义标签会发生什么?搜索引擎会忽略这些标签中的全部内容吗?即假设我有
<custom>
<h1>Hey, this title is important</h1>
</custom>
<h1>
是否在自定义标签中仍会被索引?
2)有没有一种方法可以避免索引 {{}} 的搜索引擎按字面意义绑定? IE
<h2>{{title}}</h2>
我知道我可以做类似的事情
<h2 ng-bind="title"></h2>
但是,如果我想让搜寻器 “看到” 标题怎么办?服务器端渲染是唯一的解决方案吗?
当前(2015 年)的实现方法是使用 JavaScript pushState 方法。
PushState 更改顶部浏览器栏中的 URL,而无需重新加载页面。假设您有一个包含标签的页面。选项卡隐藏和显示内容,并且可以使用 AJAX 或通过简单地设置 display:none 和 display:block 来隐藏和显示正确的选项卡内容,从而动态插入内容。
单击选项卡后,使用 pushState 更新地址栏中的 URL。呈现页面后,使用地址栏中的值确定要显示的选项卡。角路由将自动为您完成此操作。
有两种方法可以打入 PushState 单页应用程序(SPA)
网站上的最初匹配将涉及直接匹配 URL。当 PushState 更新 URL 时,随后的命中内容将只包含 AJAX 内容。
爬网程序从页面中收集链接,然后将其添加到队列中以供以后处理。这意味着对于爬虫而言,服务器上的每个命中都是直接命中,它们不会通过 Pushstate 进行导航。
Precomposition 将初始有效负载捆绑到服务器的第一个响应中,可能作为 JSON 对象。这使搜索引擎可以在不执行 AJAX 调用的情况下呈现页面。
有证据表明 Google 可能不会执行 AJAX 请求。有关此的更多信息:
Google 能够解析 JavaScript 已有一段时间了,这就是他们最初开发 Chrome 的原因,以充当 Google 蜘蛛的全功能无头浏览器。如果链接具有有效的 href 属性,则可以为新 URL 编制索引。没什么可做的了。
如果另外单击链接会触发 pushState 调用,则用户可以通过 PushState 导航该站点。
Google 和 Bing 当前支持 PushState。
这是马特 · 卡茨(Matt Cutts)回应保罗 · 爱尔兰(Paul Irish)关于 PushO for SEO 的问题:
以下是 Google 宣布对蜘蛛的完整 JavaScript 支持:
http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
结果是 Google 支持 PushState 并将索引 PushState URL。
另请参阅以 Googlebot 身份获取 Google 网站站长工具。您将看到您的 JavaScript(包括 Angular)已执行。
以下是 Bing 宣布支持日期为 2013 年 3 月的漂亮 PushState URL:
http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
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 模式。
Google 网站管理员工具现在包含一个工具,该工具可让您以 google 形式获取网址,并以 Google 呈现的方式呈现 JavaScript。
https://www.google.com/webmasters/tools/googlebot-fetch
要在 Angular 中生成真实的 URL,而不是前缀的#,请在 $ locationProvider 对象上设置 HTML5 模式。
$locationProvider.html5Mode(true);
由于您使用的是真实网址,因此您需要确保服务器为所有有效的网址提供了相同的模板(加上一些预组合的内容)。如何执行此操作将取决于您的服务器体系结构。
您的应用可能会使用异常的导航形式,例如,悬停或滚动。为了确保 Google 能够驱动您的应用,我可能建议您创建一个站点地图,这是您的应用所响应的所有网址的简单列表。您可以将其放置在默认位置(/ sitemap 或 / sitemap.xml),也可以使用网站站长工具将其告知 Google。
无论如何,拥有一个站点地图是一个好主意。
Pushstate 可在 IE10 中使用。在较旧的浏览器中,Angular 将自动回退到哈希样式的 URL
以下内容是使用带有预先组成的 pushstate URL 呈现的:
http://html5.gingerhost.com/london
可以验证的是,在此链接上,内容已建立索引并显示在 Google 中。
由于搜索引擎将始终为每个请求命中服务器,因此您可以从服务器提供标头状态代码,并期望 Google 看到它们。
2014 年 5 月更新
Google 搜寻器现在执行 javascript-您可以使用Google 网站站长工具更好地了解 Google 如何呈现您的网站。
原始答案
如果您想针对搜索引擎优化应用程序,那么很遗憾无法为搜寻器提供预渲染的版本。您可以在此处阅读有关 Google 针对 ajax 和 javascript 繁重网站的建议的更多信息。
如果这是一个选项,我建议阅读这篇文章,了解如何使用服务器端渲染对 Angular 进行 SEO。
我不确定搜寻器在遇到自定义标签时会做什么。
Google,Yahoo,Bing 和其他搜索引擎使用传统的搜寻器以传统方式搜寻网络。他们运行的机器人会抓取网页上的 HTML,并一路收集信息。他们保留了有趣的单词,并寻找到其他页面的其他链接(这些链接,链接的数量和数量在 SEO 中起作用)。
答案与以下事实有关:搜索引擎机器人通过无头浏览器工作,并且它们通常没有用于渲染页面 javascript 的 javascript 渲染引擎。这适用于大多数页面,因为大多数静态页面不关心 JavaScript 渲染其页面,因为它们的内容已经可用。
幸运的是,较大型站点的爬网程序已开始实现一种机制,该机制可使我们使 JavaScript 站点可爬网,但它要求我们对站点进行更改。
如果我们将hashPrefix
更改为#!
而不是简单地使用#
,现代搜索引擎会将请求更改为使用_escaped_fragment_
而不是#!
。 (在 HTML5 模式下,即我们有没有哈希前缀的链接,我们可以通过查看User Agent
标头来实现相同的功能)。
也就是说,不是来自普通浏览器的如下请求:
http://www.ng-newsletter.com/#!/signup/page
搜索引擎将使用以下内容搜索页面:
http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page
ngRoute
的内置方法来设置 Angular 应用的哈希前缀:
angular.module('myApp', [])
.config(['$location', function($location) {
$location.hashPrefix('!');
}]);
而且,如果我们使用的是html5Mode
,我们将需要使用 meta 标记实现此目标:
<meta name="fragment" content="!">
提醒一下,我们可以使用$location
服务html5Mode()
angular.module('myApp', [])
.config(['$location',
function($location) {
$location.html5Mode(true);
}]);
我们有很多机会来决定如何处理将内容作为静态 HTML 实际交付给搜索引擎的方式。我们可以自己托管一个后端,我们可以使用服务为我们托管一个后端,我们可以使用代理来交付内容,等等。让我们看一些选择:
我们可以编写服务来处理使用无头浏览器(例如 phantomjs 或 zombiejs)抓取我们自己的网站,对包含渲染数据的页面快照并将其存储为 HTML 的情况。每当我们在搜索请求中看到查询字符串?_escaped_fragment_
时,我们都可以仅通过 JS 传递我们为页面拍摄的静态 HTML 快照,而不是预先渲染的页面。这要求我们有一个后端,该后端在中间提供带有条件逻辑的页面。我们可以使用诸如prerender.io 的后端之类的内容作为自己运行该程序的起点。当然,我们仍然需要处理代理和代码段处理,但这是一个好的开始。
将内容引入搜索引擎的最简单,最快的方法是使用服务Brombone , seo.js , seo4ajax和prerender.io是这些的很好的例子,它们将为您提供上述内容呈现。在我们不想处理运行服务器 / 代理的情况下,这是一个很好的选择。而且,它通常超级快。
有关角和搜索引擎优化的更多信息,我们写了一篇关于它的广泛的教程在http://www.ng-newsletter.com/posts/serious-angular-seo.html ,我们详细介绍它在我们的书吴书更是:关于 AngularJS 的完整书籍。在ng-book.com 上进行检查。