注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@fc_lamp

关注Web应用解决方案MySql/PHP/Python一盏名为"飞川"的灯~

 
 
 

日志

 
 

使用AJAX后,如何让当前URL呈现在地址上(让AJAX对搜索引擎更友好) SEO  

2013-09-06 12:07:49|  分类: Web技术-Js/Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


一说明:
    在当今互联网上,越来越多的WEB开发者使用AJAX技术来提升用户体验度。不过,这让对SEO较高的网站却不太好(或者对于用户来说,他们也无法真正知道你的请求网址)。因为,搜索引擎一般是无法直接获取AJAX请求后的数据的。那么在使用AJAX技术后,如何有利于搜索引擎收录呐?或者说如何让用户更容易分享你的网站地址呐?

二 使用 JavaScript History API 技术(此为HTML5的内容,IE 浏览器支持不太好)。
     更多关于History API的信息参考:http://html5doctor.com/history-api/

三 一个小例子(例子中使用到了JQUERY):
     1)  test.html
          


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<script src="/static/js/jquery-1.7.2.min.js"></script>
</head>
<body>

<div>

<ul>
<li><a href="/test/test.html/1" class="go">一</a></li>
<li><a href="/test/test.html/2" class="go">二</a></li>
</ul>
</div>
<script>
$(function(){

$('.go').on('click',function(e){

history.pushState(null,null,$(this).attr('href'));

return e.preventDefault();//阻止默认行为

})
})
</script>

</body>
</html>

当我们点击时,浏览器地址栏也跟着变化了。


使用AJAX后,如何让当前URL呈现在地址上(让AJAX对搜索引擎更友好) - fc_lamp - @fc_lamp

2) 现在,我们来使用AJAX技术来获取实际点的内容。
    test.html
   


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">

<script src=".chengdu.cn/static/js/jquery-1.7.2.min.js"></script>


</head>

<body>

<div>

<ul>
<li><a href="/test/test1.html" class="go">一</a></li>
<li><a href="/test/test2.html" class="go">二</a></li>
</ul>
<p id="content">
<!-- 这里是内容-->

</p>


</div>
<script>
$(function(){

function getData(url){
$.get(url,function(data){

$('#content').html(data);

});
}




$('.go').on('click',function(e){

history.pushState(null,null,$(this).attr('href'));

getData($(this).attr('href'));

return e.preventDefault();//阻止默认行为

})
})
</script>

</body>
</html>

test1.html


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>

<body>

<div>

这里是Test1的内容

</div>

<body>
</html>

test2.html


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>

<body>

<div>

这里是Test2的内容

</div>

<body>
</html>


我们可以看到点击时,浏览器地址栏变化了,然后整个页面是无刷新的。
   
使用AJAX后,如何让当前URL呈现在地址上(让AJAX对搜索引擎更友好) - fc_lamp - @fc_lamp
注:1)IE 浏览器支持不太好。2) 更多demo:  http://inserthtml.com/demo/history/page-1.html
        另一个例子:
http://inserthtml.com/demo/history/index.html
核心代码:
$(document).ready(function() {

function anchorClick(link) {

var linkSplit = link.split('/').pop();

$.get('/demo/history/pages/' + linkSplit, function(data) {
$('#content').html(data);
});

}

$('#container').on('click', 'a', function(e) {

window.history.pushState(null, null, $(this).attr('href'));

anchorClick($(this).attr('href'));

e.preventDefault();

});

window.addEventListener('popstate', function(e) {

anchorClick(location.pathname);

});


var play = false;

$('.play').click(function() {

if(play == false) {

$('#music')[0].play();
play = true;
$('.play .plbtn').hide();
$('.play .pabtn').show();

} else {

$('#music')[0].pause();
play = false;
$('.play .plbtn').show();
$('.play .pabtn').hide();

}
});

});




 









 
  评论这张
 
阅读(347)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017