JavaScript SEO權威指南(2021版)

 

Web處於前端開發的黃金時代,JavaScript和技術SEO正在復興。 作為一家屢獲殊榮的數字營銷代理商的技術SEO專家和網站開發愛好者,我想基於行業最佳實踐和我自己的代理商經驗,分享對現代JavaScript SEO的看法。 在本文中,您將學習如何在2021年優化基於JS的網站進行搜索。

什麼是JavaScript SEO?

JavaScript SEO是技術SEO的一門學科,其重點是優化使用JavaScript構建的網站以提高搜索引擎的可見性。 它主要涉及:

  • 優化通過JavaScript注入的內容,以供搜索引擎進行爬網,渲染和索引。
  • 預防,診斷和故障排除基於JavaScript框架(例如React,Angular和Vue)構建的網站和SPA(單頁應用程序)的排名問題。
  • 通過鏈接最佳做法,確保搜索引擎可以找到網頁。
  • 縮短頁面解析和執行JS代碼以簡化用戶體驗(UX)的頁面加載時間。

JavaScript對SEO是好是壞?

這取決於! JavaScript對現代Web至關重要,它使構建網站可擴展且易於維護。 但是,JavaScript的某些實現可能不利於搜索引擎的可見性。

JavaScript如何影響SEO?

JavaScript會影響以下對SEO至關重要的頁面元素和排名因素:

  • 呈現內容
  • 鏈接
  • 延遲加載的圖像
  • 頁面加載時間
  • 元數據

什麼是JavaScript驅動的網站?

當我們談論基於JavaScript構建的網站時,我們並不是在簡單地向HTML文檔添加一層JS交互性(例如,向靜態網頁添加JS動畫時)。 在這種情況下,基於JavaScript的網站是指通過JavaScript將核心或主要內容注入DOM的時間。

App Shell模型。

該模板稱為應用程序外殼,是漸進式Web應用程序(PWA)的基礎。 接下來,我們將對此進行探討。

如何檢查網站是否使用JavaScript構建

您可以使用技術查詢工具快速檢查網站是否建立在JavaScript框架上 BuiltWith or Wappalyzer。 您也可以在瀏覽器中“檢查元素”或“查看源代碼”以檢查JS代碼。 您可能會發現的流行JavaScript框架包括:

核心內容的JavaScript SEO

這是一個示例:現代Web應用程序是基於Angular,React和Vue等JavaScript框架構建的。 JavaScript框架允許開發人員快速構建和擴展交互式Web應用程序。 讓我們看一下Angular.js的默認項目模板,Angular.js是Google製作的流行框架。

在瀏覽器中查看時,它看起來像一個典型的網頁。 我們可以看到文本,圖像和鏈接。 但是,讓我們更深入地研究一下代碼:

現在我們可以看到該HTML文檔幾乎完全沒有任何內容。 頁面的主體中只有app-root和一些腳本標籤。 這是因為此單頁應用程序的主要內容是通過JavaScript動態注入到DOM中的。 換句話說,此應用程序依靠JS加載關鍵頁面內容!

潛在的SEO問題:呈現給用戶但未呈現給搜索引擎機器人的任何核心內容都可能會造成嚴重問題! 如果搜索引擎無法完全抓取您的所有內容,那麼您的網站可能會被競爭對手所忽視。 我們將在後面詳細討論。

用於內部鏈接的JavaScript SEO

除了將內容動態注入DOM之外,JavaScript還可以影響鏈接的可爬網性。 Google通過抓取在頁面上找到的鏈接來發現新頁面。

最佳做法是,Google特別建議您使用帶有href屬性的HTML錨標記鏈接頁面,並包括超鏈接的描述性錨文本:

但是,Google還建議開發人員不要依賴其他HTML元素(例如div或span)或JS事件處理程序進行鏈接。 據稱,這些被稱為“偽”鏈接,通常不會被抓取。 Google官方指南:

儘管有這些準則,但獨立, 第三方研究 建議Googlebot可以抓取JavaScript鏈接。 儘管如此,根據我的經驗,我發現將鏈接保留為靜態HTML元素是一種最佳實踐。

