我們測試了谷歌爬蟲是如何抓取 JavaScript，下面就是我們從中學(xué)習(xí)到的知識。

認為 Google 不能處理 JavaScript ？再想想吧。Audette Audette 分享了一系列測試結(jié)果，他和他同事測試了什么類型的 JavaScript 功能會被 Google 抓取和收錄。

長話短說

1. 我們進行了一系列測試，已證實 Google 能以多種方式執(zhí)行和收錄 JavaScript。我們也確認 Google 能渲染整個頁面并讀取 DOM，由此能收錄動態(tài)生成的內(nèi)容。

2. DOM 中的 SEO 信號(頁面標題、meta 描述、canonical 標簽、meta robots 標簽等)都被關(guān)注到。動態(tài)插入 DOM 的內(nèi)容都也能被抓取和收錄。此外，在某些案例中，DOM 甚至可能比 HTML 源碼語句更優(yōu)先。雖然這需要做更多的工作，但這是我們好幾個測試中的一個。

引言：Google 執(zhí)行 JavaScript & 讀取 DOM

早在 2008 年， Google 就 成功抓取 JavaScript，但很可能局限于某種方式。

而在今天，可以明確的是，Google 不僅能制定出他們抓取和收錄的 JavaScript 類型，而且在渲染整個 web 頁面上取得了顯著進步(特別在最近的 12 到 18 個月)。

在 Merkle，我們的 SEO 技術(shù)團隊想更好地理解谷歌爬蟲能抓取和收錄什么類型的 JavaSscript 事件。經(jīng)過研究，我們發(fā)現(xiàn)令人瞠目的結(jié)果，并已證實 Google 不僅能執(zhí)行各種 JavaScript 事件，而且能收錄動態(tài)生成的內(nèi)容。怎么樣做到的?Google 能讀取 DOM。

DOM 是什么?

很多搞 SEO 的都不理解什么是 Document Object Model(DOM)。

當瀏覽器請求頁面時會發(fā)生什么，而 DOM 又是如何參與進來的。

當用于 web 瀏覽器，DOM 本質(zhì)上是一個應(yīng)用程序的接口，或 API，用于標記和構(gòu)造數(shù)據(jù)(如 HTML 和 XML)。該接口允許 web 瀏覽器將它們進行組合而構(gòu)成文檔。

DOM 也定義了如何對結(jié)構(gòu)進行獲取和操作。雖然 DOM 是與語言無關(guān)的 API (不是捆綁在特定編程語言或庫)，但它普遍應(yīng)用于 web 應(yīng)用程序的 JavaScript 和 動態(tài)內(nèi)容。

DOM 代表了接口，或“橋梁”，將 web 頁面與編程語言連接起來。解析 HTML 和執(zhí)行 JavaScript 的結(jié)果就是 DOM。web 頁面的內(nèi)容不(不僅)是源碼，是 DOM。這使它變得非常重要。

JavaScript 是如何通過 DOM 接口工作的。

我們興奮地發(fā)現(xiàn) Google 能夠讀取 DOM，并能解析信號和動態(tài)插入的內(nèi)容，例如 title 標簽、頁面文本、head 標簽和 meta 注解(如：rel = canonical)?？砷喿x其中的完整細節(jié)。

這一系列測試和結(jié)果

因為想知道什么樣的 JavaScript 功能會被抓取和收錄，我們單獨對 谷歌爬蟲 創(chuàng)建一系列測試。通過創(chuàng)建控件，確保 URL 活動能被獨立理解。下面，讓我們詳細劃分出一些有趣的測試結(jié)果。它們被分為 5 類：

1、JavaScript 重定向
2、JavaScript 鏈接
3、動態(tài)插入內(nèi)容
4、動態(tài)插入 Meta 數(shù)據(jù) 和頁面元素
5、一個帶有 rel = “nofollow” 的重要例子

例子：一個用來測試谷歌爬蟲理解 JavaScript 能力的頁面。

1. JavaScript 重定向

我們首先測試了常見的 JavaScript 重定向，用不同方式表示的 URL 會有什么樣結(jié)果呢?我們選擇了 window.location 對象進行兩個測試：Test A 以絕對路徑 URL 調(diào)用 window.location，而 Test B 使用相對路徑。

結(jié)果：該重定向很快被 Google 跟蹤。從收錄來看，它們被解釋為 301 - 最終狀態(tài)的 URL 取代了 Google 收錄里的重定向 URL。

在隨后的測試中，我們在一個權(quán)威網(wǎng)頁上，利用完全相同的內(nèi)容，完成一次利用 JavaScript 重定向到同一個站點的新頁面。而原始 URL 是排在 Google 熱門查詢的首頁。

