SEO和体验并重的超链接设计

如果你要了解PJAX,请看:
AJAX + window.history.pushState/onpopstate (需要HTML5支持)
https://github.com/defunkt/jquery-pjax

我下面说的是锚点链接(书签链接)这个方案:
AJAX + window.location.hash/onhashchange (兼容IE8)

拿首页分页链接来说:

<a href="https://my.oschina.net/index.php?page=3" onclick="page(3);return false;">3</a>

搜索引擎的爬虫会根据href访问/index.php?page=3获取第3页数据,利于SEO.
用户在浏览器里右键选择"在新标签页中打开"也能正常访问到/index.php?page=3.
如果用户在页面直接点击链接,则触发click事件,
由JS通过AJAX加载并渲染局部数据,
以及设置location.hash为/index.php#/page/3.

location.hash = "#/page/3";

浏览器能够自行记住location.hash历史记录,
我们只需监听location.hash改变的事件hashchange(支持IE8,不支持IE7/6)
就能实现用户点击浏览器返回按钮时重新加载页面的效果.

1$(window).on("hashchange", function(){
2	alert(location.hash); //假如输出#/page/2
3	var arr = location.hash.split("/"); // ["#", "page", "2"]
4	switch(arr[1]) {
5		cace "page":
6			ajax_page(arr[2]); //AJAX局部加载第2页数据
7			//location.href = "/index.php?page="+arr[2]+"&"+new Date().getTime(); //直接访问第2页
8			break;
9		case "post":
10			ajax_post(arr[2]); //post.php?id=1024&ajax=1478791719965
11			break;
12	}
13});

分页:
index.php?page=3
index.php#/page/3
ajax_page(3); //index.php?page=3&ajax=1478791719965
文章页:
post.php?id=1024
post.php#/id/1024
ajax_post(1024); //post.php?id=1024&ajax=1478791719965
URI中带有参数ajax的请求,PHP返回JSON数据:

{"title":"标题","main":"<div id=\"main\">正文(JS统计需要放这里)<\/div>"}

参数ajax的内容是时间戳,避免浏览器使用缓存.
可以考虑把参数ajax的内容设为"年月日时分"的组合,让数据在浏览器缓存1分钟.
2016-08-01 08:06:00
2016-08-01 08:07:00
像PJAX一样,ajax_page是用户点击触发的,所以并不需要获取keywords那些SEO的东西,只需更新标题和内容即可.

1<title>标题</title>
2<div id="main">正文(JS统计需要放这里)</div>
3document.title = data["title"];
4$("#main").html(data["main"]);