潛在的SEO問題:如果搜索引擎無法抓取並跟踪指向您的關鍵頁面的鏈接,則您的頁面可能會丟失指向它們的有價值的內部鏈接。 內部鏈接可幫助搜索引擎更有效地抓取您的網站並突出顯示最重要的頁面。 最壞的情況是,如果您的內部鏈接實施不正確,那麼Google可能很難找到您的新頁面(在XML網站地圖之外)。

JavaScript SEO用於延遲加載圖像

JavaScript還可能影響延遲加載的圖像的可爬網性。 這是一個基本示例。 此代碼段用於通過JavaScript延遲加載DOM中的圖像:

Googlebot支持延遲加載,但是它不像人類用戶訪問網頁時那樣“滾動”。 取而代之的是,Googlebot只是在抓取網絡內容時將其虛擬視口的大小調整為更長。 因此,“滾動”事件偵聽器永遠不會觸發,爬蟲也永遠不會呈現內容。

這是更多SEO友好代碼的示例:

此代碼顯示,當任何觀察到的元素變為可見時,IntersectionObserver API會觸發回調。 它比滾動事件監聽器更靈活,更強大,並且得到了現代Googlebot的支持。 這段代碼之所以有效,是因為Googlebot如何調整其視口大小以“查看”您的內容(請參見下文)。

您還可以在瀏覽器中使用本機延遲加載。 Google Chrome支持此功能,但請注意,它仍是一項實驗性功能。 最壞的情況是,它會被Googlebot忽略,無論如何,所有圖片都會加載:

Google Chrome中的本機延遲加載。

潛在的SEO問題:與未加載核心內容類似,確保Google能夠“查看”頁面上的所有內容(包括圖像)非常重要。 例如,在具有多行產品列表的電子商務站點上,延遲加載圖像可以為用戶和機器人提供更快的用戶體驗!

Javascript SEO提高頁面速度

Javascript還可以影響頁面加載時間,這是Google移動優先索引中的官方排名因素。 這意味著緩慢的頁面可能會損害搜索排名。 我們如何幫助開發人員緩解這種情況?

  • 縮小JavaScript
  • 將非關鍵JS推遲到DOM中呈現主要內容之後
  • 內聯關鍵JS
  • 在較小的有效載荷中提供JS

潛在的SEO問題:網站運行緩慢會給所有人(甚至搜索引擎)帶來糟糕的用戶體驗。 Google本身會推遲加載JavaScript,以節省資源,因此,務必確保對提供給客戶的所有內容進行編碼和有效交付,以保護排名。

用於元數據的JavaScript SEO

另外,請務必注意,利用路由器包(如react-router或vue-router)的SPA在路由器視圖之間導航時,必須採取一些額外的步驟來處理諸如更改元標記之類的事情。 通常使用Node.js包(例如vue-meta或react-meta-tags)來處理。

什麼是路由器視圖? 以下是通過五個步驟在單頁應用程序中鏈接到不同“頁面”的方法:

  1. 當用戶訪問React網站時,GET請求將發送到服務器以獲取./index.html文件。
  2. 然後,服務器將index.html頁面發送到客戶端,其中包含啟動React和React Router的腳本。
  3. 然後,將Web應用程序加載到客戶端。
  4. 如果用戶單擊鏈接以進入新頁面(/ example),則會向服務器發送新URL的請求。
  5. React Router在請求到達服務器之前對其進行攔截,並處理頁面本身的更改。 這是通過本地更新渲染的React組件並更改URL客戶端來完成的。

換句話說,當用戶或機器人遵循React網站上URL的鏈接時,不會為他們提供多個靜態HTML文件。 但是,託管在根./index.html文件中的React組件(如頁眉,頁腳和正文內容)只是被重新組織以顯示不同的內容。 這就是為什麼它們被稱為單頁應用程序!

潛在的SEO問題:因此,使用像 反應頭盔 用於確保在瀏覽SPA時為用戶提供每個頁面或“視圖”的唯一元數據。 否則,搜索引擎可能會為每個頁面抓取相同的元數據,或更糟糕的是根本沒有!

這在更大範圍內如何影響SEO? 接下來,我們需要學習Google如何處理JavaScript。

Google如何處理JavaScript?

