診斷常見 JavaScript SEO 問題的指南

老實說，JavaScript 和 SEO 並不總是能很好地結合在一起。 對於某些 SEO 來說，這個主題可能感覺像是籠罩在復雜的面紗中。

好吧，好消息：當你剝開層層之後，許多基於 JavaScript 的 SEO 問題首先回到了搜索引擎爬蟲如何與 JavaScript 交互的基本原理。

因此，如果您了解這些基礎知識，您就可以深入研究問題，了解其影響，並與開發人員合作解決重要問題。

在本文中，我們將幫助診斷基於 JS 框架構建網站時的一些常見問題。 另外，我們將詳細介紹每個技術 SEO 在渲染方面所需的基礎知識。

簡而言之渲染

在我們討論更具體的內容之前，讓我們先談談大局。

為了讓搜索引擎理解由 JavaScript 提供支持的內容，它必須抓取並呈現頁面。

問題是，搜索引擎只有這麼多資源可供使用，因此它們必須有選擇性地選擇何時值得使用它們。 即使爬蟲將頁面發送到渲染隊列，也不一定會渲染頁面。

如果它選擇不呈現頁面，或者無法正確呈現內容，則可能會出現問題。

這取決於前端如何在初始服務器響應中提供 HTML。

當在瀏覽器中構建 URL 時，React、Vue 或 Gatsby 等前端將生成頁面的 HTML。 在發送 URL 等待渲染之前，爬蟲會檢查服務器是否已提供該 HTML（“預渲染”HTML），以便查看結果內容。

任何預渲染 HTML 是否可用取決於前端的配置方式。 它將通過服務器或客戶端瀏覽器生成 HTML。

服務端渲染

這個名字說明了一切。 在 SSR 設置中，爬蟲會獲得完全渲染的 HTML 頁面，而不需要額外的 JS 執行和渲染。

因此，即使頁面未呈現，搜索引擎仍然可以抓取任何 HTML，將頁面置於上下文中（元數據、副本、圖像），並了解其與其他頁面的關係（麵包屑、規範 URL、內部鏈接）。

客戶端渲染

在 CSR 中，HTML 與所有 JavaScript 組件一起在瀏覽器中生成。 在 HTML 可供爬網之前，JavaScript 需要呈現。

如果渲染服務選擇不渲染髮送到隊列的頁面，則爬蟲將無法獲取副本、內部 URL、圖像鏈接，甚至元數據。

因此，搜索引擎幾乎沒有上下文來了解 URL 與搜索查詢的相關性。

注意：初始 HTML 響應中可能包含混合的 HTML，也可能包含需要執行 JS 才能呈現（顯示）的 HTML。 這取決於幾個因素，其中最常見的包括框架、各個站點組件的構建方式以及服務器配置。

JavaScript SEO 工具包

當然有一些工具可以幫助識別與 JavaScript 相關的 SEO 問題。

您可以使用瀏覽器工具和 Google Search Console 進行大量調查。 以下是構成可靠工具包的候選列表：

• 查看源代碼：右鍵單擊頁面，然後單擊“查看源代碼”以查看該頁面的預渲染 HTML（初始服務器響應）。
• 測試實時 URL（URL 檢查）：在 Google Search Console 的 URL 檢查選項卡中查看所呈現頁面的屏幕截圖、HTML 和其他重要詳細信息。 （通過將“查看源代碼”中的預渲染 HTML 與在 GSC 中測試實時 URL 所渲染的 HTML 進行比較，可以發現許多渲染問題。）
• Chrome 開發者工具：右鍵單擊頁面並選擇“檢查”以打開用於查看 JavaScript 錯誤等的工具。
• Wappalyzer：通過安裝這個免費的 Chrome 擴展程序，查看構建任何網站的堆棧並尋求特定於框架的見解。

常見的 JavaScript SEO 問題

問題 1：預渲染 HTML 普遍不可用

除了前面提到的對爬行和上下文化的負面影響之外，還存在搜索引擎呈現頁面所需的時間和資源的問題。