結(jié)果：果然，重定向被 Google 跟蹤，而原始頁面并沒有被收錄。而新 URL 被收錄了，并立刻排在相同查詢頁面內(nèi)的相同位置。這讓我們很驚喜，以排名的角度上看，視乎表明了JavaScript 重定向行為(有時)很像永久性的 301 重定向。

下次，你的客戶想要為他們的網(wǎng)站完成 JavaScript 重定向移動，你可能不需要回答，或回答：“請不要”。因為這似乎有一個轉(zhuǎn)讓排名信號的關(guān)系。支持這一結(jié)論是引用了 Google 指南：

使用 JavaScript 為用戶進行重定向，可能是一個合法的做法。例如，如果你將已登錄用戶重定向到一個內(nèi)部頁面，你可以使用 JavaScript 完成這一操作。當仔細檢查 JavaScript 或其他重定向方法時，以確保你的站點遵循我們的指南，并考慮到其意圖。記住 301 重定向跳轉(zhuǎn)到你網(wǎng)站下是最好的，但如果你沒有權(quán)限訪問你網(wǎng)站服務(wù)器，你可以為此使用 JavaScript 重定向。

2. JavaScript 鏈接
我們用多種編碼方式測試了不同類型的 JS 鏈接。

我們測試下拉菜單的鏈接。歷史上的搜素引擎一直不能跟蹤這類型的鏈接。我們想確定 onchange 事件處理器是否會被跟蹤。重要的是，這只是執(zhí)行特定的類型，而我們需要是：其它改動后的影響，而不像上面 JavaScript 重定向的強制操作。

例子： Google Work 頁面的語言選擇下拉菜單。

結(jié)果：鏈接被完整地抓取和跟蹤。

我們也測試了常見的 JavaScript 鏈接。下面是最常見類型的 JavaScript 鏈接，而傳統(tǒng)的 SEO 則推薦純文本。這些測試包括 JavaScript 鏈接代碼：

作用于外部 href 鍵-值對(AVP)，但在一個標簽內(nèi)(“onClick”)

作用 href 內(nèi)部 AVP(“javascript : window.location”)

作用于 a 標簽外部，但在 href 內(nèi)調(diào)用 AVP(“javascript : openlink()”)

等等

結(jié)果：鏈接被完整抓取和跟蹤。

我們下一個測試是更進一步地測試事件處理器，如上面測試的 onchange。具體地說，我們希望利用鼠標移動的事件處理器，然后隱藏 URL 變量 ，該變量只在事件處理函數(shù)(在該案例是 onmousedown 和 onmouseout)被觸發(fā)時執(zhí)行。

結(jié)果：鏈接被完整抓取和跟蹤。

構(gòu)造鏈接：我們知道 Google 能執(zhí)行 JavaScript，但想確認它們是否能讀取代碼里的變量。所以在該測試中，我們連接能構(gòu)造 URL 字符串的字符。
結(jié)果：鏈接被完整抓取和跟蹤。

3. 動態(tài)插入內(nèi)容

很明顯，這些都是重點：動態(tài)插入文本、圖像、鏈接和導(dǎo)航。優(yōu)質(zhì)的文本內(nèi)容對搜索引擎理解網(wǎng)頁主題和內(nèi)容是至關(guān)重要的。在這個動態(tài)網(wǎng)站的時代，它的重要性是無需質(zhì)疑的。

這些測試，設(shè)計出來是為了檢查在兩個不同場景下動態(tài)插入文本的結(jié)果。

1). 測試搜索引擎能否統(tǒng)計動態(tài)插入的文本，而文本是來自頁面 HTML 源碼內(nèi)的。
2). 測試搜索引擎能否統(tǒng)計動態(tài)插入的文本，而文本是來自頁面 HTML 源碼外的(在一個外部 JavaScript 文件內(nèi))。

結(jié)果：在兩個案例中，文本都能被抓取和收錄，并且頁面是根據(jù)該內(nèi)容進行排名。爽!

為了了解更多相關(guān)信息，我們測試了一個通過 JavaScript 編寫的客戶端全局導(dǎo)航，而導(dǎo)航里的鏈接都是通過 document.writeIn 函數(shù)插入，并且確定它們能被完全抓取和跟蹤。應(yīng)該指出的是：Google 能解釋使用 AngularJS 框架 和 HTML5 History API(pushState)構(gòu)建的網(wǎng)站，能渲染和收錄它，并能像傳統(tǒng)靜態(tài)網(wǎng)頁一樣排名。這就是 不禁止谷歌爬蟲 獲取外部文件和 JavaScript 的重要性，而且這也許是 Google 正在從 《支持 Ajax 的 SEO 指南》 中移除它的原因。當你能簡單地渲染整個頁面時候，誰還需要 HTML 快照呢?