為了了解JavaScript如何影響SEO,我們需要了解GoogleBot抓取網頁時到底發生了什麼:

  1. 給予
  2. 指數

首先,Googlebot逐頁抓取其隊列中的URL。 搜尋器通常使用移動用戶代理向服務器發出GET請求,然後服務器發送HTML文檔。

然後,Google決定呈現頁面主要內容所需的資源。 通常,這意味著只爬網靜態HTML,而不爬網任何鏈接的CSS或JS文件。 為什麼?

根據Google網站站長的說法,Googlebot已發現了大約 130萬億 網頁。 大規模渲染JavaScript可能會花費很大。 批量下載,解析和執行JavaScript所需的強大計算能力非常強大。

這就是Google可能將JavaScript渲染推遲到以後的原因。 隨著計算資源的可用性,所有未執行的資源都將排隊等待Google Web Rendering Services(WRS)處理。

最後,Google將在執行JavaScript后索引所有呈現的HTML。

Google抓取,呈現和索引過程。

換句話說,Google分兩次搜索和索引內容:

  1. 索引的第一波,或由網絡服務器發送的靜態HTML的即時爬網
  2. 第二波索引編制,或延遲抓取通過JavaScript呈現的任何其他內容
Google Wave索引。 資料來源:Google I / O'18

最重要的是,依賴於要呈現的JS的內容可能會在Google進行爬網和索引時遇到延遲。 過去通常需要幾天甚至幾週的時間。 例如,Googlebot過去一直在過時的Chrome 41渲染引擎上運行。 但是,近年來,他們已經大大改善了其網絡爬蟲。

Googlebot原為 最近升級 到2019年6月發布的Chromium無頭瀏覽器的最新穩定版本。這意味著他們的Web搜尋器現在是“常綠的”並且與ECMAScript 6(ESXNUMX)和更高版本或最新版本的JavaScript完全兼容。

因此,如果Googlebot現在可以從技術上運行JavaScript,為什麼我們仍然擔心索引問題?

簡短的答案是抓取預算。 這是一個概念,因為計算資源有限,Google限制了其對給定網站進行爬網的頻率。 我們已經知道Google推遲將JavaScript稍後執行以節省檢索預算。

雖然減少了抓取和呈現之間的延遲,但不能保證Google會在其Web Rendering Services隊列中實際執行排隊等待的JavaScript代碼。

以下是Google可能實際上未運行您的JavaScript代碼的一些原因:

  • 在robots.txt中被阻止
  • 超時時間
  • 錯誤

因此,當核心內容依賴JavaScript而不由Google呈現時,JavaScript可能會導致SEO問題。

實際應用程序:用於電子商務的JavaScript SEO

電子商務網站是通過JavaScript注入的動態內容的真實示例。 例如,在線商店通常通過JavaScript將產品加載到類別頁面上。

JavaScript可以使電子商務網站動態更新其類別頁面上的產品。 這是有道理的,因為由於銷售,他們的庫存處於不斷變化的狀態。 但是,如果Google不執行您的JS文件,則它實際上能夠“看到”您的內容嗎?

對於依賴在線轉換的電子商務網站,如果其產品沒有被Google編入索引,可能會造成災難性的後果。

如何測試和調試JavaScript SEO問題

您可以立即採取以下步驟來主動診斷任何潛在的JavaScript SEO問題:

  1. 使用Google的網站站長工具可視化頁面。 這有助於您從Google的角度查看頁面。
  2. 使用網站搜索運算符檢查Google的索引。 通過手動檢查Google,確保所有JavaScript內容均已正確編入索引。
  3. 使用Chrome的內置開發工具進行調試。 將Google“看到”(源代碼)的內容與用戶看到(呈現代碼)的內容進行比較和對比,並確保它們總體上保持一致。

您還可以使用方便的第三方工具和插件。 我們將很快討論這些。

谷歌網站管理員工具

確定Google在呈現網頁時是否遇到技術困難的最佳方法是使用Google網站站長工具測試您的網頁,例如:

Google移動友好測試。

目的只是視覺上比較和對比您在瀏覽器中可見的內容,並查找工具中顯示的內容是否有差異。

