SEO原则:搜索引擎的蜘蛛只识别href的一般超链接,而不识别JavaScript代码,遇到一般超链接就会爬进去,遇到JavaScript不会爬进去。
即,搜索引擎抓不到AJAX动态加载的内容。
【一】首先看看普通的AJAX显示文章:
第一步:新建一个AJAX.ashx的一般处理程序:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AJAX
{
/// <summary>
/// AJAX 的摘要说明
/// </summary>
public class AJAX : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int id=int.Parse(context.Request["id"]);
if (id==1)
{
context.Response.Write("蓝牙,是一种支持设备短距离通信的无线电技术。能在包括移动电话、PDA、无线耳机、笔记本电脑、相关外设等众多设备之间进行无线信息交换。利用“蓝牙”技术,能够有效地简化移动通信终端设备之间的通信,也能够成功地简化设备与因特网Internet之间的通信,从而数据传输变得更加迅速高效,为无线通信拓宽道路。蓝牙采用分散式网络结构以及快跳频和短包技术,支持点对点及点对多点通信,工作在全球通用的2.4GHz ISM(即工业、科学、医学)频段。其数据速率为1Mbps。采用时分双工传输方案实现全双工传输。");
}
else if (id==2)
{
context.Response.Write("毛泽东 《中国共产党在民族战争中的地位》:“共产党员的先锋作用和模范作用是十分重要的。”巴金 《家》二六:“他不是孔教会里的重要分子吗?”");
}
else if (id==3)
{
context.Response.Write("百度百科中的词条内容仅供参考,如果您需要解决具体问题(尤其在法律、医学等领域),建议您咨询相关领域专业人士。");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
第二步:新建一个Page.html静态页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function LoadArt(id) {
$.post("AJAX.ashx", { "id": id }, function (data) {
$("#p1").text(data);
});
}
</script>
</head>
<body>
<p id="p1"></p>
<a href="javascript:void(0)" οnclick="LoadArt(1)">1</a>
<a href="javascript:void(0)" οnclick="LoadArt(2)">2</a>
<a href="javascript:void(0)" οnclick="LoadArt(3)">3</a>
</body>
</html>
结论:上面的代码
<a href="javascript:void(0)" οnclick="LoadArt(1)">1</a>
不利于SEO优化,蜘蛛不会爬进去收录AJAX页面,因为,href是JS代码。
改进版:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function LoadArt(id) {
$.post("AJAX.ashx", { "id": id }, function (data) {
$("#p1").text(data);
});
}
</script>
</head>
<body>
<p id="p1"></p>
<a href="AJAX.ashx?id=1" οnclick="LoadArt(1)">1</a>
<a href="AJAX.ashx?id=2" οnclick="LoadArt(2)">2</a>
<a href="AJAX.ashx?id=3" οnclick="LoadArt(3)">3</a>
</body>
</html>
可以看出,此时
<a href="AJAX.ashx?id=1" οnclick="LoadArt(3)">3</a>
href是个一般的超链接,蜘蛛就会爬进去。
这样就有利于SEO了。
但是,这样的话,点击标题,会弹出一个新页面,添加:return false;即可
最后改进版本:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function LoadArt(id) {
$.post("AJAX.ashx", { "id": id }, function (data) {
$("#p1").text(data);
});
}
</script>
</head>
<body>
<p id="p1"></p>
<a href="AJAX.ashx?id=1" οnclick="LoadArt(1);return false;">1</a>
<a href="AJAX.ashx?id=1" οnclick="LoadArt(2);return false;">2</a>
<a href="AJAX.ashx?id=1" οnclick="LoadArt(3);return false;">3</a>
</body>
</html>