經(jīng)過測試后發(fā)現(xiàn)，不管什么類型的內(nèi)容，都是同樣的結(jié)果。例如，圖像加載到 DOM 后會被抓取和收錄。我們甚至做了這樣的一個測試：通過動態(tài)生成 data-vocabulary.org 結(jié)構(gòu)數(shù)據(jù)來制作 breadcrumb(面包屑導(dǎo)航)，并將其插入 DOM。結(jié)果呢? 成功插入后的面包屑出現(xiàn)在搜索結(jié)果中了 (search engine results page)。

值得注意的是，Google 現(xiàn)在 推薦用 JSON-LD 標記 形成結(jié)構(gòu)化數(shù)據(jù)。我敢肯定將來會出現(xiàn)更多基于此的東西。

4. 動態(tài)插入 Meta 數(shù)據(jù) & 頁面元素

我們將各種對 SEO 至關(guān)重要的標簽動態(tài)插入到 DOM：

Title 元素
Meta 描述
Meta robots
Canonical tags

結(jié)果：在所有案例中，標簽都能被抓取，其表現(xiàn)就像 HTML 源碼里的元素一樣。

一個有趣的補充實驗幫助我們理解優(yōu)先順序。當存在沖突信號時，哪一個會勝出呢?如果源碼里有 noindex、nofollow 標簽，而 DOM 里有 noindex、follow 標簽的話，將會發(fā)生什么呢?在這協(xié)議里，HTTP x-robots 響應(yīng)頭部的行為如何作為另一個變量?這將是未來綜合測試的一部分。然而，我們的測試顯示：當沖突時，Google 會無視源碼里的標簽，而支持 DOM。

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

我們想測試 Google 如何應(yīng)對出現(xiàn)在源碼和 DOM 的鏈路級別的 nofollow 屬性。我們也因此創(chuàng)建了一個沒有應(yīng)用 nofollow 的控件。

對于 nofollow ，我們分別單獨測試源碼 vs DOM 生成的注解。

源碼里的 nofollow 正如我們所期待的那樣運行(鏈接沒被跟蹤)。而 DOM 里的 nofollow 卻失效(鏈接被跟蹤，并且頁面被收錄)。為什么?因為在 DOM 里修改 href 元素的操作發(fā)生得太晚了：Google 在執(zhí)行添加 rel=”nofollow” 的 JavaScript 函數(shù)前，已準備好抓取鏈接和隊列等待著 URL。然而，如果將帶有 href =”nofollow”的 a 元素插入到 DOM，nofollow 和鏈接因在同一時刻插入，所以會被跟蹤。

結(jié)果

從歷史角度上看，各種 SEO 推薦是在任何可能的時候，要盡可能專注 ‘純文本' 內(nèi)容。而動態(tài)生成內(nèi)容、AJAX 和 JavaScript 鏈接會損害主流搜索引擎的 SEO。顯然，這對 Google 不再是問題。 JavaScript 鏈接以類似普通的 HTML 鏈接方式運行(這只是表面，而我們不知道幕后程序進行了什么操作)。
JavaScript 重定向都會以類似于 301 重定向方式對待。

動態(tài)插入內(nèi)容，甚至 meta 標簽，如 rel canonical 注解，無論在 HTML 源碼，還是在最初 HTML 被解析后觸發(fā) JavaScript 生成 DOM ，都以同等方式對待。

Google 視乎能完全渲染頁面和理解 DOM ，而不僅是源碼。實在是令人可不思議!(記得允許谷歌爬蟲獲取那些外部文件和 JavaScript。)

Google 已經(jīng)在創(chuàng)新方面，以驚人的速度將其它搜索引擎甩在身后。我們希望看到其它搜索引擎能有同樣類型的創(chuàng)新。如果他們要保持競爭力，并在 web 新時代取得實質(zhì)性進展，這意味著它們要更好地支持 HTML5、JavaScript 和 動態(tài)網(wǎng)站。

對于 SEO，那些沒有理解上述基本概念和 Google 技術(shù)的人，應(yīng)該好好研究和學(xué)習(xí)，以趕上當前技術(shù)。如果你不把 DOM 考慮在內(nèi)，您可能會丟失一半份額。

本文所表達觀點不全是由 Search Engine Land (一家搜索引擎網(wǎng)站)提供，部分觀點是由客座作者提供。全體作者列表。