History API使搜尋引擎抓取AJAX內容

最後更新：2015-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

我一直以為沒有辦法做到，直到前兩天看到了Discourse創始人之一的Robin Ward的解決方案，不禁拍案叫絕。

Discourse是一個論壇程式，嚴重依賴Ajax，但是又必須讓Google收錄內容。它的解決方案就是放棄井號結構，採用 History API。

所謂 History API，指的是不重新整理頁面的情況下，改變瀏覽器地址欄顯示的URL(準確說，是改變網頁的目前狀態)。這裡有一個例子，你點擊上方的按鈕，開始播放音樂。然後，再點擊下面的連結，看看發生了什麼事？

地址欄的URL變了，但是音樂播放沒有中斷！

History API 的詳細介紹，超出這篇文章的範圍。這裡只簡單說，它的作用就是在瀏覽器的History對象中，添加一條記錄。

　　window.history.pushState(state object, title, url);　　

上面這行命令，可以讓地址欄出現新的URL。History對象的pushState方法接受三個參數，新的URL就是第三個參數，前兩個參數都可以是null。

　　window.history.pushState(null, null, newURL); 　　

目前，各大瀏覽器都支援這個方法：Chrome（26.0+），Firefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。

下面就是Robin Ward的方法。

首先，用History API替代井號結構，讓每個井號都變成正常路徑的URL，這樣搜尋引擎就會抓取每一個網頁。

　　example.com/1

　　example.com/2

　　example.com/3　　

然後，定義一個JavaScript函數，處理Ajax部分，根據網址抓取內容（假定使用jQuery）。

　function anchorClick(link) {

　　　　var linkSplit = link.split(‘/‘).pop();

　　　　$.get(‘api/‘ + linkSplit, function(data) {

　　　　　　$(‘#content‘).html(data);

　　　　});

　　}

　　

再定義滑鼠的click事件。

　　$(‘#container‘).on(‘click‘, ‘a‘, function(e) {

　　　　window.history.pushState(null, null, $(this).attr(‘href‘));

　　　　anchorClick($(this).attr(‘href‘));

　　　　e.preventDefault();

　　});

還要考慮到使用者點擊瀏覽器的"前進 / 後退"按鈕。這時會觸發History對象的popstate事件。

　window.addEventListener(‘popstate‘, function(e) {

　　　　anchorClick(location.pathname);

　　});

　　

定義完上面三段代碼，就能在不重新整理頁面的情況下，顯示正常路徑URL和AJAX內容。

最後，設定伺服器端。

因為不使用井號結構，每個URL都是一個不同的請求。所以，要求伺服器端對所有這些請求，都返回如下結構的網頁，防止出現404錯誤。

　　 <html>

　　　　<body>

　　　　　　<section id=‘container‘></section>

　　　　　　<noscript>

　　　　　　　　... ...

　　　　　　</noscript>

　　　　</body>

　　</html>

仔細看上面這段代碼，你會發現有一個noscript標籤，這就是奧妙所在。

我們把所有要讓搜尋引擎收錄的內容，都放在noscript標籤之中。這樣的話，使用者依然可以執行AJAX操作，不用重新整理頁面，但是搜尋引擎會收錄每個網頁的主要內容！

History API使搜尋引擎抓取AJAX內容

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More