如何優化單頁面網站搜尋引擎?

　　當Google和其他搜尋引擎索引網站的時候，他們並不執行JavaScript，這似乎是在向單頁網站靠攏，其中許多單頁網站都依靠JavaScript——與傳統網站相比存在明顯的劣勢。

　　然而，單頁網站實際上和傳統的網站相比，在搜尋引擎優化（SEO）上的確是有優勢的，因為Google和其它網站已經公認了這方面的挑戰。他們已經為單頁網站建立了一個機制——不僅將他們的動態頁面編入索引，還專門針對網路爬蟲來優化網站頁面。

　　在本文中，我們將主要關注Google，不過其它大型搜尋引擎如Yahoo！和Bing都支援相同的機制。

　　Google是如何抓取單頁網站的

　　當Google索引一個傳統網站的時候，它的網路爬蟲（稱之為Googlebot）首先會掃描並檢索頂層URL內容。一旦這一步驟完成，網路爬蟲就會跟蹤網頁上的所有連結，同時還會給那些網頁編寫索引。接著就是重複性步驟——繼續跟蹤後續網頁，最終會給此網頁上和相關領域內的所有內容編寫索引。

　　當Google試圖檢索一個單頁網站的時候，它所看到的只是一個單一的HTML空容器（通常情況下是一個空的div或body tag），所以根本沒有東西可以檢索，也沒有連結可以抓取，更沒辦法索引相應的網站。

　　不過這還沒有結束，值得慶幸的是，Google和其它搜尋引擎已經意識到單頁網站的重要性，同時為開發者提供工具——為網路爬蟲提供搜尋資訊，這可能是比傳統網站優越的地方。

　　怎樣製作一個可抓取的單頁網站

　　製作一個可抓取的單頁網站的關鍵第一步就是必須意識到：如果一個網路爬蟲或者一個使用Web瀏覽器的使用者提出需求的時候，網站的伺服器必須給出相應的回覆。對於一般的訪客只需要給出正常的回覆即可；但是對於一個網路爬蟲，就需要回到優化過的網頁，向網路爬蟲展示訪客想要知道的內容，同時還要將格式設定為網路爬蟲輕易就能夠讀出的格式。

　　那麼一個優化過後、防網路爬蟲的網站主頁看上去像什麼樣子呢？有可能網站Logo或者其它的主要圖片會出現在搜尋結果裡，一些SEO優化的文字可以解釋你所搜尋的網站是做什麼的，當然了，Google最好是把網頁上的HTML連結編入檢索比較好。

　　不過網頁上沒有任何CSS樣式或複雜的HTML結構，也沒有任何JavaScript，或者是我們不希望谷歌索引連線到網站區域。下圖所顯示的就是瀏覽器（左）和網路爬蟲（右）看的網頁的情形。

　　為網路爬蟲自定義內容

　　通常，單頁網站連結到不同的內容會使用符號(# !)。另外，這些連結在對待訪客和網路爬蟲的時候不會遵循同樣的方式。

　　案例：在單頁網站上鍊接到使用者頁面看上去就像/index.htm#!page=user:id,123，網路爬蟲可能會看到#!並尋找帶有URL /index.htm?_escaped_fragment_=page=user:id,123的網頁。由於網路爬蟲會遵循這一模式並尋找URL，所以開發者可以給伺服器編寫程式以回覆帶有HTML快照的頁面需求，這在瀏覽器裡也可以很正常的通過JavaScript來進行渲染。

　　這些快照可能會被Google索引，但是在Google搜尋結果裡的任何人點選清單都將被送往/index.htm#!page=user:id,123。在單頁網站裡JavaScript也將從那裡開始接管並按照計劃渲染網頁。這為單頁網站開發者提供了專門為谷歌和專門為使用者進行調整網站的機會，而不必編寫訪客易讀的、網路爬蟲易於理解的文字，頁面可以為訪客和爬蟲進行優化，除此之外不用擔心其它內容。

　　網路爬蟲通過網站的路徑是可以被控制的，開發者可以指導訪客從Google搜尋結果到一個指定的主頁面。這可能需要在開發過程裡花費更多的工作，但是在搜尋結果位置和客戶保留方面可以得到巨大的回報。

　　檢測谷歌的網路爬蟲

　　檢測網路爬蟲這可能需要一些命令列，但使用Chrome Developer Tools就能將這一檢測變得相當容易，只要點選按鈕、檢查工具框：

1. 開啟Chrome Developer Tools，點選Google Toolbar右邊的帶有三條水平線的按鈕，然後從選單中選擇Tools，再點選Developer Tools。
2. 在螢幕右下角是一個齒輪圖示：點選進去就能看到一些高階開發者選項，例如禁用快取，開啟XMLHttpRequest記錄。
3. 第二個標籤標記為Overrides，點選User Agent標籤旁邊的核取方塊，再從Chrome到Firefox、IE、iPads的下拉選單裡選擇任何數量的使用者代理，Googlebot的代理不是預設選項。為了使用它，選擇其他複製並貼上使用者代理字串到輸入框裡。
4. 現在，該選項卡本身是當作Googlebot的，當我們在網站上開啟任何URL的時候，應該能看到網路爬蟲頁面。

　　原文：Webdesigner Depot