這兩個Google網站管理員工具都使用與Google相同的常綠Chromium渲染引擎。 這意味著它們可以為您提供Googlebot抓取您的網站時實際“看到”的準確視覺呈現。

也有第三方技術SEO工具,例如 Merkle的獲取和渲染 工具。 與Google的工具不同,此Web應用程序實際上為用戶提供了整個頁面的完整屏幕截圖。

網站:搜索運算符

另外,如果您不確定JavaScript內容是否已被Google編入索引,則可以使用site:Google上的搜索運算符進行快速檢查。

複製並粘貼您不確定Google會在site:運算符和您的域名之後建立索引的所有內容,然後按回車鍵。 如果您可以在搜索結果中找到您的頁面,那麼不用擔心! Google可以對您的內容進行爬網,渲染和索引。 如果不是,則意味著您的JavaScript內容可能需要一些幫助才能獲得可見性。

這是在Google SERP中的樣子:

Chrome開發工具

您可以用來測試和調試JavaScript SEO問題的另一種方法是Chrome網絡瀏覽器中提供的開發人員工具的內置功能。

右鍵單擊網頁上的任意位置以顯示選項菜單,然後單擊“查看源代碼”以在新選項卡中查看靜態HTML文檔。

右鍵單擊後,您還可以單擊“檢查元素”以查看DOM中實際加載的內容,包括JavaScript。

檢查元素。

比較和對比這兩種觀點,以查看是否僅在DOM中加載了任何核心內容,而在源中是否未對其進行硬編碼。 還有第三方Chrome擴展程序可以幫助您完成此操作,例如 Web開發 克里斯·佩德里克(Chris Pederick)或 查看渲染的源 Jon Hogg的插件。

如何解決JavaScript呈現問題

診斷JavaScript呈現問題後,如何解決JavaScript SEO問題? 答案很簡單:通用Javascript,也稱為“同構” JavaScript。

這是什麼意思? 通用或同構在這裡是指能夠在服務器或客戶端上運行的JavaScript應用程序。

為了避免將JS卸載給用戶和搜尋器,JavaScript有幾種不同的實現比客戶端呈現更易於搜索。

  • 服務器端渲染(SSR)。 這意味著在服務器上為每個請求執行JS。 一種實現SSR的方法是使用Node.js庫,例如 木偶戲。 但是,這會對服務器造成很大的壓力。
  • 混合渲染。 這是服務器端渲染和客戶端渲染的組合。 核心內容在發送到客戶端之前先在服務器端呈現。 任何其他資源都將卸載到客戶端。
  • 動態渲染。 在這種解決方法中,服務器將檢測發出請求的客戶端的用戶代理。 例如,它隨後可以將預渲染的JavaScript內容髮送到搜索引擎。 任何其他用戶代理都需要在客戶端呈現其內容。 例如,Google網站站長推荐一種流行的開源解決方案,名為 Renderton 用於實現動態渲染。
  • 增量靜態重新生成,或在站點已部署後更新靜態內容。 可以使用類似的框架來完成 Next.js 用於React或 Nuxt.js Vue。 這些框架具有一個構建過程,該過程會將JS應用程序的每個頁面預呈現為靜態資產,您可以從S3存儲桶等內容中為其提供服務。 這樣,您的站點無需服務器管理即可獲得服務器端渲染的所有SEO優勢!

這些解決方案均有助於確保當搜索引擎機器人提出對HTML文檔進行爬網的請求時,它們會收到完整呈現的網頁版本。 但是,其中一些可能在構建Web基礎結構之後極難實現,甚至無法實現。 這就是為什麼在設計下一個Web應用程序的體系結構時牢記JavaScript SEO最佳實踐很重要的原因。

請注意,對於基於內容管理系統(CMS)構建的網站,該網站已經預先提供了大多數內容,例如WordPress或Shopify,這通常不是問題。

關鍵要點

本指南提供了一些一般的最佳實踐和對JavaScript SEO的見解。 但是,JavaScript SEO是一個複雜而細微的研究領域。 我們建議您通讀 Google的官方文件故障排除指南 了解更多JavaScript SEO基礎知識。 有興趣了解更多有關優化JavaScript網站以進行搜索的信息嗎? 在下面發表評論。

原始文章