所有你需要知道的關於 JavaScript SEO

已發表: 2020-08-07

問任何程序員，他們都會告訴你他們對 JavaScript 的看法。

自發布以來，JavaScript (JS) 一直是全球 Web 開發人員使用的最流行的編程語言。 Stack Overflow 最近對 Web 開發人員進行的一項調查顯示，JavaScript 連續八年成為最受歡迎的編程語言。

JS 允許 Web 開發人員輕鬆構建大型 Web 應用程序。 它具有動態更新頁面並使它們更具交互性的非凡能力。 此外，AngularJS、ReactJS、Vue 和 NodeJS 等 JavaScript 框架顯著減少了開發基於 JS 的網站所需的時間和精力。 難怪 JavaScript 是全球 96% 網站的基礎。

然而，基於 JS 的網站似乎與 Google 有著又愛又恨的關係。 JavaScript 可以輕鬆控制和更改 HTML 以使網頁動態和交互，從而改善網站的用戶體驗。 然而，搜索引擎發現處理 JS 很困難，導致大部分 JavaScript 內容未編入索引。

讓我們更深入地研究一下為什麼 JavaScript 會使 Google 的工作變得更加艱難，以及您可以做些什麼來使您的 JS 內容對機器人友好。

Javascript 如何影響 SEO？

JavaScript 允許頁面快速加載，提供豐富的界面，並且易於實現； 但是，瀏覽器的流動性會根據用戶交互而變化，這使得搜索引擎難以理解頁面並將價值與內容相關聯。

搜索引擎在呈現帶有 JavaScript 內容的網頁時有其局限性。 Google 對頁面執行初始抓取，並將找到的內容編入索引。 當資源可用時，機器人會返回在這些頁面上呈現 JS。 這意味著依賴於 JavaScript 的內容和鏈接存在不被搜索引擎看到的風險，可能會損害網站的 SEO。

關於 js seo 的推文

資源

但是，Google 知道 JavaScript 會繼續存在！ 因此，這家搜索引擎巨頭將其大部分資源用於幫助搜索專業人士優化他們基於 JS 的網站。

看看這個來自 Google 的關於 JavaScript SEO 的視頻系列，它可以幫助你的 JS 內容在網上更容易被發現。


SEO 專家需要以穀歌欣賞的格式來處理他們基於 JS 的網頁。 稍微了解一下搜索引擎如何處理 JS 內容，就可以讓 JavaScript 和 SEO 協同工作以提高您網站的排名。

搜索引擎如何處理 JavaScript？

谷歌機器人處理 JS 與非 JS 頁面不同。 機器人分三個階段處理它們，即爬行、索引和渲染。 借助以下 Google Developers 的圖表，可以輕鬆理解這些階段：

搜索引擎優化

資源

爬行

此階段是關於您的內容的可發現性。 這是一個複雜的過程，涉及子過程，即種子集、爬取隊列和調度、URL 重要性等。

首先，Google 的機器人將頁面排隊等待抓取和呈現。 機器人使用解析模塊來獲取頁面，跟踪頁面上的鏈接，並渲染直到頁面被索引。 該模塊不僅呈現頁面，還分析源代碼並提取 <a href=”...”> 片段中的 URL。

機器人檢查 robots.txt 文件以查看是否允許爬行。 如果 URL 被標記為不允許，機器人會跳過它。 因此，檢查 robots.txt 文件以避免錯誤至關重要。

渲染

向用戶顯示站點的內容、模板和其他功能的過程稱為呈現。 有服務器端渲染和客戶端渲染。

服務器端渲染 (SSR)

顧名思義，在這種類型的渲染中，頁面填充在服務器上。 每次訪問站點時，頁面都會在服務器上呈現並發送到瀏覽器。

換句話說，當用戶或機器人訪問網站時，他們會收到 HTML 標記形式的內容。 這通常有助於 SEO，因為 Google 不必單獨呈現 JS 來訪問內容。 SSR 是傳統的渲染方法，在帶寬方面可能會被證明是昂貴的。

客戶端渲染

客戶端渲染是一種相當新的渲染類型，它允許開發人員構建他們的網站，完全在瀏覽器中使用 JavaScript 渲染。 因此，客戶端渲染允許直接在瀏覽器中動態創建每個路由，而不是每個路由都有一個單獨的 HTML 頁面。 雖然這種類型的渲染最初很慢，因為它需要對服務器進行多輪處理，但一旦請求完成，通過 JS 框架的體驗就會很快。

