Google 爬蟲如何抓取 JavaScript 的？

咱們測試了谷歌爬蟲是如何抓取 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 類：

1. JavaScript 重定向

2. JavaScript 連接

3. 動態插入內容

4. 動態插入 Meta 數據 和頁面元素

5. 一個帶有 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 新時代取得實質性進展，這意味着它們要更好地支持 HTML五、JavaScript 和 動態網站。

對於 SEO，那些沒有理解上述基本概念和 Google 技術的人，應該好好研究和學習，以遇上當前技術。若是你不把 DOM 考慮在內，您可能會丟失一半份額。

本文所表達觀點不全是由 Search Engine Land （一家搜索引擎網站）提供，部分觀點是由客座做者提供。全體做者列表。