ajax 如何作到 SEO 友好

我猜你是在网络上搜索“ajax如何被搜索引擎收录”、“ajax SEO”、“ajax SEO友好”等关键词来到这里的。你可能已经很疲惫了，由于前段时间我也这样搜索，可是我发现搜索到的内容质量不高，有的只针对 google 的，有的不完整。可是，不要紧。你只要再坚持一会，就能够真正找到解决方案了。

咱们都知道当搜索引擎的蜘蛛爬行到你的站点，而后收录你站点的内容。可是蜘蛛不执行js，也就是说若是你站点的内容是经过ajax动态加载的，那么搜索引擎是不会收录到这部分的内容的。若是咱们的站点很是多的内容是经过ajax加载的，那么收录的状况将惨不忍睹。

下面将围绕我最近在完成的一个需求来说解我是如何作到ajax与SEO友好的。

这个需求是一个手机游戏的的手机官网，结构大体以下：

这个需求场景很典型，页面上大部份内容都是在用户点击 “简介” “动态” “礼包” “攻略” “开服”这几个tab后动态加载的。

接到需求的时候我相信随便一个写过ajax的前端工程师均可以很轻松的完成这个需求，当时我也是这么作的，不考虑任何SEO的问题，甚至默认显示的“简介”tab都是页面进来后才动态加载的。

可是，过了几天产品经理MM跑过来，而后：

怎么办？

将全部内容在页面载入的时候就所有查询出来？这样虽然解决了SEO问题，可是这样页面性能会下降。有没有办法两全呢？有的，用 Quickling 技术 (来自Facebook)

先看一下传统的实现方式的代码：

<nav id="tab">
    <a href="javascript:">简介</a>
    <a href="javascript:">动态</a>
    <a href="javascript:">礼包</a>
    <a href="javascript:">开服</a>
    <a href="javascript:">攻略</a>
</nav>
<div id="con"></div>
<script>
    $("#tab a").click(function(){
        //发起ajax请求
        $.ajax({
　　　　　　 url:"./introduction.html"
           success: function(html){
               //将请求回来的内容添加到下面的内容div
               $("#con").append(html);
           }
        });
    });
</script>

那么Quickling技术是怎么实现的呢？一样看一下代码：

<nav id="tab">
    <a href="./introduction.html">简介</a>
    <a href="./dynamic.html">动态</a>
    <a href="./gift.html">礼包</a>
    <a href="./service.html">开服</a>
    <a href="./strategy.html">攻略</a>
</nav>
<div id="con"></div>
<script>
    $("#tab a").click(function(){
        //发起ajax请求
        $.ajax({
           url: "./introduction.html",
           data: {key: 'ajax'}
           success: function(html){
                   //将请求回来的内容添加到下面的内容div
                   $("#con").html(html);
           }
        });
        return false; // 阻止 A 连接跳转
    });
</script>

关键代码是 return false; 这句代码能够在用户点击A连接的时候阻止A连接的默认跳转。记得咱们前面说过搜索引擎的蜘蛛是不执行js的，因此当蜘蛛爬到这个页面的时候会顺着A连接爬进对应页面，并收录对应的内容。

那么是否是意味着咱们的须要作两套页面，一个用来响应ajax请求，一个用来给蜘蛛收录？

怎么可能，后端和前端比海尔兄弟感情还好，怎么能让后端工程师多作工做呢？

以 “简介” introduction.html 这个页面为例，这里咱们假设后端是使用PHP，代码以下：

$isAjax = $_GET["key"];
$con = include 'con.php';
if($isAjax == "ajax"){
    echo $con;
}else{
    $head = include 'head.php';
    $foot = include 'head.php';
    echo $head + $con + $foot;
}
//好久没写PHP，写错了不要介意啊。

若是请求中的参数key的值是“ajax” 则只输出部份内容，不然则输出包含头部底部等完整内容。

ok！ 就这么简单你明白了吗？