怎样使AJAX有利于SEO：为使用JS和AJAX动态加载的内容制定href

最新推荐文章于 2021-08-06 12:19:26 发布

zhanzkw

最新推荐文章于 2021-08-06 12:19:26 发布

阅读量6.3k

点赞数 1

分类专栏： AJAX 文章标签： ajax javascript function xhtml 搜索引擎 html

本文链接：https://blog.csdn.net/studyalllife/article/details/6912935

版权

AJAX 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

结论：为使用JS和AJAX动态加载的内容制定href,有利于SEO

很多网站都用的是这个技术，即实现了使用JS和AJAX，也可以让搜索引擎抓到动态加载的内容。

zhanzkw

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
怎样使AJAX有利于SEO：为使用JS和AJAX动态加载的内容制定href

SEO原则：搜索引擎的蜘蛛只识别href的一般超链接，而不识别JavaScript代码，遇到一般超链接就会爬进去，遇到JavaScript不会爬进去。即，搜索引擎抓不到AJAX动态加载的内容。【一】首先看看普通的AJAX显示文章：第一步：新建一个AJAX.ashx的一般处理程序：using System;using System.Collections.Generic;
复制链接

扫一扫