回到抓取頁面後發生的情況，機器人會識別需要呈現的頁面並將它們添加到呈現隊列中，除非原始 HTML 代碼中的機器人元標記告訴 Googlebot 不要索引該頁面。

機器人元

頁面會在渲染隊列中停留幾秒鐘，但可能需要一些時間，具體取決於可用資源的數量。

資源

一旦資源允許，Google Web Rendering Service (WRS) 就會呈現、解析和編譯頁面並在頁面上執行 JavaScript。 bot 再次解析呈現的 HTML 以獲取鏈接，並將它找到的 URL 排隊以進行爬行。 呈現的 HTML 用於索引頁面。

索引

一旦 WRS 從外部 API 和數據庫中獲取數據，Google 上的 Caffeine 索引器就可以索引內容。 此階段涉及分析 URL、了解頁面上的內容及其相關性，以及將發現的頁面存儲在索引中。

如何為 SEO 優化 JavaScript

JavaScript 如果實施不正確，可能會破壞您的 SEO。 遵循這些 Javascript SEO 最佳實踐來提高您網站的排名。

堅持您的頁面搜索引擎優化工作

用於優化頁面以幫助它們在搜索引擎上排名的所有頁面 SEO 規則仍然適用。 優化您的標題標籤、元描述、圖像中的 alt 屬性和元機器人標籤。 獨特的描述性標題和元描述幫助用戶和搜索引擎輕鬆識別內容。 注意搜索意圖和語義相關關鍵字的戰略佈局。

此外，最好有一個對 SEO 友好的 URL 結構。 在少數情況下，網站會在 URL 中實現 pushState 更改，從而使 Google 在嘗試查找規範的 URL 時感到困惑。 確保檢查 URL 是否存在此類問題。

確保您的 JavaScript 出現在 DOM 樹中

當頁面的 DOM 已充分加載時，JavaScript 呈現工作。 DOM 或文檔對像模型顯示頁面內容的結構以及每個元素之間的關係。 您可以在頁面代碼上瀏覽器的“檢查元素”中找到它。 DOM 是動態生成頁面的基礎。

如果您的內容可以在 DOM 中看到，那麼您的內容很可能正在被 Google 解析。 檢查 DOM 將幫助您確定搜索引擎機器人是否正在訪問您的頁面。

如果元機器人標籤最初包含 noindex，機器人會跳過渲染和 JS 執行。 Googlebot 不會在頁面上觸發事件。 如果在 JS 的幫助下將內容添加到頁面中，則應在頁面加載後完成。 如果在單擊按鈕、滾動頁面等時將內容添加到 HTML，則不會被索引。

最後，在使用結構化數據時，使用 JavaScript 生成所需的 JSON-LD 並將其註入到頁面中。 順便說一句，了解您應該從一開始就實施的頂級頁面 SEO 技巧。

避免阻止搜索引擎訪問 JS 內容

為了避免 Google 無法找到 JS 內容的問題，一些網站管理員使用了一個稱為 cloaking 的過程，該過程將 JS 內容提供給用戶，但對爬蟲隱藏它。 但是，這種方法被認為違反了 Google 的網站管理員指南，您可能會因此受到處罰。 相反，要努力確定關鍵問題並使 JS 內容可供搜索引擎訪問。

有時，站點主機可能會被無意阻止，從而阻止 Google 看到 JS 內容。 例如，如果您的網站有幾個用於不同目的的子域，則每個子域都應該有一個單獨的 robots.txt，因為子域被視為一個單獨的網站。 在這種情況下，您需要確保這些 robots.txt 指令都不會阻止搜索引擎訪問渲染所需的資源。

使用相關的 HTTP 狀態碼

Google 的抓取工具在抓取網頁時使用 HTTP 狀態代碼來識別問題。 因此，您應該使用有意義的狀態代碼來通知機器人是否不應抓取頁面或將其編入索引。 例如，您可以使用 301 HTTP 狀態告訴機器人頁面已移動到新 URL，從而允許 Google 相應地更新其索引。

請參閱此 HTTP 狀態代碼列表並了解何時使用它們：

http狀態碼

資源

修復重複內容