如果爬蟲選擇將 URL 通過渲染過程，它將最終進入渲染隊列。 發生這種情況是因為爬蟲可能會感覺到預渲染和渲染的 HTML 結構之間存在差異。 （如果沒有預渲染的 HTML，這很有意義！）

無法保證 URL 等待 Web 渲染服務的時間。 讓 WRS 及時呈現的最佳方法是確保現場有關鍵的權威信號來說明 URL 的重要性（例如，在頂部導航中鏈接、許多內部鏈接、作為規範引用）。 這變得有點複雜，因為還需要抓取權威信號。

在 Google Search Console 中，可以了解您是否向關鍵頁面發送了正確的權限信號或導致它們陷入困境。

轉至頁面 > 頁面索引 > 已爬網 – 當前未編入索引，並查找列表中是否存在優先級頁面。

如果他們在等候室，那是因為 Google 無法確定他們是否重要到值得在其上花費資源。

常見原因

默認設置

大多數流行的前端都是“開箱即用”設置為客戶端渲染，因此默認設置很可能是罪魁禍首。

如果您想知道為什麼大多數前端默認使用 CSR，那是因為性能優勢。 開發人員並不總是喜歡 SSR，因為它會限制加快站點速度和實現某些交互元素（例如，頁面之間的獨特轉換）的可能性。

單頁應用程序

如果站點是單頁面應用程序，則它完全用 JavaScript 封裝，並在瀏覽器中生成頁面的所有組件（也稱為所有內容），並在客戶端呈現，並且無需重新加載即可提供新頁面。

這會產生一些負面影響，其中最重要的可能是頁面可能無法被發現。

這並不是說不可能以對 SEO 更友好的方式設置 SPA。 但很可能，需要進行一些重要的開發工作才能實現這一目標。

問題2：爬蟲無法訪問某些頁面內容

讓搜索引擎呈現 URL 是很棒的事情，前提是所有元素都可供抓取。 如果正在渲染頁面，但頁面的某些部分無法訪問怎麼辦？

例如，SEO 進行內部鏈接分析，發現很少甚至沒有發現多個頁面上鍊接的 URL 報告的內部鏈接。

如果該鏈接未顯示在“測試實時 URL”工具渲染的 HTML 中，則該鏈接可能是在 Google 無法訪問的 JavaScript 資源中提供的。

為了縮小罪魁禍首的範圍，最好在各個 URL 的頁面上尋找缺失的頁面內容或內部鏈接的共性。

例如，如果它是出現在每個產品頁面的同一部分中的常見問題解答鏈接，那麼這對於幫助開發人員縮小修復範圍大有幫助。

常見原因

JavaScript 錯誤

讓我們從這裡的免責聲明開始。 您遇到的大多數 JavaScript 錯誤對於 SEO 來說並不重要。

因此，如果您繼續尋找錯誤，向您的開發人員提供一長串錯誤清單，並以“這些錯誤是什麼？”開始對話，他們可能不會很好地接受它。

通過談論問題來了解“為什麼”，這樣他們就可以成為 JavaScript 專家（因為他們就是！）。

話雖如此，存在語法錯誤可能導致頁面的其餘部分無法解析（例如“渲染阻塞”）。 發生這種情況時，渲染器無法分解各個 HTML 元素、構建 DOM 中的內容或理解關係。

一般來說，這些類型的錯誤是可以識別的，因為它們在瀏覽器視圖中也有某種影響。

除了視覺確認之外，還可以通過右鍵單擊頁面、選擇“檢查”並導航到“控制台”選項卡來查看 JavaScript 錯誤。

獲取搜索營銷人員信賴的每日新聞通訊。

正在處理...請稍候。

訂閱

查看條款。

內容需要用戶交互

關於渲染要記住的最重要的事情之一是 Google 無法渲染任何需要用戶與頁面交互的內容。 或者，更簡單地說，它無法“點擊”東西。

為什麼這很重要？ 想想我們值得信賴的老朋友，手風琴下拉菜單，以及有多少網站使用它來組織產品詳細信息和常見問題解答等內容。

