如何让搜索引擎抓取AJAX内容?

作者: 阮一峰

日期: 2013年7月16日

越来越多的网站,开始采用"单页面结构"(Single-page application)。

整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容。

这种做法的好处是用户体验好、节省流量,缺点是AJAX内容无法被搜索引擎抓取。举例来说,你有一个网站。


  http://example.com  
  

用户通过井号结构的URL,看到不同的内容。


  http://example.com#1
  http://example.com#2
  http://example.com#3  
  

但是,搜索引擎只抓取example.com,不会理会井号,因此也就无法索引内容。

为了解决这个问题,Google提出了"井号+感叹号"的结构。


  http://example.com#!1
  

当Google发现上面这样的URL,就自动抓取另一个网址:


  http://example.com/?_escaped_fragment_=1
  

只要你把AJAX内容放在这个网址,Google就会收录。但是问题是,"井号+感叹号"非常难看且烦琐。Twitter曾经采用这种结构,它把


  http://twitter.com/ruanyf
  

改成


  http://twitter.com/#!/ruanyf
  

结果用户抱怨连连,只用了半年就废除了。

那么,有没有什么方法,可以在保持比较直观的URL的同时,还让搜索引擎能够抓取AJAX内容?

我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝。

Discourse是一个论坛程序,严重依赖Ajax,但是又必须让Google收录内容。它的解决方法就是放弃井号结构,采用 History API

所谓 History API,指的是不刷新页面的情况下,改变浏览器地址栏显示的URL(准确说,是改变网页的当前状态)。这里有一个例子,你点击上方的按钮,开始播放音乐。然后,再点击下面的链接,看看发生了什么事?

地址栏的URL变了,但是音乐播放没有中断!

History API 的详细介绍,超出这篇文章的范围。这里只简单说,它的作用就是在浏览器的History对象中,添加一条记录。


  window.history.pushState(state object, title, url);
  

上面这行命令,可以让地址栏出现新的URL。History对象的pushState方法接受三个参数,新的URL就是第三个参数,前两个参数都可以是null。


  window.history.pushState(null, null, newURL); 
  

目前,各大浏览器都支持这个方法:Chrome(26.0+),Firefox(20.0+),IE(10.0+),Safari(5.1+),Opera(12.1+)。

下面就是Robin Ward的方法。

首先,用History API替代井号结构,让每个井号都变成正常路径的URL,这样搜索引擎就会抓取每一个网页。


  example.com/1
  example.com/2
  example.com/3
  

然后,定义一个JavaScript函数,处理Ajax部分,根据网址抓取内容(假定使用jQuery)。


  function anchorClick(link) {
    var linkSplit = link.split('/').pop();
    $.get('api/' + linkSplit, function(data) {
      $('#content').html(data);
    });
  }
  

再定义鼠标的click事件。


  $('#container').on('click', 'a', function(e) {
    window.history.pushState(null, null, $(this).attr('href'));
    anchorClick($(this).attr('href'));
    e.preventDefault();
  });
  

还要考虑到用户点击浏览器的"前进 / 后退"按钮。这时会触发History对象的popstate事件。


  window.addEventListener('popstate', function(e) {     
    anchorClick(location.pathname); 	
   });
  

定义完上面三段代码,就能在不刷新页面的情况下,显示正常路径URL和AJAX内容。

最后,设置服务器端。

因为不使用井号结构,每个URL都是一个不同的请求。所以,要求服务器端对所有这些请求,都返回如下结构的网页,防止出现404错误。


  <html>
    <body>
      <section id='container'></section>
      <noscript>
        ... ...
       </noscript>
    </body>
  </html>
  

仔细看上面这段代码,你会发现有一个noscript标签,这就是奥妙所在。

我们把所有要让搜索引擎收录的内容,都放在noscript标签之中。这样的话,用户依然可以执行AJAX操作,不用刷新页面,但是搜索引擎会收录每个网页的主要内容!

===================================

[通知]

接下来三周,我外出旅行,暂停更新网志。

