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

　　越来越多的网站开始采用“单页应用程序”.

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

　　此方法的优点是它具有良好的用户体验并节省了流量. 缺点是搜索引擎无法抓取AJAX内容. 例如，您有一个网站.

　　http://example.com

　　用户可以通过哈希结构的URL查看不同的内容.

　　http://example.com#1

　　http://example.com#2

　　http://example.com#3

　　但是，搜索引擎只能抓取并忽略哈希符号，因此无法为内容建立索引.

　　为了解决此问题，Google提出了“哈希+感叹号”结构.

　　http://example.com#!1

　　Google找到上述网址后，将自动抓取另一个网址:

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

　　只要您将AJAX内容放在此URL上，Google就会将其收录在内. 但是问题在于“哈希+感叹号”非常丑陋和繁琐. Twitter曾经使用这种结构，它放了

　　http://twitter.com/ruanyf

　　更改为

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

　　结果，用户反复抱怨，废除它只用了半年时间.

　　那么，有什么方法可以使搜索引擎在保持更直观的URL的同时抓取AJAX内容吗？

　　我一直以为没有办法，直到两天前我看到Discourse的创始人之一罗宾·沃德（Robin Ward）的解决方案之前，我忍不住尖叫.

　　话语是一个非常依赖Ajax的论坛程序，但必须收录在Google中. 解决方案是放弃哈希结构并使用History API.

　　所谓的历史记录API是指更改浏览器地址栏中显示的URL（准确地说，就是更改网页的当前状态），而不刷新页面. 这是一个示例，您单击上面的按钮开始播放音乐. 然后，单击下面的链接以查看发生了什么事？

　　地址栏中的URL已更改，但音乐播放不会中断！

　　History API的详细介绍超出了本文的范围. 简单地说，它的作用是向浏览器的“历史记录”对象添加一条记录.

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

　　上面的命令行可以使新URL出现在地址栏中. History对象的pushState方法接受三个参数，新的URL是第三个参数，而前两个参数可以为null.

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

　　当前，所有主流浏览器都支持此方法: Chrome（26.0 +），Firefox（20.0 +），IE（10.0 +），Safari（5.1 +），Opera（12.1 +）.

　　以下是罗宾·沃德的方法.

　　首先，将Hash结构替换为History API，以使每个哈希符号成为常规路径的URL，以便搜索引擎将对每个网页进行爬网.

　　example.com/1

　　example.com/2

　　example.com/3

　　然后定义一个JavaScript函数来处理Ajax部分并根据URL获取内容（假设使用jQuery）.

　　function anchorClick(link) {

　　　　var linkSplit = link.split('/').pop();

　　　　$.get('api/' + linkSplit, function(data) {

　　　　　　$('#content').html(data);

　　　　});

　　}

　　再次定义鼠标单击事件.

　　$('#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错误.