使用這些解決方案使您的 JavaScript 網站 SEO 友好

已發表: 2022-01-19

大多數現代網站都包含 JavaScript，使其具有動態性和交互性。 儘管搜索引擎機器人非常聰明，但它們仍然可能不會渲染很多 JavaScript 內容，從而影響頁面排名。

JavaScript 內容很大程度上取決於您的網站如何呈現代碼。

例如，在服務器端渲染中，服務器包含網站的內容。 根據請求，瀏覽器接收完全呈現的 HTML。

但是，在客戶端渲染中，JavaScript 是由瀏覽器使用 DOM 渲染的。

渲染的第三個選項是動態渲染，在客戶端渲染的內容進入瀏覽器，而在服務器端渲染的內容進入搜索引擎。

渲染技術會影響 JS 的渲染方式，從而影響頁面排名。

為確保呈現您的所有網站 JS 代碼，您應該遵循正確的 JavaScript SEO 實踐。 但首先，讓我們了解什麼是 JavaScript SEO。

什麼是 JavaScript 搜索引擎優化？

JavaScript SEO 使搜索引擎可以輕鬆地抓取和索引網站（或網頁）的 JavaScript 代碼（動態內容）。 Google 或任何其他搜索引擎分三個階段處理 JavaScript，即抓取、呈現和索引。 為了讓 Google 完成所有這些工作，JavaScript 內容應該是 SEO 友好的，即可見且可用。

Google 如何處理頁面上的 JavaScript 內容

以下是 Googlebot 處理 JavaScript 所遵循的步驟：

  • 通過 HTTP 請求從爬取隊列中獲取 URL
  • 檢查 robots.txt 文件中網站不允許抓取的 URL
  • 跳過“不允許”的 URL，解析其他 URL 的響應，並將它們添加到爬網隊列
  • 將頁面排入隊列以進行渲染，標記為未編入索引的頁面除外
  • Chromium 呈現頁面、執行 JavaScript 並索引頁面
  • 再次解析呈現的 HTML 以獲取鏈接
  • 將要抓取的 URL 排隊

Google 何時不索引 JavaScript 內容？

谷歌和 JavaScript

如果正確實施，Google 可以索引 JavaScript。 例如，如果您的某些 JS 和 CSS 文件被隱藏，Google 可能無法正確抓取該網站。 同樣，如果原始 HTML 中的鏈接在呈現的 HTML 中不存在，Google 可能會跳過這些鏈接被抓取或編入索引。

此外，如果 JavaScript 沒有直接嵌入 HTML，Google 必須下載該文件以執行。 此外，搜索引擎可能有一個網頁的緩存版本（為了更好的性能），並且頁面上的 JavaScript 可能與它不同步。

由於應該閱讀每一位 JavaScript 代碼，過度使用 JavaScript 可能會降低頁面速度或導致超時錯誤。

為什麼 JavaScript SEO 很重要？

JavaScript SEO 很重要，因為它會影響 Google（或搜索引擎）掃描 SEO 的許多頁面元素和排名因素：

頁面元素潛在的 SEO 問題可能的 SEO 解決方案
渲染內容如果您網站的 robots.txt 文件中阻止了其資源，則搜索引擎（如 Google）無法呈現您的頁面。 此外，Google 無法索引或呈現被阻止或隱藏的 JS 和 CSS 文件。 減少頁面核心內容上的 JavaScript 遵循客戶端呈現的替代方法，如服務器端呈現、動態呈現、混合呈現（客戶端和服務器端的組合）
鏈接如果某些鏈接是內部鏈接，或者當用戶單擊某個 URL 時 JavaScript 會生成鏈接，Google 將無法發現此類鏈接。 使用帶有 href 屬性的錨鏈接，鏈接的描述性錨文本。 <div> 和 <span> 標籤等偽鏈接不會被抓取
元數據除非該站點使用像 vue-meta 這樣的 Node.js 包，否則搜索引擎可能會抓取相同的內容，或者更糟糕的是，每個視圖或頁面都沒有元數據。 使用 Node.js 包，例如 react-helmet、vue-meta、react-meta-tags
延遲加載的圖像搜索引擎爬蟲不會選擇任何標記為延遲加載的內容。 搜索引擎無法滾動查找內容，因此可能永遠不會呈現某些內容。 使用 IntersectionObserver API，一旦 DOM 元素可用，它就會了解它們的可見性和位置。 您還可以使用瀏覽器 (Chrome) 的本機延遲加載功能。
頁面加載時間包含大量 JavaScript 內容的頁面可能會加載緩慢，這會影響其搜索排名。 內聯添加關鍵 JS 代碼，將非關鍵 JS 代碼延遲到呈現主要內容，減少整體 JS 代碼。

JavaScript SEO 的最佳實踐

通過遵循一些最佳實踐，我們可以讓搜索引擎更好地抓取和呈現頁面：

根據定義的網絡標準添加鏈接和圖像

使用ahref標籤而不是onclick 、 #pageurl或window.location.href='/page-url添加所有鏈接。 谷歌可以輕鬆抓取鏈接並關注它們。

 <a href=”http://geekflare.com”>Welcome to Geek world</a>

同樣，使用img src標籤而不是img data-src標籤添加圖像：

 <img src=”myimg.png” />

更喜歡服務器端渲染

確保您的網站內容在除了用戶瀏覽器之外的服務器上可用。

確保您呈現的 HTML 包含您想要顯示的所有重要內容

呈現的 HTML 應具有正確的標題、元機器人、元描述、圖像、結構化數據和規範標籤。

使您的 JavaScript 網站 SEO 友好

javascript代碼

要在您的網頁上測試 JavaScript SEO 的實施，您可以按照以下步驟操作：

  • 了解您的網站使用了多少 JavaScript：為此，您只需在瀏覽器上禁用 JavaScript。 如果您看不到太多內容，則意味著您的網站很大程度上依賴於 JavaScript。
  • 檢查 Googlebot 是否獲取了所有重要的內容和標籤：您可以使用 Google 移動友好型測試工具或富結果測試工具來檢查 Googlebot 如何使用原始 HTML 呈現內容。
  • 您還可以使用 chrome 擴展程序（如查看渲染源代碼）來了解 JavaScript 如何更改頁面並比較源 HTML 和渲染的 HTML。
  • 您可以使用 SEO Pro Chrome 擴展程序檢查呈現的 HTML 上的重要標籤（標題、元描述等）。

結論

在本文中，我們了解了 JavaScript 如何使 SEO 處理變得有點複雜，以及解決在代碼中添加大量 JavaScript 所導致的潛在問題的方法。

我們還看到了一些使您的 JavaScript 網站 SEO 友好的最佳實踐和工具。 Prerender、AngularJS 和 Huckabuy 可以幫助 Google 識別和抓取您的動態內容的其他出色工具。

您還可以查看一些減少網站加載時間的最佳方法。