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

  显示原文与译文双语对照的内容

我看到两个关于搜索引擎和搜索引擎优化的AngularJS应用程序的问题:

1 ) 自定义标记会发生什么情况? 搜索引擎忽略那些标签中的全部内容? 换句话说,假设我有


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

<h1> 是否会被索引,尽管它位于自定义标记内?


2 ) 是否有办法避免索引 {{}}的搜索引擎? i.e.


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

我知道我可以做一些


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

但是如果我想让爬虫的标题? server-side是唯一的解决方案?

时间:

如果你想为搜索引擎优化你的应用,不幸的是,你没有办法向爬虫提供pre-rendered版本。 你可以在这里阅读关于ajax和javascript-heavy站点的更多信息,参见参考资料。

server-side rendering,如果这是一个选项我推荐你阅读这篇文章 的对如何做搜索引擎优化

我不确定当遇到自定义标记时爬虫程序会做什么。

更新 2014年05月

谷歌爬虫现在执行 javascript web - 你可以使用 Google网站管理员工具来更好地理解你的站点是如何由 Google 。

让我们确定一下AngularJS和SEO的确定

谷歌,雅虎,必应和其他搜索引擎使用传统的爬虫方式在网络上抓取。 在网页上运行机器人,收集信息沿way,它们,它们会抓取 HTML 他们保留了有趣的单词,寻找其他网页的链接( 这些链接,它们的数量和它们的数量都与SEO一起发挥作用) 。

为什么不搜索引擎处理javascript站点?

答案肯定就怎么处理的事实,搜索引擎机器人通过无头浏览器和他们最经常做的工作不 有一个javascript的浏览器提供了页面的渲染引擎来渲染。 对于大多数页面,大多数静态页面都不关心JavaScript呈现页面,因为它们的内容已经可用。

可以做什么?

值得庆幸的是,较大的网站已经开始实现一种机制,使我们能够使我们的js网站的爬虫抓取时,但它 ,需要我们实现一个更改为我们的站点

如果我们将 hashPrefix 改为 #! 而不是 #,那么现代搜索引擎将改变请求,而不是使用 _escaped_fragment_ 。 在我们的后台 ), ( 使用HTML5模式,换句话说,我们有链接,而不在# 号前缀,我们也可以实现通过查看同样的特点 User Agent的侧边

也就是说,不是来自普通浏览器的请求,看起来像:

http://www.ng-newsletter.com/#!/signup/page

搜索引擎将在页面中搜索:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

使用一个内置的方法从我们可以设置哈希前缀我们的Angular apps:


angular.module('myApp', [])
.config(['$location', function($location) {
 $location.hashPrefix('!');
}]);

如果我们使用 html5Mode,我们需要使用meta标记实现它:


<meta name="fragment" content="!">

随着 $location service,提醒,可以根据需要随时


angular.module('myApp', [])
.config(['$location', 
function($location) {
 $location.html5Mode(true);
}]);

处理搜索引擎

我们有很多机会来决定如何处理将内容传递给搜索引擎作为静态 HTML 。 我们可以自己主持一个后端,我们可以使用一个服务来承载一个 back-end,我们可以使用一个代理来传递内容,等等 让我们看看一些选项:

Self-hosted

我们可以编写一个服务来处理使用一个无头浏览器来处理我们自己站点的处理,比如phantomjs或者 zombiejs,获取带有渲染数据的页面的快照并将它的作为HTML存储。 每当我们在一个搜索请求中看到查询字符串 ?_escaped_fragment_ 时,我们就可以传递页面的静态HTML快照,而不是pre-rendered页面。 这需要我们有一个后端,它在中间使用条件逻辑来交付页面。 我们可以使用像 。io后端的作为起点来运行这个。 当然,我们仍然需要处理代理和Fragment处理,但这是一个好的开始。

使用付费服务

最简单和最快的方式内容搜索引擎是使用服务 Brombone, seo.js, seo4ajax,和 prerender.io 这些的好例子,将上面的内容呈现给你。 当我们不想处理运行服务器/代理的时候,这是个不错的选择。 而且,它通常是超级快速的。

Angular 和搜索引擎优化的更多信息,我们写了一个广泛的教程在 http://www.ng-newsletter.com/posts/serious-angular-seo.html 我们详细的在我们的书更 ng-book: 关于 AngularJS的完整书籍。 在 ng-book.com 编辑器中查看。

...