JavaScript與SEO之間的藕斷絲連關係

大多數網站都會使用某些 JavaScript 來增加互動功能和改善使用者體驗。有的網站使用 JavaScript 來實現選單功能，有的使用它來抓取產品或者價格資訊，有的使用它從多個源獲取內容，在某些情況下，網站會全站使用 JavaScript。當今網際網路的現實是：JavaScript 無處不在。

正如 Google 的 John Mueller 所說：

我並不是在說 SEO 從業人員應該走出去學習 JavaScript 程式設計。情況正好相反。SEO 從業人員主要需要知道 Google 是如何處理 JavaScript 的，以及遇到相關問題時如何解決。甚至在極少數情況下，SEO 從業人員才會被允許去碰程式碼。我的目標是通過這篇文章幫助你學習：

• Javascript SEO 是什麼
• Google 如何處理包含 JavaScript 的頁面
• 如何測試並解決 JavaScript 的問題
• 渲染選項
• 讓你的 JavaScript 網站對 SEO 友好

JavaScript SEO 是技術 SEO（搜尋引擎優化）的一部分，旨在使包含較多 JavaScript 網站容易被抓取和索引，以及更加搜尋引擎友好。目標是為了使這些網站可以被搜尋引擎發現，並獲得更高的排名。

JavaScript 對 SEO 是有害的嗎？JavaScript 是魔鬼嗎？完全不是。它只是與許多 SEO 從業人員熟悉的不一樣，同時也有一點學習曲線。人們傾向於在一些可能有更好的解決方案的事情上過度使用 JavaScript，但你有時不得不隨遇而安。你只需要知道 JavaScript 不是完美的，它不總是適合某項工作的工具。JavaScript 不能像 HTML 和 CSS 那樣被逐步解析，它可以很“重”，對頁面載入和效能造成影響。許多情況下，你可能在用效能換功能。

在搜尋引擎早期，一個下載了的 HTML 響應就足以檢視大多數頁面的內容。但是隨著 JavaScript 的興起，搜尋引擎現在需要像瀏覽器一樣去渲染許多頁面，這樣他們就能像使用者一樣檢視內容。

Google 用於處理渲染流程的系統叫做網頁渲染服務（Web Rendering Service, WRS）。Google 提供了一個簡單的圖表來展示它的工作原理。

假設我們從某個連結開始這個流程。

1. 爬蟲

爬蟲向伺服器傳送 GET 請求。伺服器用檔案頭和內容響應，接著被儲存。

因為 Google 現在使用了移動優先索引，所以這個請求很可能來自移動使用者代理。你可以通過站長工具中的連結檢查工具來了解 Google 是如何抓取你的網站的。當你對某個連結執行這個流程時，檢視“當時所用的使用者代理”，它可以告訴你索引時使用的是桌面版本還是已經使用移動優先版本了。

這些請求大部分來自美國加州的山景城，但是在抓取一些地區性適應的頁面時，這些請求會來自美國以外的地區。我提到這一點是因為有的網站會遮蔽或者區別對待來自特定國家或者使用特定 IP 地址的訪客，這會導致 Google 爬蟲無法讀取你的內容。

有些網站可能還會使用使用者代理偵測來向特定的爬蟲展示（特定的）內容。尤其是對 JavaScript 站點來說，Google 讀取到的內容可能和使用者看到的有區別。這就是為什麼站長工具中的網址檢查工具、移動友好性測試工具和富媒體搜尋結果測試工具對解決 JavaScript SEO 問題非常重要。他們可以顯示 Google 讀取到的內容是什麼，這對檢視 Google 爬蟲是否被遮蔽以及他們是否可以讀取網頁的內容很有幫助。因為在下載的 GET 請求、渲染的頁面、甚至測試工具間存在著一些關鍵的區別，我將在渲染器一節中介紹如何測試。

同樣需要注意的是，雖然上圖中 Google 將抓取過程的輸出稱為“HTML”，但實際上他們抓取並儲存了頁面生成所需的全部資源，包括 HTML 頁面、Javascript 檔案、層疊樣式表、XHR 請求、應用程式介面端點等等。

2. 處理

許多系統都被圖片中的“處理”一詞混淆了。這裡我介紹幾種與 JavaScript 相關的處理。

資源和連結

Google 不會像使用者那樣從一個頁面導航至另一個頁面。“處理”的部分工作是檢查頁面中指向其他頁面的連結以及生成頁面所需的檔案。這些連結被提取並放入抓取佇列中，Google 接著會確立優先順序並安排頁面抓取計劃。