大家可以从 http://www.ruanyifeng.com/tweets/,了解我的行程。欢迎关注。

(完)

珠峰培训

简寻

留言(65条)

非常棒,只是不知道IE7~9有没有什么方案

引用artwl的发言:

非常棒,只是不知道IE7~9有没有什么方案

这IE7~9只能直接跳转页面了,但能保证页面正常显示而已……我觉得既然已经可以被SEO抓取到,那么完全可以两套方案一起上。IE6+不支持History API的可以直接用Hash搞。

之前做过类似的东西. 每个link都是真正完整的url, 你直接在新窗口打开url的时候, 是看到完整的跟url对应的页面的. 但是如果用户点击这个link, 事件会被javascript截获, ajax去load内容然后加载.
好处就是所有的浏览器都可以支持.
坏处就是内容变了url没有更新.

搜索引擎并没有解析 JavaScript 啊. 我觉得搜索引擎的未来是完全收录 JavaScript 生成的内容.

这个方法真的非常赞,就是得多套方案来保证兼容性哇~~~

很赞的说,同LS所说,兼容性要考虑~~

不错,这样就不怕影响到文章内容中的标题或脚注的 anchor 了。祝旅途愉快~
准备给自己的博客改装!

非常不错,学习一下。有时候也在思考这个问题,看到这个的确眼前一亮啊。

又学到新知识了。谢谢。旅途愉快

订阅阮大哥日志真是百利无害啊,越来越喜欢。每篇新文章都会认真读,受益匪浅。
有时间会读一下算法相关的文章。

网易的云音乐不知道是不是这么弄的呢???

url改变后,再刷新貌似就会出问题吧。请求就丢了

设置服务器端是必要的么?是不是只设置window.history.pushState(state object, title, url);搜索引擎就会收录地址栏中变换的地址对应的内容?

网易的云音乐用的是iframe

引用熊猫的发言:

设置服务器端是必要的么?是不是只设置window.history.pushState(state object, title, url);搜索引擎就会收录地址栏中变换的地址对应的内容?

服务器端必需保持原来的设置,不是单靠 API 就能搞定的,即是说人们还是可以直接通过访问 URL 且不需要开启 Javascript 就能获得页面内容。然后再给页面内的链接添加点击事件来在当前页面动态载入其它内容,顺便用 API 改变地址栏 URL 和修改访问记录。

我看了一遍,没怎么看明白啊!可能是因为我不懂seo吧!

很赞啊,移动上webapp和原生app相比,体验的很关键一点是流畅,无刷新在手机的浏览器里体验很流畅,再配合响应式设计,web又能跨平台,容易更新维护,以后浏览器的升级,兼容性更好的话,web似乎更值得做

另祝旅途愉快

引用tom的发言:
... 坏处就是内容变了url没有更新.
为什么说这条是坏处呢,不解。

土耳其,土耳其,回来谈谈旅行的感受

github、bitbucket 和现在的 twitter 都是这样做的。我也曾做过这种东西。
还记得从火狐 3.6 迁移到火狐 4 时,发现 github 上点链接不会整个页面刷新了呢。

不过有个小问题:火狐和 Chrome 不一样,有一个在页面加载时就触发 popstate 事件,另一个没有。

引用weedge的发言:

网易的云音乐不知道是不是这么弄的呢???

iframe的

其实文章要说的和标题有些偏。

标题, 如何让搜索引擎抓取ajax内容。
文章, 如何拦截掉a标签的链接跳转, ajax load内容, 同时改变url。

引用holyzfy的发言:


为什么说这条是坏处呢,不解。

ajax load部分内容不改变url被认为是友好体验。 但是load 网页大部分内容又不改变url, 这样用户无法复制分享传播当前所见内容的url

这个不是rooter的概念吗,把网站设计为restfull风格就是了

这个方法弱爆了啊 onclick 可以 preventDefualt 的,所以想怎么来就怎么来么么

想问一下,我在多看阅读购买了《黑客与画家》,您能收到稿酬吗?

引用照常生活的发言:

