当前位置:小鱼儿玄机二站 > 操作系统 > API使搜索引擎抓取AJAX内容,如何让寻觅引擎抓取

API使搜索引擎抓取AJAX内容,如何让寻觅引擎抓取

文章作者:操作系统 上传时间:2019-09-03

世家在浏览Facebook的相册时有未有发掘,页面局地刷新的还要地址栏的地方也改成了,並且不是hash的方法。它利用的正是HTML5 history新添的几个API,作为window的三个全局变量,在HTML4的时代history已不是如何非常的事物了。大家日常选用的就有 history.back()以及history.go() 。

从而多的网址,初始接纳"单页面结构"(Single-page application)。

本身间接感到未有主意做到,直到前两日看到了Discourse创办人之一的罗布in 沃德的化解措施,不禁拍桌感叹。

全部网址独有一张网页,选拔Ajax手艺,依照顾客的输入,加载分裂的情节。

图片 1

图片 2

Discourse是二个论坛程序,严重注重Ajax,不过又必需让谷歌(Google)收音和录音内容。它的消除方法正是吐弃井号结构,采用History API。

这种做法的实惠是客户体验好、节省流量,短处是AJAX内容不可能被搜索引擎抓取。举个例子来讲,你有贰个网址。

所谓 History API,指的是不刷新页面包车型地铁图景下,改动浏览器地址栏显示的UEnclaveL(正确说,是改换网页的此时此刻事态)。这里有二个例证,你点击上方的按键,开端广播音乐。然后,再点击下边包车型客车链接,看看发生了什么事?


     

图片 3

顾客通过井号结构的U兰德酷路泽L,看到不相同的内容。

地址栏的U景逸SUVL变了,不过音乐播放未有中断!


           

History API 的事无巨细介绍,跨越那篇小说的限定。这里只轻巧说,它的效果就是在浏览器的History对象中,增加一条记下。

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

复制代码 代码如下:

为了化解这么些标题,Google建议了"井号+惊讶号"的构造。

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


     

上面那行命令,能够让地方栏出现新的UMuranoL。History对象的pushState方法接受四个参数,新的URAV4L正是第多少个参数,前三个参数都足以是null。

当Google发掘下边这样的U景逸SUVL,就自行抓取另八个网站:

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


     

眼下,各大浏览器都支持那个主意:Chrome(26.0+),Firefox(20.0+),IE(10.0+),Safari(5.1+),Opera(12.1+)。

假若您把AJAX内容放在那么些网站,Google就能够援引。但是难点是,"井号+惊叹号"比较丑且烦琐。照片墙曾经选取这种组织,它把

上面正是罗布in Ward的方法。


     

第一,用History API代替井号结构,让各样井号都改为正规渠道的U本田CR-VL,那样寻找引擎就能抓取每八个网页。

改成

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


     

接下来,定义一个JavaScript函数,管理Ajax部分,依照网址抓取内容(假定使用jQuery)。

结果顾客抱怨连连,只用了6个月就打消了。

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

那么,有未有哪些方法,能够在维持相比直观的U科雷傲L的还要,还让搜索引擎能够抓取AJAX内容?

再定义鼠标的click事件。

自己平昔认为没法做到,直到前两日看到了Discourse老祖宗之一的Robin Ward的消除方法,不禁交口称誉。

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

图片 4

还要思虑到客户点击浏览器的"前进 / 后退"开关。那时会触发History对象的popstate事件。

Discourse是一个论坛程序,严重正视Ajax,然则又无法不让谷歌(Google)收音和录音内容。它的消除措施正是割舍井号结构,采纳 History API。

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

所谓 History API,指的是不刷新页面包车型大巴情事下,改动浏览器地址栏展现的U翼虎L(准确说,是改造网页的此时此刻情景)。这里有二个例子,你点击上方的开关,伊始广播音乐。然后,再点击上边包车型地铁链接,看看产生了怎么样事?

概念完上面三段代码,就能够在不刷新页面包车型客车景况下,呈现不荒谬路线U凯雷德L和AJAX内容。

图片 5

终极,设置服务器端。

地址栏的U昂科拉L变了,不过音乐播放未有停顿!

因为不应用井号结构,每一个UTucsonL都是一个见仁见智的呼吁。所以,供给服务器端对持有这几个央浼,都回来如下结构的网页,幸免出现404荒谬。

History API 的详细介绍,高出那篇小说的限制。这里只简轻便单说,它的作用正是在浏览器的History对象中,增添一条记下。

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


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

紧凑看上边这段代码,你会发觉有三个noscript标签,那就是微妙所在。

上边那行命令,可以让地方栏出现新的U翼虎L。History对象的pushState方法接受多个参数,新的U陆风X8L就是第三个参数,前多少个参数都足以是null。

咱俩把富有要让寻觅引擎收音和录音的剧情,都位于noscript标签之中。那样的话,顾客仍可以施行AJAX操作,不用刷新页面,可是寻找引擎会收音和录音每一个网页的首要内容!                  


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

您或然感兴趣的小说:

  • JavaScript编制程序中window的location与history对象详解
  • javascript history对象(历史记录)使用方法(实现浏览器前进后退)
  • js history对象轻便达成重返和前进
  • JavaScript入门教程(7) History历史指标
  • JavaScript中的History历史指标
  • js推断当页面不可能回降时关闭网页不然就history.go(-1)
  • javascript:history.go()和History.back()的界别及利用
  • javascript SocialHistory 检查访谈者是还是不是访谈过某站点
  • javascript history对象详解

时下,各大浏览器都扶助那些方法:Chrome(26.0+),Firefox(20.0+),IE(10.0+),Safari(5.1+),Opera(12.1+)。

下边正是罗布in 沃德的办法。

首先,用History API代替井号结构,让种种井号都形成正规路径的UKugaL,那样寻觅引擎就能够抓取每一个网页。


  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);
  });   

概念完下面三段代码,就会在不刷新页面的情状下,突显日常路线UENCOREL和AJAX内容。

终极,设置服务器端。

因为不使用井号结构,每一个U凯雷德L都以四个不一的呼吁。所以,必要服务器端对富有那个须求,都回到如下结构的网页,防止出现404谬误。


              

                 

留意看上边这段代码,你会发现有三个noscript标签,那正是微妙所在。

大家把装有要让搜索引擎收音和录音的剧情,都位于noscript标签之中。那样的话,客商还能实行AJAX操作,不用刷新页面,但是寻找引擎会收音和录音每个网页的严重性内容!

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

[通知]

接下去三周,作者出门游览,暂停更新网志。

世家能够从 ,领悟本身的路程。款待关切。

(完)

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:API使搜索引擎抓取AJAX内容,如何让寻觅引擎抓取

关键词: