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

自媒体 投稿&转载 1382浏览

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

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

推荐阅读

黑帽SEO3种最有效的优化方法是什么

在SEO行业唯一没有完整教程的就是黑帽技术了,最近写了几篇关于黑帽的文章,很多朋友对此都还比较感兴趣,因为之前没有完整的介绍过,基本上都是一笔带过,所以晋州网这次专门写这篇文章揭开大家心中的疑惑满足各位的好奇心。 搜索引擎对于黑帽SEO虽然是一而再再......

SEO重复内容与采集站会被惩罚吗

重复内容是SEO行业一直关注的问题,重复内容到底会不会被搜索引擎惩罚,这是一个被经常讨论的话题,百度最近对内容采集站点进行大批量的降权,但仍有很朋友发现自己的文章被转载,排名依然比自己的原创高,那么互联网上这么多的重复内容,百度是如何对待的呢? 1、......

结构化数据对SEO有什么影响

您一直在创建优秀的内容,优化网页,并建立链接。您以为您已经涵盖了所有的SEO优化基础,但是现在您听到了一些关于SEO优化的其他信息:结构化数据。 SEO优化不断发展,近年来最大的变化之一是丰富搜索结果的增加。在谷歌的早期,搜索引擎结果页面( SERP......