lui*_*ati 696 seo html5 search-engine google-search angularjs
关于搜索引擎和SEO,我看到AngularJS应用程序存在两个问题:
1)自定义标签会发生什么？搜索引擎会忽略这些标签中的所有内容吗？即假设我有
<custom>
<h1>Hey, this title is important</h1>
</custom>
<h1>即使是在自定义标签内,也会被编入索引？
2)有没有办法避免索引{{}}的搜索引擎字面上绑定？即
<h2>{{title}}</h2>
我知道我可以做点什么
<h2 ng-bind="title"></h2>
但是,如果我想让爬虫"看到"标题怎么办？服务器端渲染是唯一的解决方案吗？
sup*_*ary 470
当前(2015)的方法是使用JavaScript pushState方法.
PushState更改顶部浏览器栏中的URL而不重新加载页面.假设您有一个包含标签的页面.选项卡隐藏和显示内容,并使用AJAX或简单地设置display:none和display:block来动态插入内容,以隐藏和显示正确的选项卡内容.
单击选项卡后,使用pushState更新地址栏中的URL.呈现页面时,使用地址栏中的值来确定要显示的选项卡.角度路由将自动为您执行此操作.
有两种方法可以访问PushState单页面应用程序(SPA)
网站上的初始点击将涉及直接点击URL.随着PushState更新URL,后续命中将只是内容中的AJAX.
抓取工具从页面中获取链接,然后将它们添加到队列中以供稍后处理.这意味着对于爬虫来说,服务器上的每次点击都是直接命中,它们不会通过Pushstate导航.
预合成将初始有效负载捆绑到服务器的第一个响应中,可能作为JSON对象.这允许搜索引擎在不执行AJAX调用的情况下呈现页面.
有证据表明Google可能不会执行AJAX请求.更多相关信息:
谷歌已经能够解析JavaScript一段时间了,这就是他们最初开发Chrome的原因,它可以作为谷歌蜘蛛的全功能无头浏览器.如果链接具有有效的href属性,则可以为新URL编制索引.没有什么可做的了.
如果另外单击链接会触发pushState调用,则用户可以通过PushState导航该站点.
目前,Google和Bing都支持PushState.
这是Matt Cutts回应Paul Irish关于SEO的PushState的问题:
以下是Google宣布对蜘蛛的完整JavaScript支持:
http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
结果是Google支持PushState并将索引PushState URL.
另请参阅Google网站管理员工具的Googlebot抓取工具.您将看到您的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网址如下所示:
domain.com/#!path/to/resource
这将与这样的元标记配对:
<meta name="fragment" content="!">
Google不会以此形式对其进行索引,而是从_escaped_fragments_网址中提取该网站的静态版本并将其编入索引.
Pushstate URL看起来像任何普通的URL:
domain.com/path/to/resource
区别在于Angular通过拦截在JavaScript中处理它的document.location的更改来为您处理它们.
如果您想使用PushState URL(您可能会这样做),请取出所有旧的哈希样式URL和元标记,并在配置块中启用HTML5模式.
Google网站管理员工具现在包含一个工具,可让您以谷歌的形式获取网址,并在Google呈现时呈现JavaScript.
https://www.google.com/webmasters/tools/googlebot-fetch
要在Angular中生成真实URL,而不是#prefixed,请在$ locationProvider对象上设置HTML5模式.
$locationProvider.html5Mode(true);
由于您使用的是真实URL,因此您需要确保服务器为所有有效URL提供相同的模板(以及一些预先组合的内容).如何执行此操作将取决于您的服务器体系结构.
您的应用可能会使用不寻常的导航形式,例如悬停或滚动.为了确保Google能够推动您的应用,我建议您创建一个站点地图,这是您的应用响应的所有网址的简单列表.您可以将其放在默认位置(/ sitemap或/sitemap.xml),或使用网站管理员工具告诉Google.
无论如何都有一个站点地图是个好主意.
Pushstate适用于IE10.在旧版浏览器中,Angular会自动回退到哈希样式的URL
使用带有预合成的pushstate URL呈现以下内容:
http://html5.gingerhost.com/london
可以验证,在此链接中,内容已编入索引并显示在Google中.
由于搜索引擎会始终针对每个请求点击您的服务器,因此您可以从服务器提供标题状态代码,并希望Google能够看到它们.
joa*_*mbl 405
2014年5月更新
Google抓取工具现在可以执行javascript - 您可以使用Google网站管理员工具更好地了解Google如何呈现您的网站.
原始答案
如果您想为搜索引擎优化您的应用程序,很遗憾无法为抓取工具提供预渲染版本.您可以在此处详细了解Google对ajax和javascript-heavy网站的建议.
如果这是一个选项,我建议阅读这篇文章,了解如何使用服务器端渲染为Angular做SEO.
我不确定爬虫在遇到自定义标签时会做什么.
aus*_*ser 106
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
我们可以使用内置方法设置Angular应用程序的哈希前缀ngRoute:
angular.module('myApp', [])
.config(['$location', function($location) {
$location.hashPrefix('!');
}]);
而且,如果我们正在使用html5Mode,我们将需要使用元标记来实现它:
<meta name="fragment" content="!">
提醒一下,我们可以设置html5Mode()与$location服务:
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就是这些的好例子,它们将为您托管上述内容呈现.对于我们不想处理运行服务器/代理的时候,这是一个很好的选择.而且,它通常超级快.
有关Angular和SEO的更多信息,我们在http://www.ng-newsletter.com/posts/serious-angular-seo.html 上编写了一个广泛的教程,我们在本书的ng-book中对它进行了详细介绍:关于AngularJS的完整书籍.请在ng-book.com上查看.
小智 57
您应该在moo博客年度查看有关构建SEO友好的AngularJS网站的教程.他将引导您完成Angular文档中列出的所有步骤.http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
使用此技术,搜索引擎会看到扩展的HTML而不是自定义标记.
小智 41
这已经发生了巨大的变化.
如果您使用:$ locationProvider.html5Mode(true); 你被设定了.
没有更多的渲染页面.
Ket*_*tan 17
自从提出这个问题以来,情况发生了很大的变化.现在有选项让Google为您的AngularJS网站编制索引.我找到的最简单的选择是使用http://prerender.io免费服务,它将为您生成crwalable页面并将其提供给搜索引擎.它几乎在所有服务器端Web平台上都受支持.我最近开始使用它们,支持也非常好.
我与他们没有任何关系,这来自一个快乐的用户.
Angular自己的网站为搜索引擎提供简化的内容:http://docs.angularjs.org/？ _ escaped_fragment_ =/tutorial/step_09
假设您的Angular应用程序正在使用Node.js/Express驱动的JSON API,例如/api/path/to/resource.也许您可以将任何请求重定向?_escaped_fragment_到/api/path/to/resource.html,并使用内容协商来呈现内容的HTML模板,而不是返回JSON数据.
唯一的问题是,你的Angular路由需要与你的REST API 1:1匹配.
编辑:我意识到这有可能真的让你的REST api变得混乱,我不建议在非常简单的用例之外做它,这可能是一个很自然的选择.
相反,您可以为机器人友好的内容使用完全不同的路由和控制器集.但是,您将在Node/Express中复制所有AngularJS路由和控制器.
我已经决定使用无头浏览器生成快照,尽管我觉得这有点不太理想.
截至目前,谷歌已经改变了他们的AJAX抓取建议.
时代变了.今天,只要您不阻止Googlebot抓取您的JavaScript或CSS文件,我们通常就能够像现代浏览器一样呈现和理解您的网页.
tl;博士:[Google]不再推荐2009年制作的AJAX抓取提案[Google].
小智 6
Google的Crawlable Ajax Spec,在其他答案中引用,基本上就是答案.
如果你对其他搜索引擎和社交机器人如何处理同样的问题感兴趣,我在这里写下了现状:http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html
我在https://ajaxsnapshots.com工作,这是一家将Crawlable Ajax Spec实现为服务的公司 - 该报告中的信息基于我们日志中的观察结果.
| 归档时间： |
|
| 查看次数： |
205085 次 |
| 最近记录： |