jax 如何做到 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！ 就這麼簡單你明白了嗎？