Google 會從 <link>等標籤中提取生成頁面所需要的資源連結（層疊樣式表、JS 等）。然而，指向其他頁面的連結必須是特定的格式才能被 Google 視作連結。內部連結和外部連結必須是帶有href屬性的 <a> 標籤才可以。對於使用了搜尋不友好的 JavaScripit 使用者來說，有許多方法來使連結工作。

可行：

<a href="/page">簡單就好</a>
<a href="/page" onclick="goTo(‘page’)">還算行吧</a>

不行：

<a onclick="goTo(‘page’)">不行，沒有 href 屬性</a>
<a href="javascript:goTo(‘page’)">不行，沒有連結</a>
<a href="javascript:void(0)">不行，沒有連結</a>

<span onclick=“goTo(‘page’)”>不是正確的 HTML 元素</span> <option value=“page”>不行，錯誤的 HTMl 元素</option> <a href=”#”>沒有連結</a> Button, ng-click, there are many more ways this can be done incorrectly. 按鈕、ng 點選，錯誤的做法還有很多。

同樣值得注意的是使用 JavaScript 新增的內部連結只有渲染後才會被抓取。這個流程相對較快，在大多數情況下不需要擔心。

快取

Google 下載的每一個檔案，包括 HTML 頁面、JavaScript 檔案、層疊樣式表檔案等，都會被主動快取。Google 會無視你的快取時間設定，在需要的時候獲取一個副本。後面我將討論更多這方面的內容，並在渲染器一節討論它的重要性。

重複剔除

在傳送渲染之前，重複內容可能會從下載的 HTML 程式碼中剔除，或者不優先考慮。對於應用外殼模型來說，只有很少的內容或者程式碼會在 HTML 反饋中顯示。實際上，網站上的每一個頁面可能會顯示同樣的程式碼，而這些程式碼與多個網站的程式碼可能是一樣的。有時候這會導致網頁被作為重複內容對待而不立刻進行渲染。更糟糕的是，錯誤的內容甚至錯誤的網站會顯示在搜尋結果中。隨著時間的推移，這個問題會自己消失，但這依然是有問題的，尤其是對於新網站來說。

最嚴指令

Google 會在頁面的 HTML 和渲染版本中選取最嚴格的語句。如果 JavaScript 修改了某語句，並且和 HTML 語句衝突，Google 會只遵循最嚴格的那一個。Noindex 將覆蓋 index，同時 HTML 中的 noindex 證據會整個跳過渲染。

3. 渲染佇列

現在每一個頁面都進入了渲染器。許多和 JavaScript 以及兩級索引（先是 HTML，接著是渲染過後的頁面）打交道的 SEO 從業人員最大的擔憂之一是頁面可能幾天甚至幾周都沒有被渲染。在 Google 對此進行調查之後，發現頁面進入渲染器時間的中位數為 5 秒鐘，而 90% 的時候都是以分鐘計算的。因此在大多數情況下，獲得頁面的 HTML 版本和進行兩級索引的時間間隔不是問題。

4. 渲染器

Google 使用渲染器來對網站進行渲染，以瞭解其在使用者眼中的樣子。在渲染器中，他們會將 JavaScript 及任何 JavaScript 生成的變化處理進文件物件模型（Document Object Model, DOM）。

為此，Google 使用的一款現在“常青”的無頭 Chrome 瀏覽器，這意味著他應該使用最新的 Chrome 版本，並支援最新的特性。直到最近，Google 還在使用 Chrome 41 進行渲染，眾多特性都沒有支援。

Google 提供了更多關於網頁渲染服務的資訊，其中包括了像拒絕許可權、無狀態、扁平化輕量 DOM 和影子 DOM 這樣值得一讀的內容。

在全網範圍展開渲染可能是世界第八大奇蹟。這是一項嚴肅的任務，需要消耗大量的資源。由於渲染物件體量的關係，Google 為了加快速度在渲染過程中使用了許多捷徑。Ahrefs 是唯一能夠進行大規模網頁渲染的主流 SEO 工具，我們在一天內可以渲染 1.5 億個網頁來使我們的連結索引更加完整。它使我們能夠檢查 JavaScript 重定向，並展示出我們找到的通過 JavaScript 插入連結，在連結相關報告中，我們會在對應位置加入 JS 標籤。

快取的資源

