怎么着让追寻引擎抓取AJAX内容?

  
    
      

      
    
  
  

概念完下边3段代码,就能在不刷新页面包车型地铁景色下,呈现符合规律路径ULANDL和AJAX内容。

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

所谓 History
API,指的是不刷新页面的场合下,改变浏览器地址栏展现的U途达L(准确说,是改变网页的此时此刻景观)。那里有三个例子,你点击上方的按钮,起头广播音乐。然后,再点击下边包车型客车链接,看看产生了什么事?

那么,有未有如何措施,能够在维持比较直观的ULacrosseL的同时,还让寻找引擎能够抓取AJAX内容?

接下来,定义三个JavaScript函数,处理Ajax部分,根据网站抓取内容(假定使用jQuery)。

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

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

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

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

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

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

改成

假诺你把AJAX内容放在这几个网站,谷歌就会引用。不过难题是,”井号+感叹号”极不赏心悦目且烦琐。Instagram曾经选取这种组织,它把

自身直接以为未有主意做到,直到前二日看到了Discourse老祖宗之壹的Robin
Ward
的消除办法,不禁赞叹不己。

图片 1

近期,各大浏览器都支持那个法子:Chrome(二陆.0+),Firefox(20.0+),IE(十.0+),Safari(伍.1+),Opera(12.一+)。

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

  http://twitter.com/ruanyf
  

用户通过井号结构的U瑞虎L,看到差异的内容。

最终,设置服务器端。

唯独,搜索引擎只抓取example.com,不会理会井号,因而也就不可能索引内容。

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

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

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

History API
的详实介绍,超出这篇小说的限量。那里只简简单单说,它的效益正是在浏览器的History对象中,添加一条记下。

  http://example.com
  

图片 2

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

Discourse是二个论坛程序,严重依赖Ajax,可是又不可能不让谷歌收音和录音内容。它的化解措施正是割舍井号结构,采取 History
API

世家能够从 http://www.ruanyifeng.com/tweets/,精通自笔者的路途。欢迎关切。

上面那行命令,能够让地方栏出现新的U猎豹CS陆L。History对象的pushState方法接受八个参数,新的U翼虎L正是第多少个参数,前四个参数都能够是null。

全副网址只有一张网页,选取Ajax技术,遵照用户的输入,加载不一样的剧情。

进一步多的网站,初始使用“单页面结构”(Single-page
application)。

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

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

当谷歌(Google)发现上边那样的U奥迪Q3L,就活动抓取另2个网站:

再定义鼠标的click事件。

因为不接纳井号结构,每种UPAJEROL都以多个不1的请求。所以,要求服务器端对富有那几个请求,都回去如下结构的网页,防止出现40肆荒唐。

  http://example.com#!1
  

(完)

上面就是罗布in 沃德的诀窍。

为了缓解那些题材,谷歌(Google)提议了”井号+感叹号”的结构。

地址栏的UGL450L变了,不过音乐广播未有刹车!

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

率先,用History
API替代井号结构,让种种井号都改成健康途径的U中华VL,那样搜索引擎就会抓取每二个网页。

咱俩把装有要让寻找引擎收音和录音的始末,都置身noscript标签之中。那样的话,用户仍旧能够执行AJAX操作,不用刷新页面,可是搜索引擎会收音和录音每个网页的根本内容!

[通知]

图片 3

相关文章