想问一下,我在多看阅读购买了《黑客与画家》,您能收到稿酬吗?

不能。译者没有版税,只有一次性的翻译费。

国外好多都在用了
问题是pushState 在国内ie6-9的年代 完全不适用

愚见:pjax似乎也可以做这个功能~

引用holyzfy的发言:


为什么说这条是坏处呢,不解。

我也不解。。 。。。

引用artwl的发言:

非常棒,只是不知道IE7~9有没有什么方案

IE 8 and 9: hashchange event...
IE 6 and 7: I've no idea but just do what links should do...

很早github就已经使用这个方法了

引用红色石头的发言:

愚见:pjax似乎也可以做这个功能~

pjax就是pushState+ajax

/#!/方法对于不支持hashchange的浏览器怎么办呢。

转的那篇文章之前看过 需要server权限pass

当时正写了个ajax全站shop http://goo.gl/LPuII

阮先生您好,我是一位重症医学科的医生,大概6年前无意间看到您的博客,觉得非常好,就一直追着看。一眨眼,看了6年了,感觉时间过得好长,也感觉您的博客的内容越来越高深了,逐渐看不懂了。衷心祝愿您在取得更大的成就的同时,务必注意身体健康!!!即使看不懂,也还要追着看。哈哈。

一峰,虽然你不认识我,但是我关注你很久了。
你翻译的书黑客与画家还有软件随想录,翻译的特别棒
我也很赞成你收费文章的想法,我也愿意为你的文章付费。
知识是无价之宝。每次读你的文章犹如醍醐灌顶。
朋友加油!有一批认同你的粉丝。坚持对的。

感谢你的分享,History API是一个很不错的解决方案啊。。。。

用this.href比用$(this).attr('href')更高效

引用wang的发言:

ajax load部分内容不改变url被认为是友好体验。 但是load 网页大部分内容又不改变url, 这样用户无法复制分享传播当前所见内容的url

你没看明白 用history api url是会变的

github.com 就是用这种机制实现的

History API很拍案叫绝么?

如果服务器对这些请求返回的是这样的结构,那我刷新不是没用了?

按我的理解,应该是如果只是异步操作,那么使用ajax改变内容,同时改变url。

但如果直接访问该url(改变后的url),那么服务器不是应该返回完整的相同页面么?为什么返回文中所示的结构??

很不错的文章,只可惜这个技术目前只能支持高版本的浏览器,如果能兼容低版本浏览器就完美了。

引用Lukas的发言:

如果服务器对这些请求返回的是这样的结构,那我刷新不是没用了?

按我的理解,应该是如果只是异步操作,那么使用ajax改变内容,同时改变url。

但如果直接访问该url(改变后的url),那么服务器不是应该返回完整的相同页面么?为什么返回文中所示的结构??

页面可以是直接访问的,载入后可通过 JS 动态生成更多内容,或者在不需要 JS 的情况下也有内容。阮先生指的大概是几乎完全用 JS 根据 URL 动态加载内容吧。

结构相同是为了方便在更新内容的同时不引起「闪烁」效果。

引用Evan的发言:

用this.href比用$(this).attr('href')更高效

两者获取方式有差异,后者是取 DOM 属性的字面值,前者会自动转换为完整 URL 。

也就是将url当作一个变量,js的window.history.pushState也可以实现这个功能,个人愚见,欢迎探讨

js的window.history.pushState是干啥的?

引用wang的发言:

ajax load部分内容不改变url被认为是友好体验。 但是load 网页大部分内容又不改变url, 这样用户无法复制分享传播当前所见内容的url

window.history.pushState 的作用就是更新URL

引用weedge的发言:

网易的云音乐不知道是不是这么弄的呢???

网易云音乐用的iframe,后退音乐会从头开始。。。

最后对服务器端的设置不是很理解,是不是在服务器端判断是不是Ajax请求,如果是的话,只发送当前分页的内容,如果不是的话,就发送整个HTML文档,这样的话,对于每一个分页,都要准备两份HTML文档,一份只是该分页的内容,一份是包含该分页的整个HTML文档,不知道这样想对不对?

分享的demo很不错,建议大家想确切了解还是看demo比较好。
个人认为文章的重点有点乱,看着看着发现搜索引擎抓取和修改地址栏似乎成了一回事,评论也有人指出了这一点,不过我觉得真要说清这个问题,从后台的url接口切入会好很多,注意这两个url:
for ajax——http://inserthtml.com/demo/history/pages/page-1.html
for 地址栏——http://inserthtml.com/demo/history/page-1.html
说到底,这篇文章就介绍了这样一种技巧,ajax请求http://inserthtml.com/demo/history/pages/page-1.html后,把地址栏的url改为http://inserthtml.com/demo/history/page-1.html。
好了那么问题来了(心中默念:挖掘机哪家强)。
如果地址栏的url跟实际请求的url不一致,那么在当前页面刷新一下会发生什么?
这才是问题的关键,神马修改地址栏事小,后台能否提供一致的内容接口事大,形象地说,就是改了你得负责。开发者不能期望每个用户都从某一启动页访问这个web应用,然后通过一系列异步跳转到当前的内容页,对于用户来说,不论在什么情况下,在地址栏输入一个url就应该看到一个完整的页面。
demo展示了这一点,刷新一下,发现还是一致的页面内容,说明后台的确提供了http://inserthtml.com/demo/history/page-1.html这个页面,改出来的url不是随意糊弄的,而是确有其事,文章没说清这个问题,更把这个url换成了是一个防止404敷衍搜索引擎的奇怪页面,个人感觉是偏离这个技巧初衷的。

我现在做的好多项目(html5移动端项目)基本上都是一个页面,然后通过pushSate和监听popstate事件来控制页面的跳转,这个真的太有用了

引用袁源的发言:

这个方法弱爆了啊 onclick 可以 preventDefualt 的,所以想怎么来就怎么来么么

但是如果我要引用這個頁面的 url 呢?得到的結果只是入口頁的。hash 就是為了兼容歷史紀錄和收藏夾的。

如果是單純一個頁面, 2/3 是用ajax加載, 那麼 google 會 cache 到那部份動態產生的內容嗎? 我查 facebook 的頁面幾乎都是動態, 但 google 有 cache耶

使用的Ajax技术架构网站,用户体验好、节省流量,但Ajax内容真的能被搜索引擎抓取吗?谷歌好像可以,但百度真的也能抓取Ajax下的内容吗?如何在SEO优化中规避Ajax带来的影响呢?如何让百度抓取Ajax内容并能给网站赋予一定的权重呢?

noscript 标签中放搜索的内容,具体的可以放什么呢?关键词、链接地址?这样搜索引擎就能收录了吗?是不是每次ajax请求,noscript的内容都要重新设置搜索内容的?

写得不错,感谢分享

引用mayy77的发言:

noscript 标签中放搜索的内容,具体的可以放什么呢?关键词、链接地址?这样搜索引擎就能收录了吗?是不是每次ajax请求,noscript的内容都要重新设置搜索内容的?

同样不明白noscript要放啥

@ChieveiT:

赞一个
携程移动端就是用的history Api

我记得angularJS的router就是用HistoryAPI+Hashchange来实现的,支持HistoryAPI的就用,不支持的自动退回Hashchange。

监听浏览器后退的代码需要更新了
window.addEventListener('popstate', function(e) {
anchorClick(location.href);
});

在Google Chrome 版本 43.0.2357.130 (64-bit)下验证通过

学到了,很有用,谢谢

然而这个办法对百度搜索来说还是没用的对吧?

最后一段确实没怎么理解。希望能详细解释。 按照demo后台是需要准备好两种不同url的内容,一个是ajax提交的,一个是直接浏览器地址提交的。

我的做法是服务器该怎样就怎样
在前端,改变url的同时,不会去请求该url的内容,而是去请求一部分数据而已

一句话说,就是做原来的事,仅仅准备一份内容给蜘蛛爬

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接