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