如何让搜索引擎抓取AJAX内容解决方案

越来越多的网站开始采用“单页应用”。

整个网站只有一个网页，利用Ajax技术根据用户的输入加载不同的内容。

这种方法的优点是用户体验好，节省流量，缺点是搜索引擎无法抓取AJAX内容。例如，你有一个网站。

http://example.com

用户可以通过带井号结构的URL看到不同的内容。

http://example.com # 1http://example.com # 2http://example.com # 3然而，搜索引擎只抓取example.com，忽略了井号，所以它不能索引内容。

为了解决这个问题，谷歌提出了‘感叹号’的结构。

http://example.com#！1当谷歌找到这样一个网址时，它会自动抓取另一个网址：

http://example.com/?_escaped_fragment_=1只要你把AJAX内容放在这个网站上，谷歌就会收录。但问题是，‘感叹号’非常难看和累赘。推特过去采用这种结构，它把

http://twitter.com/ruanyf改成了

http://twitter.com/#!/阮一飞结果，用户投诉连连，只用了半年时间就废除了。

那么，有什么方法可以让搜索引擎在抓取AJAX内容的同时保留直观的URL呢？

一直以为做不到，直到前两天看到《话语》创始人之一罗宾沃德的解决方案，不禁拍案叫绝。

话语是一个论坛程序，它严重依赖Ajax，但必须让谷歌包含内容。其解决方案是放弃井号结构，采用历史API。

所谓历史API是指在不刷新页面的情况下改变浏览器地址栏中显示的URL(准确的说是改变网页的当前状态)。这里有一个例子。你点击上面的按钮，开始播放音乐。然后，点击下面的链接，看看发生了什么。

地址栏的URL发生了变化，但音乐播放没有中断！

对历史API的详细介绍超出了本文的范围。简单来说，它的功能是在浏览器的History对象中添加一条记录。

window.history.pushState(状态对象、标题、URL)；上面的命令可以在地址栏中显示一个新的网址。History对象的pushState方法接受三个参数，新的URL是第三个参数，前两个参数可以为空。

window.history.pushState(null、null、new URl)；目前各大浏览器都支持这种方式：Chrome(26.0)、Firefox(20.0)、IE(10.0)、Safari(5.1)、Opera(12.1)。

以下是罗宾沃德的方法。

首先用History API替换hash结构，让每个hash都成为正常路径的URL，这样搜索引擎就会抓取到每一个网页。

然后，Example.com/1example.com/2example.com/3定义一个JavaScript函数，处理Ajax，并根据URL抓取内容(假设使用了jQuery)。

函数anchorClick(link){ var linkSplit=link . split('/')。pop()；$.get('api/' linkSplit，函数(数据){$('#content ')。html(数据)；});}然后定义鼠标点击事件。

$('#container ')。on('click '，' a '，function(e){ window . history . push state(null，null，$(this))。attr(' href ')；anchorClick($(这个)。attr(' href ')；e . PreventDefault()；});还要考虑用户点击浏览器的“前进/后退”按钮。此时，触发历史对象的popstate事件。

window . addeventlistener(' pop state '，函数(e){ anchorClick(location . pathname)；});定义了以上三个代码后，就可以显示正常路径URL和AJAX内容，而无需刷新页面。

最后，设置服务器端。

因为没有使用井号结构，所以每个网址都是不同的请求。因此，服务器需要为所有这些请求返回具有以下结构的网页，以防止404错误。

Htmlbody节id=' container '/节noscript./noscript/body/html仔细看上面的代码，你会发现有一个no script标签，这就是秘密。

我们将搜索引擎中包含的所有内容放在noscript标签中。这样，用户仍然可以在不刷新页面的情况下执行AJAX操作，但搜索引擎会记录每个页面的主要内容！