Google 爬蟲如何抓 JavaScript 的？

我們知道國內的瀏覽器以及搜尋工具都是用爬蟲來抓取網頁資訊的，那麼google爬蟲是如何抓取Javascript的呢？今天就跟大家深入研究探討一下。

我們測試了Google爬蟲是如何抓取 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 技術團隊想更能理解Google爬蟲能抓取和收錄哪種類型的 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 功能會被抓取和收錄，我們單獨對 Google爬蟲 創建一系列測試。透過建立控件，確保 URL 活動能獨立理解。下面，讓我們詳細劃分出一些有趣的測試結果。它們被分為5 個類別：

JavaScript 重定向

JavaScript 連結

#動態插入內容

動態插入Meta 資料和頁面元素

一個有rel = “nofollow” 的重要例子

範例：一個用來測試Google爬蟲理解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 考慮在內，你可能會丟失一半份額。

相關推薦：

JavaScript遍歷陣列的方法總結

JavaScript如何建立陣列？

JavaScript入門基礎教學

#

以上是Google 爬蟲如何抓 JavaScript 的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！