了解用於 SEO 的 JavaScript 渲染（+6 種簡單的測試方法！）

JavaScript 是一種功能強大的編程語言，可以增強用戶體驗並為網站添加交互性。

但問題是：搜索引擎並不總是與 JavaScript 相處融洽。

了解 JavaScript 呈現如何影響 SEO 很重要。 然後，您可以採取必要的步驟來確保您的網站獲得應有的知名度。

在本指南中，我們將介紹：

• JavaScript 渲染需要了解的方面
• 六種簡單的方法來測試搜索引擎如何查看您的網站
• JavaScript 網站的實用 SEO 技術

什麼是 JavaScript，渲染是什麼意思？

JavaScript 是一種流行的編程語言，用於創建動態和交互式網頁。

當谷歌抓取一個網站時，它需要了解該網站的內容和結構以對其頁面進行索引。

它使用稱為“JavaScript 渲染”的過程來實現這一點。 Google 執行 JavaScript 代碼，然後分析生成的 HTML 內容。

圖片來源

這允許搜索引擎索引動態生成的內容。

然而，這個過程並不完美。 與純 HTML 頁面相比，Google 抓取頁面上的 JavaScript 內容所花費的時間是其 9 倍。

有時搜索引擎不會完全或正確地執行 JavaScript ，留下有價值的頁面元素未被爬蟲檢測到並可能抑制排名。

用於 SEO 的 JavaScript 有哪些問題？

主要問題之一是搜索引擎可能難以抓取和呈現由 JavaScript 生成的內容。

如果 Google 無法抓取頁面的某個元素，則該部分內容將不會添加到 Google 的索引中。

在某些情況下，這可能是一個頁面的全部內容，這意味著沒有排名機會！

無法抓取的頁面不僅會阻止其排名，而且還會抑製網站的一般搜索引擎優化。

如果 Google 由於 JavaScript 呈現失敗而將多個頁面視為相同，則它可能會錯誤地將它們視為重複內容。 這可能會導致不必要的規範化或重要頁面被爬蟲完全忽略，這可能對您的整體 SEO 不利。

爬蟲無法呈現的頁面上的任何鏈接也不會被抓取，因此該頁面的鏈接資產不會傳遞給內部或外部資源。

由於爬蟲遺漏了重要的內部鏈接，搜索引擎對您網站導航的理解也可能會出現偏差，同時重要頁面也有可能被視為孤立頁面。

JavaScript 渲染失敗可能引起的其他一些 SEO 問題包括：

• 圖片從索引中刪除，減少了圖片流量。
• 動態生成的頁面標題可能會被忽略，從而影響搜索排名和點擊率。

為什麼在 SEO 項目中使用 JavaScript？

因此，JavaScript 可能會導致很多 SEO 問題。

考慮到這些潛在的問題，您可能想知道為什麼要在 SEO 項目中使用 JavaScript 。

好吧，實際上有很多原因讓您想要將它用於 Web 開發項目。

JavaScript 可以顯著增強您網站上的用戶體驗和參與度。 您可以使用它來創建幻燈片、動畫和其他交互式功能。

它還可以提高網站的性能和速度。 您可以使用延遲加載、代碼拆分、緩存和服務工作者來優化您的站點。

您還可以根據用戶行為、偏好和位置創建動態和個性化的內容。

超過 98% 的網站使用 JavaScript 是有原因的。

網絡已經從純 HTML 轉移——作為 SEO，您可以接受它。 向 JS 開發人員學習並與他們分享 SEO 知識。 JS不會消失。

- John Mueller（官方）· #StaplerLife (@JohnMu) 2017 年 8 月 8 日

您只需要正確使用 JavaScript 並測試任何潛在問題！

測試 SEO JavaScript 渲染的 6 種簡單方法

測試 JavaScript 呈現可以幫助您識別可能阻止 Google 抓取您的內容並將其編入索引的潛在問題。

