您的位置：首页 > 其它

ajax，SEO，谁言鱼和熊掌不可兼得

2016-03-09 15:04 459 查看

随着用户体验的深入人心，越来越多的系统采取了单页面结构（SPA），不可不说，单页面系统体验好，耗费流量少，无需全局刷新。不过对搜索引擎却不能抓取到太多信息，对SEO不是很友好，举例来说
搜索引擎只能获取
www.demo.com/index.html这个页面的内容，
但是无法获取
www..demo.com/index.html#user
www..demo.com/index.html#detail

等页面的内容，因为搜索引擎是不会管#后面的内容，这样就造成了数据丢失，不利于网站排名,
那么有没有一个方法可以更改url地址，同时兼顾ajax获取页面呢？

借助html5新的API pushState可以很好的解决这个问题
我们看一个代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>

<div id="container">

</div>

</body>
<script>
var ul = document.querySelector('#nav'),
container = document.querySelector('#container');

//设置页面内容方法
var setContainer = function (url) {
//ajax请求页面template
container.innerHTML = 'ajax返回的页面' + url;

};
ul.addEventListener('click', function (e) {
var target = e.target;
if (target.nodeName !== 'A') {
return;
}
var url = target.hash.replace('#', '');
history.pushState(url, null, url); // 当A标签触发点击时，改变浏览器url
setContainer(url);
e.preventDefault();
e.stopPropagation();
});

//当用户使用前进/后退按钮时候
window.addEventListener('popstate', function (e) {
setContainer(e.state);
});

</script>
</html>

通过pushState方法，我们可以在不刷新页面的情况改变地址栏url，在改变的同时，我们在ajax获取数据，填充到面板上，这样，每一个页面都会有一个url地址，这样就可以被搜索引擎所搜索到了。
因为不适用#结构，所以每一个url都是一个请求，那么，在服务端我们需要设置这些请求返回的都是这样的页面才行

<html>

<body>
<ul id="nav">
<li><a href="#user">user</a></li>
<li><a href="#detail">detail</a></li>
</ul>

<div id="container">

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航