根據手風琴的編碼方式，如果在 JS 執行之前未填充下拉列表中的內容，Google 可能無法呈現該內容。

要進行檢查，您可以“檢查”頁面，並查看“隱藏”內容（單擊手風琴後顯示的內容）是否在 HTML 中。

如果不是，則意味著 Googlebot 和其他抓取工具在頁面的呈現版本中看不到此內容。

問題 3：網站的某些部分未被抓取

如果 Google 抓取您的頁面並將其發送到隊列，則它可能會也可能不會呈現您的頁面。 如果它不抓取頁面，那麼這個機會就不可能了。

要了解 Google 是否正在抓取頁面，“抓取統計信息”報告可以派上用場：“設置”>“抓取統計信息” 。

選擇爬網請求：確定 (200) 可查看過去三個月內 200 個狀態頁面的所有爬網實例。 然後，使用過濾來搜索單個 URL 或整個目錄。

如果網址沒有出現在抓取日誌中，則 Google 很可能無法發現這些頁面並抓取它們（或者它們不是 200 個頁面，這是一個完全不同的問題）。

常見原因

內部鏈接不可抓取

鏈接是爬蟲到達新頁面的路標。 這就是孤立頁面成為如此大問題的原因之一。

如果您有一個鏈接良好的網站，並且在網站審核中看到彈出孤立頁面，則很可能是因為這些鏈接在預渲染的 HTML 中不可用。

一種簡單的檢查方法是訪問鏈接到所報告的孤立頁面的 URL。 右鍵單擊該頁面，然後單擊“查看源代碼”。

然後，使用 CMD + f 搜索孤立頁面的 URL。 如果它沒有出現在預渲染的 HTML 中，但在瀏覽器中渲染時出現在頁面上，請跳到第四個問題。

XML 站點地圖未更新

XML 站點地圖對於幫助 Google 發現新頁面並了解在抓取中優先考慮哪些 URL 至關重要。

如果沒有 XML 站點地圖，則只能通過以下鏈接來發現頁面。

因此，對於沒有預渲染 HTML 的網站，過時或丟失的站點地圖意味著等待 Google 渲染頁面、跟踪其他頁面的內部鏈接、對它們進行排隊、渲染它們、跟踪它們的鏈接等等。

根據您使用的前端，您可能可以訪問可以創建動態 XML 站點地圖的插件。

它們通常需要定制，因此 SEO 認真記錄不應出現在站點地圖中的任何 URL 以及其原因的邏輯非常重要。

通過您最喜歡的 SEO 工具運行站點地圖，這應該相對容易驗證。

問題4：內部鏈接缺失

爬蟲內部鏈接不可用不僅是一個潛在的發現問題，也是一個公平問題。 由於鏈接將 SEO 權益從參考 URL 傳遞到目標 URL，因此它們是提高頁面和域權限的重要因素。

主頁上的鏈接就是一個很好的例子。 它通常是網站上最權威的頁面，因此從主頁到另一個頁面的鏈接具有很大的權重。

如果這些鏈接不可抓取，那麼這就有點像一把損壞的光劍。 你最強大的工具之一變得毫無用處（雙關語）。

常見原因

訪問鏈接所需的用戶交互

我們之前使用的手風琴示例只是內容隱藏在用戶交互後面的一個實例。 另一個可能產生廣泛影響的是無限滾動分頁——尤其是對於擁有大量產品目錄的電子商務網站。

在無限滾動設置中，除非用戶滾動超過某個點（延遲加載）或點擊“顯示更多”按鈕，否則產品列表（類別）頁面上的無數產品將不會加載。

因此，即使 JavaScript 被渲染，爬蟲也無法訪問尚未加載的產品的內部鏈接。 然而，由於頁面性能不佳，將所有這些產品加載在一個頁面上會對用戶體驗產生負面影響。

這就是為什麼 SEO 通常更喜歡真正的分頁，其中每個結果頁面都有一個獨特的、可抓取的 URL。