Google 非常依賴對資源進行快取。網頁被快取；檔案被快取；應用程式介面請求被快取；基本上，所有內容在被送進渲染器之前，Google 都會對他們進行快取。他們不會在每次頁面載入的時候重灌下載頁面，而會使用快取的資源來加速流程。

這會導致一些罕見的狀態：過去版本的檔案被用於渲染流程，而索引了的版本可能了包含了部分舊檔案。當出現較大修改的時候，你可以使用版本控制或者內容指紋特性來生成新的檔案。這樣在渲染時 Google 就不得不下載資源的最新版本。

無固定超時

一個常見的 SEO 迷思是渲染器在載入你的網頁時僅僅等待 5 分鐘。儘管讓你的網站載入更快總是好的，但是對於上面提到的 Google 快取檔案的方式，這個迷思沒有任意意義。基本上他們載入的內容都是事先快取好的。這個迷思來自像網址檢查工具（URL Inspection Tool）這樣的工具，他們實時抓取內容，需要設定一個合理的限制。

對於渲染器來說並沒有固定的超時。他們的做法和公共的 Rendertron 相似。他們可能會等待 networkidle0 出現，此時沒有更多的網路活動在發生，他們還會設定一個最大時間值以防出現問題或者有人在他們的頁面上挖比特幣。

看到的內容

Googlebot 不會在網頁上採取任何行動。他們不會點選內容，也不會滾動螢幕，但這並不意味著他們沒有變通的辦法。對於內容來說，只要它是在 DOM 中載入且不需要某個動作，Googlebot 就能看見它。我會在故障排除中介紹更多這方面的內容，但是基本上只要是存在在 DOM 中的非隱藏內容，它就能被 Googlebot 看見。如果只有在點選後，該內容才會被載入進入 DOM，那他們就不會被發現。

因為 Google 有一個聰明的變通方法，所以他們也不需要通過滾動螢幕來檢視你的內容。在移動端，他們會以 411×731 的尺寸載入網頁，接著將長度修改為 12,140 畫素。這就相當於一部相當長的手機，尺寸為 411×12140 畫素。在桌面端，他們會進行同樣的操作，尺寸由 1024×768 畫素變成 1024×9307 畫素。

另一個有趣的捷徑是 Google 不會在載入過程中渲染畫素。它會付出時間和額外的資源來等頁面載入完成，同時他們也無需看到畫素完全渲染後的最終形態。他們只需要瞭解頁面的結構和而已，為此他們並不需要真的去渲染畫素。就如同 Google 的 Martin Splitt 所說：

譯：在 Google 搜尋中我們並不十分關心畫素，因為我們並不需要將它展示給誰看。我們想要處理這些（語義）資訊，因此我們需要一些中間態的東西。我們並不需要真的去渲染畫素。

視覺化資訊可能更有助於解釋相關原理。在 Chrome 開發者工具中，如果你在效能標籤頁開展一個測試，可以獲得一個載入圖表。實綠色部分代表了渲染過程，對 Googlebot 來說，這是不可能發生的，於是他們節省下了資源。

灰色 = 下載
藍色 = HTML
黃色 = JavaScript
紫色 = 佈局
綠色 = 渲染

5. 抓取佇列

Google 有一處資源提到了一些抓取預算的內容，但是你應該知道每個網站都有它自己的抓取預算，且每次請求都應該區分優先順序。Google 同時需要在對你站點的抓取和網際網路其他頁面的抓取之間找到平衡。通常來說，抓取較新的網站和包括較多動態頁面的網站會比較慢。某些網頁的更新頻率會比其他頁面慢，一些資源的請求頻率有時也會較少。

JavaScript 網站的一個“陷阱”是他們只會更新 DOM 的若干部分。以使用者身份瀏覽另外一個頁面可能並不會更新 DOM 中像標題標籤和權威標籤等珍貴的部分，但是這對搜尋引擎來說可能並不是一個問題。記住，Google 載入的每個頁面是無狀態的，所以他們並不儲存之前的資訊，因此也不會在頁面間跳轉。我見過有些 SEO 從業人員遇到麻煩，因為他們看到了從一個頁面跳轉到另外一個頁面時發生的時間，如權威標籤沒有更新等，但是 Google 可能永遠也看不到這樣的狀態。開發者可以通過使用 History API 來更新狀態以進行修復，但同樣這可能並不是一個問題。重新整理頁面，檢視你看到的內容，或者更好的做法是在 Google 的測試工具中開展測試，瞭解他們看到的內容。稍後會做詳細介紹。

