怎样让检索模块爬取AJAX內容?

怎样让检索模块爬取AJAX內容? 点一下:94 引言:越来越越大的网站,刚开始选用'宣传单页面构造'(Single-page application)。全部网站仅有一张网页页面,选用Ajax技术性,依据客户的键入,载入不一样的內容。这类作法的益处是客户感受好、节...
越来越越大的网站,刚开始选用"宣传单页面构造"(Single-page application)。 全部网站仅有一张网页页面,选用Ajax技术性,依据客户的键入,载入不一样的內容。 如何让搜索引擎抓取AJAX内容? 这类作法的益处是客户感受好、节约总流量,缺陷是AJAX內容没法被检索模块爬取。举例说明来讲,给你一个网站。
pre>
客户根据井号构造的URL,见到不一样的內容。
/#2 pre>
,不容易理睬井号,因而也就没法数据库索引內容。
 以便处理这一难题,Google明确提出了"井号+感慨号"的构造。
 

pre>
当Google发觉上边那样的URL,就全自动爬取另外一个
?_escaped_fragment_=1
要是你将AJAX內容放到这一网站地址,Google便会百度收录。可是难题是,"井号+感慨号"十分不好看且烦琐。Twitter以前选用这类构造,它把
ruanyf
#!/ruanyf
結果客户埋怨连连,仅用了大半年就废止了。 那麼,有木有甚么方式,能够在维持较为形象化的URL的同时,还让检索模块可以爬取AJAX內容?

我一直认为沒有方法保证,直至前几天见到了Discourse创办人之一的Robin Ward的处理方式,禁不住赞不绝口。

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

Discourse是一个社区论坛程序,比较严重依靠Ajax,可是又务必让Google百度收录內容。它的处理方式便是舍弃井号构造,选用 History API。

说白了 History API,指的不是更新网页页面的状况下,更改访问器详细地址栏显示信息的URL(准确说,是更改网页页面确当前情况)。这儿有一个案子,你点一下上边的按键,刚开始播发歌曲。随后,点一下击下边的连接,看一下产生了啥事?

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

详细地址栏的URL发生变化,可是歌曲播发沒有终断!

History API 的详尽详细介绍,超过本文的范畴。这儿只简易说,它的功效便是在访问器的History目标中,加上一条纪录。

window.history.pushState(state object, title, url);
上边这方面指令,可让详细地址栏出現新的URL。History目标的pushState方式接纳三个主要参数,新的URL便是第三个主要参数,前2个主要参数都可以因此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,那样检索模块便会爬取每个网页页面。

随后,界定一个JavaScript涵数,解决Ajax一部分,依据网站地址爬取內容(假设应用jQuery)。 <(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实际操作,无需更新网页页面,可是检索模块会百度收录每一个网页页面的关键內容!

-- 阮一峰

<

相关阅读