Ajax什么让追寻引擎抓取AJAX内容?

更进一步多的网址,开端应用“单页面结构”(Single-page
application)。

全方位网址唯有一张网页,采取Ajax技能,依照用户的输入,加载区别的始末。

Ajax 1

那种做法的益处是用户体验好、节省流量,缺点是AJAX内容不能被搜寻引擎抓取。举例来说,你有3个网址。

  http://example.com
  

用户通过井号结构的U奥迪Q7L,看到区别的始末。

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

可是,搜索引擎只抓取example.com,不会理会井号,由此也就不大概索引内容。

为了消除这么些题材,谷歌建议了”井号+惊叹号”的协会。

  http://example.com#!1
  

当谷歌发现下面那样的U帕杰罗L,就机关抓取另二个网站:

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

倘诺您把AJAX内容放在那个网址,Google就会引用。可是难题是,”井号+感叹号”非常丑且烦琐。推文(Tweet)曾经选取这种布局,它把

  http://twitter.com/ruanyf
  

改成

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

结果用户抱怨连连,只用了八个月就撤除了。

那么,有未有哪些措施,能够在保险比较直观的UMuranoL的同时,还让追寻引擎可以抓取AJAX内容?

自作者直接觉得未有办法做到,直到前两日看到了Discourse波特兰开拓者(Portland Trail Blazers)之一的Robin
Ward
的搞定办法,不禁击节叹赏。

Ajax 2

Discourse是三个论坛程序,严重重视Ajax,不过又不能够不让谷歌收音和录音内容。它的化解措施正是割舍井号结构,选拔 History
API

所谓 History
API,指的是不刷新页面包车型地铁境况下,改变浏览器地址栏展现的U库罗德L(准确说,是改变网页的眼下景况)。那里有2个例子,你点击上方的按钮,起始播报音乐。然后,再点击下边包车型大巴链接,看看产生了什么样事?

Ajax 3

地址栏的UOdysseyL变了,不过音乐广播未有间断!

History API
的详实介绍,超出那篇文章的界定。那里只简简单单说,它的效率正是在浏览器的History对象中,添加一条记下。

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

地点那行命令,能够让地点栏出现新的UTucsonL。History对象的pushState方法接受八个参数,新的U科雷傲L正是第四个参数,前四个参数都得以是null。

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

当前,各大浏览器都帮衬这么些艺术:Chrome(26.0+),Firefox(20.0+),IE(拾.0+),Safari(5.1+),Opera(12.1+)。

下边就是罗布in 沃德的点子。

第2,用History
API替代井号结构,让每一个井号都改为正规路线的U智跑L,那样搜索引擎就会抓取每3个网页。

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

接下来,定义2个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);
  });
  

概念完上边三段代码,就能在不刷新页面包车型大巴景况下,呈现符合规律路径U奥迪Q5L和AJAX内容。

最后,设置服务器端。

因为不利用井号结构,每一个U兰德宝马X5L都是一个见仁见智的哀告。所以,必要服务器端对持有那些请求,都回去如下结构的网页,防止现身40四张冠李戴。

  
    
      

      
    
  
  

有心人看上边那段代码,你会发觉有三个noscript标签,那就是神秘所在。

咱俩把持有要让寻找引擎收音和录音的内容,都位居noscript标签之中。那样的话,用户还是可以执行AJAX操作,不用刷新页面,不过搜索引擎会收录每一个网页的根本内容!

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

[通知]

接下去三周,笔者出门旅行,暂停更新网志。

我们能够从 http://www.ruanyifeng.com/tweets/,掌握自个儿的行程。欢迎关心。

(完)

相关文章