這裡有六個簡單的方法來做到這一點：

1. 測試 Chrome 在 JavaScript 被阻止時是否可以加載頁面

第一個調用端口是從瀏覽器中禁用 JavaScript。

如果您的瀏覽器無法完全顯示內容，那麼將 JavaScript 呈現到 HTML 文檔中一定存在問題。

在 Google Chrome 中加載頁面後，點擊地址欄中的掛鎖並選擇“站點設置”。

然後，向下滾動到 JavaScript 並選擇“阻止”。

當您返回標籤頁時，Chrome 會建議重新加載頁面。 單擊重新加載。

你還能看到內容嗎？

如果頁面完全消失，如上例所示，則頁面的 JavaScript 呈現顯然存在問題。

Google 可能無法抓取內容。

在某些情況下，頁面上只會缺少某些功能，例如廣告橫幅。

您希望看到您希望被抓取的所有內容都可見。 例如，如果 Google 無法抓取整個段落，它將錯過關鍵信息，從而危及頁面的排名潛力。

不僅僅是頁面的正文內容處於危險之中，或者......

2. 檢查 SEO 分析工具如何查看頁面

使用快速簡便的 SEO 分析工具是識別 JavaScript SEO 問題的更簡單方法。

通過模仿抓取過程，您可以了解搜索引擎如何理解頁面。

單擊地址欄中的圖標並再次恢復為允許 Chrome 中的 JavaScript。

現在，使用 SEOMinion 等瀏覽器插件分析網頁的頁面 SEO。

側邊欄將啟動。 現在，選擇“分析頁面搜索引擎優化”。

使用生成的報告並將其與您在頁面上實際看到的內容進行比較：

• 頁面的字數是多少？
• 所有標題標籤都存在嗎？
• 圖片數量是否正確？
• 根據分析工具，是否有任何其他元素出現不同？

在這個例子中，我們可以看到頁面的字數只有一個字，這將是一篇非常薄的文章！

頁面上只有一個標題標籤（H1），看起來效果不錯。 但是，如果有任何 H2 或 H3 標籤，它們可能不會通過，因為字數表明內容正文沒有正確呈現。

該頁面有三張圖片，但此工具顯示只有一張是可見的。

下載圖像文件時，我們發現這是站點徽標（從標題中拉出）。

如果您看到的內容與報告“看到的”內容髮生衝突，則這表明無法正確抓取頁面正文中的內容。

3.谷歌移動友好測試

您還可以使用 Google 的移動設備友好測試工具來檢查網頁呈現的 HTML。

輸入您要檢查的網址，您將在結果頁面的右側看到該頁面的屏幕截圖。

這是 Googlebot 如何查看您的頁面的直觀表示。 您可以將屏幕截圖與您的頁面進行比較，並檢查是否缺少元素。

如果您發現任何不規則的地方，請檢查呈現的 HTML 並確定屏幕截圖中遺漏的任何內容是否也從 HTML 代碼中遺漏。

注意：谷歌將在 2023 年底刪除此工具。不過不用擔心，因為 SEO Kristina Azarenko 有一個很好的解決方法，無論是現在還是將來：

谷歌將在今年年底放棄移動友好測試工具。

很長一段時間以來，許多技術 SEO 一直在使用移動設備友好測試工具來檢查頁面呈現的 HTML。 當您無法訪問 Google Search Console 的 URL 檢查工具時，它非常方便……pic.twitter.com/AcSh7J7jhu

- Kristina Azarenko (@azarchick) 2023 年 6 月 12 日

這讓我們完美地走向……

4.谷歌豐富的結果工具

Google 的 Rich Results Test 對 Googlebot 如何呈現 JavaScript 文件提供了類似的見解。

輸入您的 URL 並運行測試以查看顯示 Googlebot 如何查看頁面的屏幕截圖。

5. Google Search Console 網址檢查

