鱼和熊掌兼得--既实现AJAX又实现SEO

前端之家收集整理的这篇文章主要介绍了鱼和熊掌兼得--既实现AJAX又实现SEO前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最近公司忙于年会 忙里偷闲 研究了一下网站的SEO

研究了几天 我总结了一下几点:

1. 蜘蛛只能抓取a标签中的href(<a href="Default.aspx">测试</a>)


最好后面不要带参数(<a href="Default.aspx?id=1">测试</a>) 如果带上参数 蜘蛛不会有限考虑的


这样的话 就需要用到URL重写了
URL重写 详解

2. 蜘蛛不会执行JavaScript 换句话说 如果在a标签中使用了onclick 蜘蛛是不会抓到的

3. 蜘蛛只能抓到get请求的页面 不会抓到post请求的页面

4. 我们希望网页的前台页面全部被蜘蛛抓到 但是不希望后台页面被蜘蛛抓到 蜘蛛可没有那么只能 知道你的网

站哪个是前台页面 哪个是后台页面

这里就需要创建一个名为 “robots.txt” (注意robots.txt是一个协议 不是命令 一般最好要遵守的)

robots.txt是搜索引擎搜索该网站时的第一个文件



下面说这篇文章的重点
在第2点中 我说道蜘蛛不会执行JavaScript 那么是不是就说只要使用了AJAX效果就不会被蜘蛛抓到呢? 答案是否定的 浅谈Ajax

我们先来看一下 一个使用AJAX的demo

<head runat="server">
<title>测试</title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function fun(id) {
$.post("Ajax.ashx",{ "id": id },function(data) {
$("#p1").text(data);
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p id="p1">
</p>
<a href="javascript:void(0)" onclick="fun(1);return false;">1</a>
<a href="javascript:void(0)" onclick="fun(2);return false;">2</a>
<a href="javascript:void(0)" onclick="fun(3);return false;">3</a>
</div>
</form>
</body>


在上面的a标签中 href属性是"javascript:void(0)" 蜘蛛是不会执行js脚本的 所以这三个页面 是一个都抓不到的


有这样一个解决方案 既实现了AJAX 又能被蜘蛛所抓到 来看下面的demo


<head runat="server">
<title>测试</title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function fun(id) {
$.post("Ajax.ashx",function(data) {
$("#p1").text(data);
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p id="p1">
</p>
<a href="Ajax.ashx?id=1" onclick="fun(1);return false;">1</a>
<a href="Ajax.ashx?id=2" onclick="fun(2);return false;">2</a>
<a href="Ajax.ashx?id=3" onclick="fun(3);return false;">3</a>

</div>
</form>
</body>

来说明一下
1. 在a标签的href属性中 我改成了 Ajax.ashx?id=1 有人问了 不是带有参数也不利于SEO么 应该重写URL的 没错 但是有一点 重写URL只适用于apsx页面 应为只有aspx页面具有页面生命周期 适用ajax的时候 最好适用一般处理程序 也就是ashx页面 ashx没有页面生命周期 也就不能重写URL了

2. 在onclick属性后面添加了一个return false; 这样做的目的是告诉他 不要执行href属性里面的内容了 其实href里面的属性 就没有执行 href里面的属性就是为了让蜘蛛看 让蜘蛛能抓到页面





以上是我个人的理解 有不对的地方 还请您批评 万分感谢!!!!
原文链接:https://www.f2er.com/ajax/166800.html

猜你在找的Ajax相关文章