ajax怎麼做到seo友好

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