让搜索引擎抓取AJAX内容

越来越多的网站，开始采用单页面结构（Single-page application），称单页应用。

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

这种做法的好处是用户体验好、节省流量，缺点是AJAX内容无法被搜索引擎抓取。

Jquery Mobile是一个移动网页开发框架，可以很方便地使用无刷新切换页面，它采用的就是 History API。

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

回复 @[不中断音乐切换页面链接][1]

History API 的作用就是在浏览器的History对象中，添加一条记录

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

复制代码

目前，各大浏览器都支持这个方法：Chrome（26.0+），Firefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。

例子

首先建3个页面，这是让搜索引擎抓取的页面，要保证页面里面有让搜索引擎抓取的内容。

回复 @example.com/1.html
example.com/2.html
example.com/3.html

然后，定义一个JavaScript函数，处理Ajax部分，根据网址抓取对应内容。

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

复制代码

再定义鼠标的click事件，让页面模拟跳转到example.com/1.html, example.com/2.html, example.com/3.html。

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

复制代码

最后还要考虑到用户点击浏览器的"前进 / 后退"按钮。这时会触发History对象的popstate事件。

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

复制代码

文章来源：zhile.name