檢視原始碼 vs. 檢查

當你在瀏覽器視窗右擊滑鼠時，會看到檢視頁面原始碼和檢查頁面的兩個選項。檢視原始碼展示的內容與 GET 請求一致。這是頁面的原始 HTML。而檢查功能展示的是改變已經發生了的處理過後的文件物件模式，它更接近 Googlebot 看到的內容。基本上它是頁面的最新版本。在處理 JavaScript 網站時，比起檢視原始碼功能，你應該更多地使用檢查功能。

Google 快取

使用 Google 快取來檢視 Googlebot 所看到的內容並不是一種可靠的方式。通常情況下，它是初始的 HTML，儘管有時也會是渲染好的 HTML 或者是早先的版本。這套系統的初衷是方便使用者在網站已經下線的情況下檢視內容。作為除錯工具，它並不是特別有用。

Google 的測試工具

來自 Google 的測試工具，像站長工具中的網址檢查工具、移動裝置適合性測試工具和豐富結果測試工具對於排除故障很有用。儘管如此，這些工具看到的和 Google 看到的內容還是略有不同。我們已經討論了這些工具中存在的渲染器中不存在的 5 種超時，此外，這些工具的不同之處還在於他們是實時抓取資源，而不像渲染器那樣使用快取版本。這些工具中的截圖還展示了經過畫素渲染之後的頁面，Google 在渲染器中看不到的。

然而，這些工具在檢視內容是否為 DOM 載入時很有用。這些工具中顯示的 HTML 是渲染後的 DOM。你可以搜尋一小段文字來檢視它是否預設載入了。

這些工具還可以展示哪些資源可能被遮蔽了，以及對故障排除有用的主機錯誤資訊。

在 Google 中搜尋文字

另外一種快速的檢查方法是在 Google 中搜尋內容的一小段文字。搜尋“內容中的幾句話”，接著檢視該頁面是否返回了。如果返回了，那麼你的內容就是可見的。請注意預設隱藏的內容可能不會在搜尋引擎結果頁面中的片段中顯示。

Ahrefs

與連結索引渲染頁面一起，你可以在 Ahrefs 的網站診斷抓取中啟用 JavaScript 以在審計報告中解鎖更多資料。

Ahrefs 工具欄也支援 JavaScript，允許你將標籤的 HTML 版本和渲染過後的版本進行比較。

在對 JavaScript 渲染時，有很多選項。關於這點，Google 有張很棒的圖表，接下來我會展示。對於搜尋引擎來說，任何一種伺服器端渲染、靜態渲染和預載入渲染都是可以的。導致各種問題的主要是完全的客戶端載入，這種載入在瀏覽器中進行。

雖然就算是客戶端渲染對 Google 來說可能也沒有問題，但最好是能選擇一種不同的載入選項以支援其他搜尋引擎。Bing 同樣支援 JavaScript 渲染，但規模尚不明確。就我所看到的情況，Yandex 和 Baidu 的支援比較有限，而其他許多瀏覽器幾乎不支援 JavaScript。

動態渲染也是一個選項，它為特定的使用者代理所用。這基本上是一種變通的辦法，但是對於搜尋引擎爬蟲甚至是社交媒體爬蟲來說是有用的。社交媒體爬蟲不會執行 JavaScript，因此除非你預先對內容進行渲染，否則像開放圖譜標籤這樣的內容是不可見的。

如果你使用的是老舊的 AJAX 抓取模式，請注意它已經被充用，可能不再受支援。

這裡提到的許多步驟，SEO 從業人員已經司空見慣了，但是可能略有不同。

站內 SEO

所有對於內容、標題標籤、元描述、替代屬性、元爬蟲標籤等在內的 SEO 規劃在這裡仍然適用。WordPress網站可以使用SEO外掛實現這些優化點。

在使用 JavaScript 網站時，我反覆發現的問題是標題和描述可能會被複用，而圖片的替代屬性經常沒有新增。

允許抓取

不要遮蔽資源的訪問。Google 需要能夠訪問並下載資源才可以恰當地渲染頁面。在 robots.txt 檔案中，最簡單的允許資源被訪問的方式是新增：

User-Agent: Googlebot
Allow: .js
Allow: .css<

連結