當 JavaScript 用於網站時，相同的內容可能有不同的 URL。 這會導致重複的內容問題，通常是由大小寫、ID 或帶有 ID 的參數引起的。 確保找到此類頁面，選擇要編入索引的原始/首選 URL，並設置規範標籤以避免搜索引擎混淆。

修復延遲加載的內容和圖像

網站速度對 SEO 至關重要。 延遲加載是一種這樣的 UX 最佳實踐，它可以延遲加載非關鍵或不可見的內容，從而減少初始頁面加載時間。 但除了使頁面加載更快之外，您還需要確保搜索引擎爬蟲可以訪問您的內容。 這些爬蟲不會執行您的 JavaScript 或滾動頁面來驅動延遲加載的內容，從而對您的 SEO 產生負面影響。

此外，圖像搜索也是額外自然流量的來源。 因此，如果您有延遲加載的圖像，搜索引擎將不會選擇它們。 雖然延遲加載對用戶來說非常有用，但需要小心操作以防止機器人丟失潛在的關鍵內容。

使用 JS SEO 工具

有大量可用的工具可以幫助您識別和修復 JavaScript 代碼的問題。 這裡有一些您可以利用的優勢。

  • URL 檢查功能。 此工具可在 Google Search Console 中找到。 它可以向您顯示 Google 的抓取工具是否能夠索引或抓取您的網頁。
  • 搜索引擎爬蟲。 這些工具使您可以有效地測試和監控搜索引擎如何抓取您的頁面。
  • 頁面速度洞察。 Google 的 Page Speed Insights 分享有關您網站性能的詳細信息，並就如何改進它提供建議。
  • 站點：指揮部。 此工具可幫助您查看 Google 是否已正確索引您的內容。 您需要做的就是在 Google 上輸入此命令 - site: [website URL] “text snippet or query”

JavaScript SEO 挑戰

到目前為止，您對搜索引擎如何處理 JavaScript 內容以及如何將您的網站設置在 SEO 成功的快車道上已經有了一個清晰的認識。 但是，SEO 專家和網站管理員還面臨其他一些挑戰。 其中大部分源於他們在優化基於 JavaScript 的網站時所犯的錯誤

1. 未縮小的 JavaScript 和 CSS 文件

如果您使用 SEO 工具來審核您的 JS 網站，您可能會遇到有關未縮小的 Javascript 和 CSS 問題的警告。 在一段時間內，JS 和 CSS 文件被不必要的代碼行、空格、源代碼中的註釋以及託管在外部服務器上所拖累，從而使您的網站變慢。 確保刪除不必要的行、空格和評論，以減少頁面的加載時間、提高參與率並提升 SEO。

2. 在 URL 中使用哈希

還記得 John Mueller 在 SEO 活動中所說的關於錯誤 URL 的內容嗎？

“對我們來說，如果我們在那裡看到某種散列，那就意味著那裡的其餘部分可能無關緊要。 在大多數情況下，當我們嘗試索引內容時，我們會放棄它……”


然而，一些基於 JS 的站點會生成帶有哈希的 URL。 這對您的 SEO 來說可能是災難性的。 確保您的網址對 Google 友好。 它絕對不應該是這樣的：

www.example.com/#/about -us 或

www.example.com/about#us

3.不檢查內部鏈接結構

Google 需要正確的 <a href> 鏈接才能在您的網站上查找 URL。 此外，如果在單擊按鈕後將鏈接添加到 DOM，機器人將無法看到它們。 大多數網站管理員錯過了這些要點，導致他們的 SEO 受到影響。

注意提供傳統的“href”鏈接，使機器人可以訪問它們。 使用網站審核工具 SEOprofiler 檢查您的鏈接，以改進您網站的內部鏈接結構。

查看 Tom Greenway 在 Google I/O 會議期間的演示文稿，以獲取有關正確鏈接結構的指導：

結論

毫無疑問，JavaScript 擴展了網站的功能。 然而，JavaScript 和搜索引擎並不總是在一起。 JavaScript 會影響搜索引擎抓取和索引網站的方式，從而影響其排名。 因此，搜索專業人員必須了解搜索引擎機器人如何處理 JS 內容，並採取必要的步驟來確保 JavaScript 適合他們的 SEO 策略。

如果您有一個基於 JS 的網站並且無法在 Google 上找到您的內容，那麼是時候解決這些問題了。 使用本文中分享的信息和技巧來優化 JavaScript 以實現 SEO 並提高您的回報。