越来越多的网站，开始采用"单页面结构"（Single-page application）。
整个网站只有一张网页，采用Ajax技术，根据用户的输入，加载不同的内容。
这种做法的好处是用户体验好、节省流量，缺点是AJAX内容无法被搜索引擎抓取。举例来说，你有一个网站。
http://example.com
用户通过井号结构的URL，看到不同的内容。
http://example.com#1 http://example.com#2 http://example.com#3
但是，搜索引擎只抓取example.com，不会理会井号，因此也就无法索引内容。
为了解决这个问题，Google提出了"井号+感叹号"的结构。
http://example.com#!1
当Google发现上面这样的URL，就自动抓取另一个网址：
http://example.com/?_escaped_fragment_=1
只要你把AJAX内容放在这个网址，Google就会收录。但是问题是，"井号+感叹号"非常难看且烦琐。Twitter曾经采用这种结构，它把
http://twitter.com/ruanyf
改成
http://twitter.com/#!/ruanyf
结果用户抱怨连连，只用了半年就废除了。
那么，有没有什么方法，可以在保持比较直观的URL的同时，还让搜索引擎能够抓取AJAX内容？
我一直以为没有办法做到，直到前两天看到了Discourse创始人之一的Robin Ward的解决方法，不禁拍案叫绝。
Discourse是一个论坛程序，严重依赖Ajax，但是又必须让Google收录内容。它的解决方法就是放弃井号结构，采用 History API。
所谓 History API，指的是不刷新页面的情况下，改变浏览器地址栏显示的URL(准确说，是改变网页的当前状态)。这里有一个例子，你点击上方的按钮，开始播放音乐。然后，再点击下面的链接，看看发生了什么事？
地址栏的URL变了，但是音乐播放没有中断！
History API 的详细介绍，超出这篇文章的范围。这里只简单说，它的作用就是在浏览器的History对象中，添加一条记录。
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+）。
下面就是Robin Ward的方法。
首先，用History API替代井号结构，让每个井号都变成正常路径的URL，这样搜索引擎就会抓取每一个网页。
example.com/1 example.com/2 example.com/3
然后，定义一个JavaScript函数，处理Ajax部分，根据网址抓取内容（假定使用jQuery）。
function anchorClick(link) { var linkSplit = link.split('/').pop(); $.get('api/' + linkSplit, function(data) { $('#content').html(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操作，不用刷新页面，但是搜索引擎会收录每个网页的主要内容！
===================================
[通知]
接下来三周，我外出旅行，暂停更新网志。
大家可以从 http://www.ruanyifeng.com/tweets/，了解我的行程。欢迎关注。
（完）
artwl 说：
非常棒，只是不知道IE7~9有没有什么方案
2013年7月16日 12:56 | # | 引用
Gaubee 说：
这IE7~9只能直接跳转页面了，但能保证页面正常显示而已……我觉得既然已经可以被SEO抓取到，那么完全可以两套方案一起上。IE6+不支持History API的可以直接用Hash搞。
2013年7月16日 13:17 | # | 引用
tom 说：
之前做过类似的东西. 每个link都是真正完整的url, 你直接在新窗口打开url的时候, 是看到完整的跟url对应的页面的. 但是如果用户点击这个link, 事件会被javascript截获, ajax去load内容然后加载.
好处就是所有的浏览器都可以支持.
坏处就是内容变了url没有更新.
2013年7月16日 14:58 | # | 引用
riophae 说：
搜索引擎并没有解析 JavaScript 啊. 我觉得搜索引擎的未来是完全收录 JavaScript 生成的内容.
2013年7月16日 19:41 | # | 引用
奶牛 说：
这个方法真的非常赞，就是得多套方案来保证兼容性哇~~~
2013年7月16日 22:27 | # | 引用
墨水 说：
很赞的说，同LS所说，兼容性要考虑~~
2013年7月16日 23:45 | # | 引用
Jak Wings 说：
不错，这样就不怕影响到文章内容中的标题或脚注的 anchor 了。祝旅途愉快～
准备给自己的博客改装！
2013年7月17日 00:04 | # | 引用
dcxy0 说：
非常不错，学习一下。有时候也在思考这个问题，看到这个的确眼前一亮啊。
2013年7月17日 01:43 | # | 引用
Aminby 说：
又学到新知识了。谢谢。旅途愉快
2013年7月17日 09:33 | # | 引用
AB_AAB 说：
订阅阮大哥日志真是百利无害啊，越来越喜欢。每篇新文章都会认真读，受益匪浅。
有时间会读一下算法相关的文章。
2013年7月17日 10:05 | # | 引用
weedge 说：
网易的云音乐不知道是不是这么弄的呢？？？
2013年7月17日 10:09 | # | 引用
山荣 说：
url改变后，再刷新貌似就会出问题吧。请求就丢了
2013年7月17日 11:52 | # | 引用
熊猫 说：
设置服务器端是必要的么？是不是只设置window.history.pushState(state object, title, url);搜索引擎就会收录地址栏中变换的地址对应的内容？
2013年7月17日 17:22 | # | 引用
啊啊啊啊 说：
网易的云音乐用的是iframe
2013年7月17日 18:05 | # | 引用
Jak Wings 说：
服务器端必需保持原来的设置，不是单靠 API 就能搞定的，即是说人们还是可以直接通过访问 URL 且不需要开启 Javascript 就能获得页面内容。然后再给页面内的链接添加点击事件来在当前页面动态载入其它内容，顺便用 API 改变地址栏 URL 和修改访问记录。
2013年7月18日 04:35 | # | 引用
dyllen 说：
我看了一遍，没怎么看明白啊！可能是因为我不懂seo吧！
2013年7月18日 11:37 | # | 引用
Du 说：
很赞啊，移动上webapp和原生app相比，体验的很关键一点是流畅，无刷新在手机的浏览器里体验很流畅，再配合响应式设计，web又能跨平台，容易更新维护，以后浏览器的升级，兼容性更好的话，web似乎更值得做
另祝旅途愉快
2013年7月18日 13:15 | # | 引用
holyzfy 说：
2013年7月18日 15:39 | # | 引用
imlgsh 说：
土耳其，土耳其，回来谈谈旅行的感受
2013年7月18日 19:48 | # | 引用
依云 说：
github、bitbucket 和现在的 twitter 都是这样做的。我也曾做过这种东西。
还记得从火狐 3.6 迁移到火狐 4 时，发现 github 上点链接不会整个页面刷新了呢。
不过有个小问题：火狐和 Chrome 不一样，有一个在页面加载时就触发 popstate 事件，另一个没有。
2013年7月19日 13:28 | # | 引用
wang 说：
iframe的
2013年7月20日 17:07 | # | 引用
wang 说：
其实文章要说的和标题有些偏。
标题， 如何让搜索引擎抓取ajax内容。
文章， 如何拦截掉a标签的链接跳转， ajax load内容， 同时改变url。
2013年7月20日 17:08 | # | 引用
wang 说：
ajax load部分内容不改变url被认为是友好体验。 但是load 网页大部分内容又不改变url， 这样用户无法复制分享传播当前所见内容的url
2013年7月20日 17:10 | # | 引用
whiletrue 说：
这个不是rooter的概念吗，把网站设计为restfull风格就是了
2013年7月21日 10:00 | # | 引用
袁源 说：
这个方法弱爆了啊 onclick 可以 preventDefualt 的，所以想怎么来就怎么来么么
2013年7月21日 10:20 | # | 引用
照常生活 说：
想问一下，我在多看阅读购买了《黑客与画家》，您能收到稿酬吗？
2013年7月23日 08:40 | # | 引用
阮一峰 说：
不能。译者没有版税，只有一次性的翻译费。
2013年7月23日 10:39 | # | 引用
gd 说：
国外好多都在用了
问题是pushState 在国内ie6-9的年代 完全不适用
2013年7月23日 11:56 | # | 引用
红色石头 说：
愚见：pjax似乎也可以做这个功能~
2013年7月26日 12:32 | # | 引用
elarity 说：
我也不解。。 。。。
2013年7月26日 18:24 | # | 引用
s 说：
IE 8 and 9: hashchange event...
IE 6 and 7: I've no idea but just do what links should do...
2013年7月30日 13:51 | # | 引用
Chon 说：
很早github就已经使用这个方法了
2013年8月 4日 20:53 | # | 引用
rongmic 说：
pjax就是pushState+ajax
2013年8月 5日 14:40 | # | 引用
Net's H 说：
/#!/方法对于不支持hashchange的浏览器怎么办呢。
2013年8月 8日 21:28 | # | 引用
erji 说：
转的那篇文章之前看过 需要server权限pass
当时正写了个ajax全站shop http://goo.gl/LPuII
2013年8月10日 10:40 | # | 引用
革命的小蘑菇医生 说：
阮先生您好，我是一位重症医学科的医生，大概6年前无意间看到您的博客，觉得非常好，就一直追着看。一眨眼，看了6年了，感觉时间过得好长，也感觉您的博客的内容越来越高深了，逐渐看不懂了。衷心祝愿您在取得更大的成就的同时，务必注意身体健康！！！即使看不懂，也还要追着看。哈哈。
2013年8月11日 21:27 | # | 引用
IT菜鸟 说：
一峰，虽然你不认识我，但是我关注你很久了。
你翻译的书黑客与画家还有软件随想录，翻译的特别棒
我也很赞成你收费文章的想法，我也愿意为你的文章付费。
知识是无价之宝。每次读你的文章犹如醍醐灌顶。
朋友加油！有一批认同你的粉丝。坚持对的。
2013年8月14日 07:59 | # | 引用
Edwin 说：
感谢你的分享，History API是一个很不错的解决方案啊。。。。
2013年8月23日 18:20 | # | 引用
Evan 说：
用this.href比用$(this).attr('href')更高效
2013年8月25日 22:00 | # | 引用
.... 说：
你没看明白 用history api url是会变的
2013年9月 5日 13:56 | # | 引用
Meteoric_cry 说：
github.com 就是用这种机制实现的
2013年9月 9日 17:28 | # | 引用
sp42 说：
History API很拍案叫绝么？
2013年9月13日 01:13 | # | 引用
Lukas 说：
如果服务器对这些请求返回的是这样的结构，那我刷新不是没用了？
按我的理解，应该是如果只是异步操作，那么使用ajax改变内容，同时改变url。
但如果直接访问该url(改变后的url)，那么服务器不是应该返回完整的相同页面么？为什么返回文中所示的结构？？
2013年9月15日 23:34 | # | 引用
小欧 说：
很不错的文章，只可惜这个技术目前只能支持高版本的浏览器，如果能兼容低版本浏览器就完美了。
2013年10月10日 20:30 | # | 引用
Jak Wings 说：
页面可以是直接访问的，载入后可通过 JS 动态生成更多内容，或者在不需要 JS 的情况下也有内容。阮先生指的大概是几乎完全用 JS 根据 URL 动态加载内容吧。
结构相同是为了方便在更新内容的同时不引起「闪烁」效果。
2013年11月 2日 00:31 | # | 引用
Jak Wings 说：
两者获取方式有差异，后者是取 DOM 属性的字面值，前者会自动转换为完整 URL 。
2013年11月 2日 00:33 | # | 引用
newsky8 说：
也就是将url当作一个变量，js的window.history.pushState也可以实现这个功能，个人愚见，欢迎探讨
2014年2月26日 18:04 | # | 引用
张文 说：
js的window.history.pushState是干啥的？
2014年6月16日 09:16 | # | 引用
nonjene 说：
window.history.pushState 的作用就是更新URL
2014年7月 7日 15:14 | # | 引用
行陌路 说：
网易云音乐用的iframe,后退音乐会从头开始。。。
2014年9月28日 22:29 | # | 引用
OsBelief 说：
最后对服务器端的设置不是很理解，是不是在服务器端判断是不是Ajax请求，如果是的话，只发送当前分页的内容，如果不是的话，就发送整个HTML文档，这样的话，对于每一个分页，都要准备两份HTML文档，一份只是该分页的内容，一份是包含该分页的整个HTML文档，不知道这样想对不对？
2014年11月 5日 16:21 | # | 引用
ChieveiT 说：
分享的demo很不错，建议大家想确切了解还是看demo比较好。
个人认为文章的重点有点乱，看着看着发现搜索引擎抓取和修改地址栏似乎成了一回事，评论也有人指出了这一点，不过我觉得真要说清这个问题，从后台的url接口切入会好很多，注意这两个url：
for ajax——http://inserthtml.com/demo/history/pages/page-1.html
for 地址栏——http://inserthtml.com/demo/history/page-1.html
说到底，这篇文章就介绍了这样一种技巧，ajax请求http://inserthtml.com/demo/history/pages/page-1.html后，把地址栏的url改为http://inserthtml.com/demo/history/page-1.html。
好了那么问题来了（心中默念：挖掘机哪家强）。
如果地址栏的url跟实际请求的url不一致，那么在当前页面刷新一下会发生什么？
这才是问题的关键，神马修改地址栏事小，后台能否提供一致的内容接口事大，形象地说，就是改了你得负责。开发者不能期望每个用户都从某一启动页访问这个web应用，然后通过一系列异步跳转到当前的内容页，对于用户来说，不论在什么情况下，在地址栏输入一个url就应该看到一个完整的页面。
demo展示了这一点，刷新一下，发现还是一致的页面内容，说明后台的确提供了http://inserthtml.com/demo/history/page-1.html这个页面，改出来的url不是随意糊弄的，而是确有其事，文章没说清这个问题，更把这个url换成了是一个防止404敷衍搜索引擎的奇怪页面，个人感觉是偏离这个技巧初衷的。
2014年11月29日 15:39 | # | 引用
水中月镜中花 说：
我现在做的好多项目（html5移动端项目）基本上都是一个页面，然后通过pushSate和监听popstate事件来控制页面的跳转，这个真的太有用了
2014年12月11日 22:22 | # | 引用
bumfod 说：
但是如果我要引用這個頁面的 url 呢？得到的結果只是入口頁的。hash 就是為了兼容歷史紀錄和收藏夾的。
2014年12月12日 20:30 | # | 引用
Bible 说：
如果是單純一個頁面, 2/3 是用ajax加載, 那麼 google 會 cache 到那部份動態產生的內容嗎? 我查 facebook 的頁面幾乎都是動態, 但 google 有 cache耶
2014年12月26日 04:41 | # | 引用
莫六名 说：
使用的Ajax技术架构网站，用户体验好、节省流量，但Ajax内容真的能被搜索引擎抓取吗？谷歌好像可以，但百度真的也能抓取Ajax下的内容吗？如何在SEO优化中规避Ajax带来的影响呢？如何让百度抓取Ajax内容并能给网站赋予一定的权重呢？
2015年1月16日 16:22 | # | 引用
mayy77 说：
noscript 标签中放搜索的内容，具体的可以放什么呢？关键词、链接地址？这样搜索引擎就能收录了吗？是不是每次ajax请求，noscript的内容都要重新设置搜索内容的？
2015年1月24日 12:01 | # | 引用
全栈笔记 说：
写得不错，感谢分享
2015年3月17日 10:45 | # | 引用
nan a 说：
同样不明白noscript要放啥
2015年4月27日 13:23 | # | 引用
move on 说：
@ChieveiT：
赞一个
携程移动端就是用的history Api
2015年5月 6日 11:00 | # | 引用
怠惰之熊 说：
我记得angularJS的router就是用HistoryAPI+Hashchange来实现的，支持HistoryAPI的就用，不支持的自动退回Hashchange。
2015年6月 8日 15:14 | # | 引用
jk2K 说：
监听浏览器后退的代码需要更新了
window.addEventListener('popstate', function(e) {
anchorClick(location.href);
});
在Google Chrome 版本 43.0.2357.130 (64-bit)下验证通过
2015年7月 3日 17:01 | # | 引用
chris 说：
学到了，很有用，谢谢
然而这个办法对百度搜索来说还是没用的对吧？
2015年8月 3日 13:55 | # | 引用
Hehoo 说：
最后一段确实没怎么理解。希望能详细解释。 按照demo后台是需要准备好两种不同url的内容，一个是ajax提交的，一个是直接浏览器地址提交的。
2015年8月 5日 18:04 | # | 引用
大牛哦 说：
我的做法是服务器该怎样就怎样
在前端,改变url的同时,不会去请求该url的内容,而是去请求一部分数据而已
一句话说,就是做原来的事,仅仅准备一份内容给蜘蛛爬
2015年10月 6日 17:24 | # | 引用
cherryWu 说：
pushState不会触发hashchange时间吗?
2016年7月22日 15:19 | # | 引用
FN 说：
Note that pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.
2016年7月29日 11:56 | # | 引用
Rain 说：
感谢分享！正好需要这方面的知识
2017年2月23日 14:36 | # | 引用
nick 说：
网站注释其实也和noscript标签差不多，因为注释内容在源代码中也不会影响页面内容，所以很多人会在注释里面堆砌关键词，认为注释信息会参与到网页的索引和排名，这一点谷歌也是可以识别注释信息忽略掉的。百度工程师也指出，在Html中的注释内容，会在正文提取环节直接忽略,但虽然注释的代码不会被抓取，也会造成代码冗杂的情况，所以能少则少吧。
2017年3月 5日 23:50 | # | 引用
业余草 说：
现在的 RESTful 可以更友好的被搜索引擎抓取！
2017年3月20日 15:50 | # | 引用
Kevin 说：
http://inserthtml.com/demo/history/
按这种实现方法，有一个问题：
content中每次显示的数据岂不是需要做两份拷贝。
一个用于加载内容数据，另一个用于url改变后，刷新当前页面。
2017年8月10日 17:53 | # | 引用
Lana 说：
阮老师好, 接近5年后才看到这篇文章, 不过五年前我还在上初中...肯定不能看的.
在阅读的过程中我产生了一点疑问: 这种解决方案听上去不错, 但是实际上是不是让浏览器生成更加好看的URL+后台产生独立的专门的用于搜索引擎收录的html页面?
这种方式虽然能解决搜索引擎的问题, 但是如果使用浏览器的收藏夹功能收藏网址再打开那显示的不就是提供给搜索引擎的、没有css的页面么?
刚开始学习这个.有很多不懂的地方,阮老师有空的话能不能帮忙解答下...谢谢啦
2018年5月12日 11:15 | # | 引用
bjun 说：
2021了，头铁的人来了，vue router history + noscript 写的博客网站 《B君笔记》。不要问我为啥不用vue的SSR，我就是看了这文章要来是试一下。
1.评论区里面很多讨论pushState改不改url,，有什么用。这个问题在原文里面已经写明白了，“每个URL都是一个不同的请求。所以，要求服务器端对所有这些请求，都返回如下结构的网页，防止出现404错误”。
2.有人问noscript里面放什么。 标签内就是上文jQuery请求后$('#content').html(data);的data。
3.服务端除了返回的结构noscript内容，其实还要在head给title、descriptiond等内容喂给搜索引擎。
4.可能真如nick所说的注释其实也和noscript标签差不多，在bing的链接检查中，noscript的h1标签是被忽略的。
2021年10月 4日 16:44 | # | 引用