您可以使用 Google Search Console 網址檢查工具來檢查您網站上特定網址的 JavaScript 渲染。

該工具將提供有關頁面索引狀態和 JavaScript 呈現的詳細信息。

它將指示 JavaScript 是否成功執行或有任何問題。

注意與 JavaScript 執行相關的錯誤。 這些會影響搜索引擎如何理解和索引您的內容。

6.使用專業的渲染工具

為 SEO 測試 JavaScript 渲染的另一種有效方法是使用專業渲染工具。

這些工具模擬搜索引擎爬蟲如何與 JavaScript 交互並呈現網頁。

免費工具：

• Fetch & Render——該工具模仿渲染過程（類似於 Google 檢查工具），但允許您使用不同的用戶代理進行測試。
• 預渲染測試工具允許您比較來自不同爬蟲的預渲染信息。 只需輸入您的 URL 並選擇一個用戶代理，它就可以讓您在呈現過程之前比較向不同爬蟲提供的內容。

付費工具：

今天有很多非常強大的技術搜索引擎優化軟件，這對大型或企業級項目特別有用。

以下所有工具都包含用於測試 JavaScript 渲染的工具：

• 保定
• 噴射章魚
• 盧瑪
• 尖叫青蛙
• 抓取
• 塞姆拉什

無論您使用哪種工具，請確保正確呈現以下元素以確保可抓取性和可索引性，並確保您的內容從技術角度獲得最佳排名：

• 在頁面上複製
• 圖片
• 規範標籤
• 標題和元描述
• 元機器人標籤
• 結構化數據
• Hreflang
• 標題標籤
• 視頻
• 交互式元素中的內容（即手風琴功能）

如何使您的 JavaScript 網站對 SEO 友好

您可以實施多個 JavaScript SEO 最佳實踐來幫助搜索引擎有效地抓取和索引您的網頁。

鏈接

為您的內部和外部鏈接使用帶有 href 屬性的 HTML 錨標記。

搜索引擎將 <a> 標籤識別並理解為鏈接。 Googlebot 提取這些鏈接並將它們添加到抓取隊列中。

使用描述性錨文本幫助 Google 理解鏈接頁面的內容。 避免使用通用短語，選擇自然的、關鍵字豐富的錨文本，以準確代表目標頁面。

圖片

包括圖片的描述性 alt 標籤。 Alt 標籤提供描述圖像內容的替代文本。

這有助於搜索引擎了解圖像與周圍內容的相關性。

還建議為圖像使用描述性和關鍵字豐富的文件名。

您可以使用結構化數據標記（如 schema.org 的 ImageObject）來提供有關圖像的額外上下文。

服務器端渲染或動態渲染

使用 Angular 和 React 等 JavaScript 框架構建的網站默認為客戶端呈現。

網頁的呈現發生在用戶的瀏覽器中。

問題是搜索引擎爬蟲可能無法理解內容——他們看到的是空白頁面。

另一種方法是使用服務器端呈現 (SSR) 生成 JavaScript 密集型頁面的 HTML 版本。

這允許 Google 直接訪問和索引預呈現的 HTML 內容。

但是，SSR 可能很昂貴且佔用大量資源。

解決方法是使用動態渲染。

這是將預呈現頁面提供給搜索引擎機器人，而普通用戶仍然體驗由 JavaScript 生成的頁面的完全動態版本。

掌握 JavaScript 搜索引擎優化

SEO 超越了優化關鍵字和保護反向鏈接。 它還涉及考慮在您進入技術搜索引擎優化時如何呈現您的網站並將其呈現給搜索引擎爬蟲。

通過確保 JavaScript 呈現不會妨礙抓取工具的可訪問性，您可以提高搜索結果中的可見性並為您的頁面帶來有機流量。

我們知道您為確保良好的鏈接和為您自己和您的客戶創建有影響力的內容付出了多少努力； 不要因為糟糕的 SEO 和 JavaScript 問題而白白付出努力！