雖然網站有多種方法可以優化延遲加載並將所有產品添加到預呈現的 HTML 中，但這會導致呈現的 HTML 和預呈現的 HTML 之間存在差異。

實際上，這創造了一個理由，將更多頁面發送到渲染隊列，並使爬蟲比他們需要的更加努力地工作 - 我們知道這對 SEO 不利。

至少，請遵循 Google 關於優化無限滾動的建議。

鏈接編碼不正確

當 Google 抓取網站或在隊列中呈現 URL 時，它會下載頁面的無狀態版本。 這就是為什麼使用正確的 href 標籤和錨點（您最常看到的鏈接結構）如此重要的一個重要原因。 爬網程序無法遵循 router、span 或 onClick 等鏈接格式。

可以按照：

• <a href="https://example.com">
• <a href="/relative/path/file">

無法關注：

• <a routerLink="some/path">
• <span href="https://example.com">
• <一>

對於開發人員來說，這些都是對鏈接進行編碼的有效方法。 SEO 的影響是額外的一層背景，了解這些並不是他們的工作，而是 SEO 的工作。

優秀 SEO 工作的一個重要部分是通過文檔為開發人員提供該上下文。

問題 5：元數據丟失

在 HTML 頁面中，標題、描述、規範 URL 和元機器人標籤等元數據都嵌套在 header 中。

出於顯而易見的原因，丟失元數據對 SEO 不利，對 SPA 更是如此。 像自引用規範 URL 這樣的元素對於提高 JS 頁面成功通過渲染隊列的機會至關重要。

在預渲染 HTML 中應出現的所有元素中，head 對於索引來說是最重要的。

幸運的是，這個問題很容易發現，因為無論網站使用哪種 SEO 工具進行衛生報告，它都會因缺少元數據而引發大量錯誤。 然後，你可以通過在源代碼中查找head來確認。

常見原因

元數據工具缺乏或配置錯誤

在 JS 框架中，插件創建頭部並將元數據插入頭部。 （最流行的例子是 React Helmet。）即使已經安裝了插件，通常也需要正確配置。

同樣，在這個領域，所有 SEO 都能做的就是向開發人員提出問題，解釋原因，並密切合作以實現有據可查的驗收標準。

問題 6：資源未被抓取

腳本文件和圖像是渲染過程中必不可少的構建塊。

由於它們也有自己的 URL，因此可抓取性法則也適用於它們。 如果文件被阻止抓取，Google 將無法解析頁面以呈現它。

要查看 URL 是否被抓取，您可以在 GSC 抓取統計信息中查看過去的請求。

• 圖像：轉至設置 > 抓取統計 > 抓取請求：圖像
• JavaScript：轉到設置 > 抓取統計 > 抓取請求：圖像

常見原因

目錄被 robots.txt 阻止

腳本和圖像 URL 通常都嵌套在它們自己的專用子域或子文件夾中，因此 robots.txt 中的禁止表達式將阻止抓取。

一些 SEO 工具會告訴您是否有任何腳本或圖像文件被阻止，但如果您知道圖像和腳本文件的嵌套位置，則很容易發現問題。 您可以在 robots.txt 中查找這些 URL 結構。

您還可以使用 Google Search Console 中的 URL 檢查工具查看渲染頁面時被阻止的任何腳本。 “測試實時 URL”，然後轉到查看測試頁面 > 更多信息 > 頁面資源。

在這裡您可以看到渲染過程中無法加載的所有腳本。 如果某個文件被 robots.txt 阻止，它將被標記為此類。

與 JavaScript 交朋友

是的，JavaScript 可能會帶來一些 SEO 問題。 但隨著 SEO 的發展，最佳實踐正在成為良好用戶體驗的代名詞。

出色的用戶體驗通常取決於 JavaScript。 因此，雖然 SEO 的工作不是編寫 JavaScript 代碼，但我們確實需要知道搜索引擎如何與其交互、呈現和使用它。

通過對 JS 框架中的渲染過程和一些常見 SEO 問題的深入了解，您就可以很好地識別問題並成為開發人員的強大盟友。