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


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


短视頻,自新闻媒体,达人种草1站服务

愈来愈多的网站,刚开始选用"单网页页面构造"(Single-page application)。

全部网站仅有1张网页页面,选用Ajax技术性,依据客户的键入,载入不一样的內容。

 

这类做法的益处是客户体验好、节约总流量,缺陷是AJAX內容没法被检索模块抓取。举例来讲,你有1个网站。

客户根据井号构造的URL,看到不一样的內容。

可是,检索模块只抓取example,不容易理睬井号,因而也就没法数据库索引內容。

以便处理这个难题,Google提出了"井号+感慨号"的构造。

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

要是你把AJAX內容放在这个网站地址,Google就会收录。可是难题是,"井号+感慨号"十分不好看且烦琐。Twitter以前选用这类构造,它把

改为

結果客户埋怨连连,只用了半年就废止了。

那末,有木有甚么方式,能够在维持较为直观的URL的另外,还让检索模块可以抓取AJAX內容?

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

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

所谓 History API,指的是不更新网页页面的状况下,更改访问器详细地址栏显示信息的URL(精确说,是更改网页页面确当前情况)。这里有1个事例,你点一下上方的按钮,刚开始播发歌曲。随后,再点一下下面的连接,看看产生了甚么事?

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

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

上面这行指令,可让详细地址栏出現新的URL。History目标的pushState方式接纳3个主要参数,新的URL便是第3个主要参数,前两个主要参数都可以因此null。

现阶段,各大访问器都适用这个方式:Chrome(26.0+),Firefox(20.0+),IE(10.0+),Safari(5.1+),Opera(12.1+)。

下面便是Robin Ward的方式。

最先,用History API取代井号构造,让每一个井号都变为一切正常相对路径的URL,这样检索模块就会抓取每个网页页面。

随后,界定1个JavaScript涵数,解决Ajax一部分,依据网站地址抓取內容(假设应用jQuery)。

再界定电脑鼠标的click恶性事件。

还要考虑到到客户点一下访问器的"前行 / 后退"按钮。这时候会开启History目标的popstate恶性事件。

界定完上面3段编码,就可以在不更新网页页面的状况下,显示信息一切正常相对路径URL和AJAX內容。

最终,设定服务器端。

由于不应用井号构造,每一个URL全是1个不一样的恳求。因此,规定服务器端对全部这些恳求,都回到以下构造的网页页面,避免出現404不正确。

 

细心看上面这段编码,你会发现有1个noscript标识,这便是奥秘所属。

大家把全部要让检索模块收录的內容,都放在noscript标识当中。这样的话,客户仍然能够实行AJAX实际操作,无需更新网页页面,可是检索模块会收录每一个网页页面的关键內容!