我們測試了谷歌爬蟲是如何抓取 JavaScript，下面就是我們從中學習到的知識。
認為 Google 不能處理 JavaScript ？再想想吧。Audette Audette 分享了一系列測試結果，他和他同事測試了什麼型別的 JavaScript 功能會被 Google 抓取和收錄。
長話短說
1. 我們進行了一系列測試，已證實 Google 能以多種方式執行和收錄 JavaScript。我們也確認 Google 能渲染整個頁面並讀取 DOM，由此能收錄動態生成的內容。
2. DOM 中的 SEO 訊號（頁面標題、meta 描述、canonical 標籤、meta robots 標籤等）都被關注到。動態插入 DOM 的內容都也能被抓取和收錄。此外，在某些案例中，DOM 甚至可能比 HTML 原始碼語句更優先。雖然這需要做更多的工作，但這是我們好幾個測試中的一個。
引言：Google 執行 JavaScript & 讀取 DOM
早在 2008 年， Google 就 成功抓取 JavaScript，但很可能侷限於某種方式。
而在今天，可以明確的是，Google 不僅能制定出他們抓取和收錄的 JavaScript 型別，而且在渲染整個 web 頁面上取得了顯著進步（特別在最近的 12 到 18 個月）。
在 Merkle，我們的 SEO 技術團隊想更好地理解谷歌爬蟲能抓取和收錄什麼型別的 JavaSscript 事件。經過研究，我們發現令人瞠目的結果，並已證實 Google 不僅能執行各種 JavaScript 事件，而且能收錄動態生成的內容。怎麼樣做到的？Google 能讀取 DOM。
DOM 是什麼？
很多搞 SEO 的都不理解什麼是 Document Object Model（DOM）。
當瀏覽器請求頁面時會發生什麼，而 DOM 又是如何參與進來的。
當用於 web 瀏覽器，DOM 本質上是一個應用程式的介面，或 API，用於標記和構造資料（如 HTML 和 XML）。該介面允許 web 瀏覽器將它們進行組合而構成文件。
DOM 也定義瞭如何對結構進行獲取和操作。雖然 DOM 是與語言無關的 API （不是捆綁在特定程式語言或庫），但它普遍應用於 web 應用程式的 JavaScript 和 動態內容。
DOM 代表了介面，或“橋樑”，將 web 頁面與程式語言連線起來。解析 HTML 和執行 JavaScript 的結果就是 DOM。web 頁面的內容不（不僅）是原始碼，是 DOM。這使它變得非常重要。
JavaScript 是如何通過 DOM 介面工作的。
我們興奮地發現 Google 能夠讀取 DOM，並能解析訊號和動態插入的內容，例如 title 標籤、頁面文字、head 標籤和 meta 註解（如：rel = canonical）。可閱讀其中的完整細節。
這一系列測試和結果
因為想知道什麼樣的 JavaScript 功能會被抓取和收錄，我們單獨對 谷歌爬蟲 建立一系列測試。通過建立控制元件，確保 URL 活動能被獨立理解。下面，讓我們詳細劃分出一些有趣的測試結果。它們被分為 5 類：
- JavaScript 重定向
- JavaScript 連結
- 動態插入內容
- 動態插入 Meta 資料 和頁面元素
- 一個帶有 rel = “nofollow” 的重要例子
例子：一個用來測試谷歌爬蟲理解 JavaScript 能力的頁面。
1. JavaScript 重定向
我們首先測試了常見的 JavaScript 重定向，用不同方式表示的 URL 會有什麼樣結果呢？我們選擇了 window.location 物件進行兩個測試：Test A 以絕對路徑 URL 呼叫 window.location，而 Test B 使用相對路徑。
結果：該重定向很快被 Google 跟蹤。從收錄來看，它們被解釋為 301 – 最終狀態的 URL 取代了 Google 收錄裡的重定向 URL。
在隨後的測試中，我們在一個權威網頁上，利用完全相同的內容，完成一次利用 JavaScript 重定向到同一個站點的新頁面。而原始 URL 是排在 Google 熱門查詢的首頁。
結果：果然，重定向被 Google 跟蹤，而原始頁面並沒有被收錄。而新 URL 被收錄了，並立刻排在相同查詢頁面內的相同位置。這讓我們很驚喜，以排名的角度上看，視乎表明了JavaScript 重定向行為（有時）很像永久性的 301 重定向。
下次，你的客戶想要為他們的網站完成 JavaScript 重定向移動，你可能不需要回答，或回答：“請不要”。因為這似乎有一個轉讓排名訊號的關係。支援這一結論是引用了 Google 指南：
使用 JavaScript 為使用者進行重定向，可能是一個合法的做法。例如，如果你將已登入使用者重定向到一個內部頁面，你可以使用 JavaScript 完成這一操作。當仔細檢查 JavaScript 或其他重定向方法時，以確保你的站點遵循我們的指南，並考慮到其意圖。記住 301 重定向跳轉到你網站下是最好的，但如果你沒有許可權訪問你網站伺服器，你可以為此使用 JavaScript 重定向。
2. JavaScript 連結
我們用多種編碼方式測試了不同型別的 JS 連結。
我們測試下拉選單的連結。歷史上的搜素引擎一直不能跟蹤這型別的連結。我們想確定 onchange 事件處理器是否會被跟蹤。重要的是，這只是執行特定的型別，而我們需要是：其它改動後的影響，而不像上面 JavaScript 重定向的強制操作。
例子： Google Work 頁面的語言選擇下拉選單。
結果：連結被完整地抓取和跟蹤。
我們也測試了常見的 JavaScript 連結。下面是最常見型別的 JavaScript 連結，而傳統的 SEO 則推薦純文字。這些測試包括 JavaScript 連結程式碼：
- 作用於外部 href 鍵-值對（AVP），但在一個標籤內（“onClick”）
- 作用 href 內部 AVP（“javascript : window.location”）
- 作用於 a 標籤外部，但在 href 內呼叫 AVP（“javascript : openlink()”）
- 等等
結果：連結被完整抓取和跟蹤。
我們下一個測試是更進一步地測試事件處理器，如上面測試的 onchange。具體地說，我們希望利用滑鼠移動的事件處理器，然後隱藏 URL 變數 ，該變數只在事件處理函式（在該案例是 onmousedown 和 onmouseout）被觸發時執行。
結果：連結被完整抓取和跟蹤。
構造連結：我們知道 Google 能執行 JavaScript，但想確認它們是否能讀取程式碼裡的變數。所以在該測試中，我們連線能構造 URL 字串的字元。
結果：連結被完整抓取和跟蹤。
3. 動態插入內容
很明顯，這些都是重點：動態插入文字、影象、連結和導航。優質的文字內容對搜尋引擎理解網頁主題和內容是至關重要的。在這個動態網站的時代，它的重要性是無需質疑的。
這些測試，設計出來是為了檢查在兩個不同場景下動態插入文字的結果。
1. 測試搜尋引擎能否統計動態插入的文字，而文字是來自頁面 HTML 原始碼內的。
2. 測試搜尋引擎能否統計動態插入的文字，而文字是來自頁面 HTML 原始碼外的（在一個外部 JavaScript 檔案內）。
結果：在兩個案例中，文字都能被抓取和收錄，並且頁面是根據該內容進行排名。爽！
為了瞭解更多相關資訊，我們測試了一個通過 JavaScript 編寫的客戶端全域性導航，而導航裡的連結都是通過 document.writeIn 函式插入，並且確定它們能被完全抓取和跟蹤。應該指出的是：Google 能解釋使用 AngularJS 框架 和 HTML5 History API（pushState）構建的網站，能渲染和收錄它，並能像傳統靜態網頁一樣排名。這就是 不禁止谷歌爬蟲 獲取外部檔案和 JavaScript 的重要性，而且這也許是 Google 正在從 《支援 Ajax 的 SEO 指南》 中移除它的原因。當你能簡單地渲染整個頁面時候，誰還需要 HTML 快照呢？
經過測試後發現，不管什麼型別的內容，都是同樣的結果。例如，影象載入到 DOM 後會被抓取和收錄。我們甚至做了這樣的一個測試：通過動態生成 data-vocabulary.org 結構資料來製作 breadcrumb（麵包屑導航），並將其插入 DOM。結果呢？ 成功插入後的麵包屑出現在搜尋結果中了 （search engine results page）。
值得注意的是，Google 現在 推薦用 JSON-LD 標記 形成結構化資料。我敢肯定將來會出現更多基於此的東西。
4. 動態插入 Meta 資料 & 頁面元素
我們將各種對 SEO 至關重要的標籤動態插入到 DOM：
- Title 元素
- Meta 描述
- Meta robots
- Canonical tags
結果：在所有案例中，標籤都能被抓取，其表現就像 HTML 原始碼裡的元素一樣。
一個有趣的補充實驗幫助我們理解優先順序。當存在衝突訊號時，哪一個會勝出呢？如果原始碼裡有 noindex、nofollow 標籤，而 DOM 裡有 noindex、follow 標籤的話，將會發生什麼呢？在這協議裡，HTTP x-robots 響應頭部的行為如何作為另一個變數？這將是未來綜合測試的一部分。然而，我們的測試顯示：當衝突時，Google 會無視原始碼裡的標籤，而支援 DOM。
5. 一個帶有 rel =“nofollow” 的重要例子
我們想測試 Google 如何應對出現在原始碼和 DOM 的鏈路級別的 nofollow 屬性。我們也因此建立了一個沒有應用 nofollow 的控制元件。
對於 nofollow ，我們分別單獨測試原始碼 vs DOM 生成的註解。
原始碼裡的 nofollow 正如我們所期待的那樣執行（連結沒被跟蹤）。而 DOM 裡的 nofollow 卻失效（連結被跟蹤，並且頁面被收錄）。為什麼？因為在 DOM 裡修改 href 元素的操作發生得太晚了：Google 在執行新增 rel=”nofollow” 的 JavaScript 函式前，已準備好抓取連結和佇列等待著 URL。然而，如果將帶有 href =”nofollow”的 a 元素插入到 DOM，nofollow 和連結因在同一時刻插入，所以會被跟蹤。
結果
從歷史角度上看，各種 SEO 推薦是在任何可能的時候，要儘可能專注 ‘純文字’ 內容。而動態生成內容、AJAX 和 JavaScript 連結會損害主流搜尋引擎的 SEO。顯然，這對 Google 不再是問題。 JavaScript 連結以類似普通的 HTML 連結方式執行（這只是表面，而我們不知道幕後程式進行了什麼操作）。
- JavaScript 重定向都會以類似於 301 重定向方式對待。
- 動態插入內容，甚至 meta 標籤，如 rel canonical 註解，無論在 HTML 原始碼，還是在最初 HTML 被解析後觸發 JavaScript 生成 DOM ，都以同等方式對待。
- Google 視乎能完全渲染頁面和理解 DOM ，而不僅是原始碼。實在是令人可不思議！（記得允許谷歌爬蟲獲取那些外部檔案和 JavaScript。）
Google 已經在創新方面，以驚人的速度將其它搜尋引擎甩在身後。我們希望看到其它搜尋引擎能有同樣型別的創新。如果他們要保持競爭力，並在 web 新時代取得實質性進展，這意味著它們要更好地支援 HTML5、JavaScript 和 動態網站。
對於 SEO，那些沒有理解上述基本概念和 Google 技術的人，應該好好研究和學習，以趕上當前技術。如果你不把 DOM 考慮在內，您可能會丟失一半份額。
本文所表達觀點不全是由 Search Engine Land （一家搜尋引擎網站）提供，部分觀點是由客座作者提供。全體作者列表。
打賞支援我翻譯更多好文章，謝謝！
打賞譯者
打賞支援我翻譯更多好文章，謝謝！
任選一種支付方式