更新內容時更改連結。我已經提到過歷史 API，但是你應該知道在 JavaScript 框架中，他們有一張路由表可以讓你對映到友好的連結上。你不會想要用井字標籤（#）來選擇路徑的。這對於 Vue 或者一些早期版本的 Angular 來說尤其是個問題。對於像 abc.com/#something 這樣的連結來說，所有 # 之後的內容基本會被伺服器無視。要在 Vue 中解決這個問題，你可以和開發者一起做以下改變：

Vue router: 
Use ‘History’ Mode instead of the traditional ‘Hash’ Mode.

const router = new VueRouter ({ mode: ‘history’, router: [] //the array of router links )}

Duplicate content 重複內容

在使用 JavaScript 的情況下，可以會有多個連結指向同一則內容，這就會導致重複內容的問題。這可能是由大寫、識別符號、帶有識別符號的變數等引起。因此，以下所有內容都可以存在：

domain.com/Abc
domain.com/abc
domain.com/123
domain.com/?id=123

解決方式很簡單。選擇一個你想要被索引的版本，並設定canonical權威內容標籤（WordPress主題一般會預設帶此標籤）。

SEO “外掛” 型別選項

對於 JavaScript 框架而言，他們通常被稱作模組。通過搜尋框架名+模組名，如“React Helmet”，你可以找到像 React, Vue 和 Angular 這樣熱門框架的許多模組。元標籤、Helmet 以及 Head 都是比較流行的模組，他們的功能相似，允許你設定 SEO 所需的熱門標籤。

錯誤頁面

因為 JavaScript 框架並不是伺服器端載入的，他們並不能反饋像 404 頁面這樣的伺服器錯誤。對於錯誤頁面而言，你會有如果兩個不同的選項：

1. 使用 JavaScript 重定向到一個確實會返回 404 狀態程式碼的頁面。
2. 向頁面新增一個 noindex 標籤，並顯示一些錯誤資訊，如“404 頁面未找到”。這會被視作一個軟 404 頁面，返回的實際程式碼是 200 正常。

無論是網站404錯誤還是網站站外連結失效，小編都建議站長對這些型別的URL進行檢測，以便及時發現網站內部或者出站連結出現無法訪問的情況，然後正確地處理這些URL。（1）Smart SEO Tool外掛提供404錯誤及失效URL檢測；（2）搜尋推送收錄外掛提供死鏈連結清單生成；（3）此外，使用Spider Analyser外掛對網站搜尋引擎蜘蛛訪問統計分析，也是非常有必要的。

Sitemap 網站地圖

JavaScript 框架一般都有路由表來對映友好的連結。這些路由表通常都有一個額外的模組，可以用來生成網站地圖。你可以通過搜尋你的系統名 + router sitemap 來找到這些他們，如“Vue router sitemap”。許多渲染方案可能也會有網站地圖選項。同樣，只需要找到你使用的系統，並搜尋系統名 + sitemap —— 如 “Gatsby sitemap”，你一定可以找到已有的解決方案。

關於網站Sitemap的生成，WordPress網站一般是使用外掛來實現，比如Smart SEO Tool外掛的sitemap地圖功能模組：

Redirects 重定向

SEO 從業人員對 301/302 重定向很熟悉，他們是伺服器端的。但是 JavaScript 一般在客戶端執行。這沒有什麼問題，因為 Google 會循著重定向來處理這個頁面。重定向仍然可以傳遞像google pagerank這樣的訊號。你通常可以通過查詢 “window.location.href” 來找出程式碼中的這些重定向。

國際化

不同的框架通常都有若干模組選項支援像 hreflang 這樣的國際化需要用到的特性。他們通常被移植到不同的系統中，包含 i18n、intl，或者像 Helmet 這樣的模組可以被多次在 header 中使用來增加所需的標籤。

懶載入

通常有一些模組可以用來處理懶載入。如果你還沒有注意到，在使用 JavaScript 框架的時候，總有一些模組可以用來處理所有你需要做的事情。Lazy 和 Suspense 是最流行的懶載入模組。你會想要懶載入圖片，但是注意不要懶載入內容。JavaScript 可以做到（懶載入內容），但是這意味著它不會被搜尋引擎正確提取。

結語

JavaScript 是一個需要正確使用的工具，而不是 SEO 從業人員應該害怕的東西。希望這篇文章可以幫助你理解如何更好的使用它，但是不要害怕接觸你的開發人員，去和他們一起工作，問他們問題。他們將是幫助你為搜尋引擎優化 JavaScript 網站的最大盟友。

（via ahrefs.com 譯者，Alex Wang，文章有改動）