自动外链工具 在线排版工具 搜索引擎提交入口 wordpress主题推荐 批量打开网址工具 【老域名购买】 思享SEO导航 【网站合作】

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

402

随着用户体验的深入人心,越来越多的系统采取了单页面结构(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>

---------------------

作者:菲尔不坏

来源:CSDN

原文:https://blog.csdn.net/ft6302244/article/details/50826683

版权声明:本文为博主原创文章,转载请附上博文链接!

来源:本文由思享SEO博客原创撰写,欢迎分享本文,转载请保留出处和链接!
seo培训评论广告

抢沙发

昵称*

邮箱*

网址