JavaScript SEO 基礎：Google 如何處理 JavaScript 網頁

By

來源聲明：本文為〈Understand the JavaScript SEO Basics〉（Google Search Central，Google，2026-03-04）的繁體中文翻譯，已依中文閱讀習慣調整斷句，並在文末另加「編輯解讀」。原文以 Creative Commons 姓名標示 4.0 授權。原文連結：<https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics>。程式碼依原文保留。文中「編輯解讀」為本站觀點，不屬於原文。

如果你懷疑 JavaScript 讓頁面或其中一部分內容沒有出現在 Google 搜尋裡，可以用 Google 的疑難排解指南處理。這份文件說明 Google 搜尋如何處理 JavaScript，以及如何讓 JavaScript 網頁應用更適合 Google 搜尋。

JavaScript 是網頁平台的重要部分，它讓網頁變成能做很多事的應用平台。讓這些應用能被 Google 搜尋找到，有助於帶來新使用者，也讓舊使用者在搜尋你的內容時再次進來。Google 搜尋會用持續更新的 Chromium 執行 JavaScript，但仍有一些地方可以優化。

Google 如何處理 JavaScript

Google 處理 JavaScript 網頁應用主要有三個階段：抓取、轉譯、建立索引。

Googlebot 會把頁面排進抓取佇列和轉譯佇列。從外面看不出一個頁面是在等抓取，還是在等轉譯。Googlebot 從抓取佇列取出網址、發出 HTTP 請求之前，會先看你是否允許抓取。它讀取 robots.txt1。若該網址不允許抓取，Googlebot 就不會請求它，也會跳過這個網址。Google 搜尋不會轉譯被擋住的檔案，也不會轉譯被擋住的頁面上的 JavaScript。

接著 Googlebot 從 HTML 連結的 href 找出其他網址，加入抓取佇列。若不想被發現連結，使用 nofollow。

用 JavaScript 把連結插進 DOM 是可以的，只要這些連結遵守可抓取連結的最佳做法2。

對傳統網站或伺服器端轉譯的頁面，HTTP 回應裡的 HTML 已經包含全部內容，抓取並解析就夠了。有些 JavaScript 網站用應用外殼：最初的 HTML 沒有真正的內容，Google 必須先執行 JavaScript，才看得到 JavaScript 產生的頁面內容。

除非 robots meta 標籤或標頭告訴 Google 不要索引，否則 HTTP 狀態碼為 200 的頁面都會進入轉譯佇列。頁面可能在佇列裡等幾秒，也可能更久。Google 的資源允許時，無頭 Chromium 會轉譯頁面並執行 JavaScript。Googlebot 再從轉譯後的 HTML 找連結、加入抓取佇列，也用這份轉譯後的 HTML 建立索引。

只要 HTTP 狀態碼是 200，頁面就會進入轉譯佇列，不管頁面上有沒有 JavaScript。若狀態碼不是 200，例如 404 的錯誤頁，轉譯可能會被略過。

伺服器端轉譯或預先轉譯仍然很好。它讓網站對使用者和爬蟲都更快，而且不是所有爬蟲都會執行 JavaScript。

用獨特的標題和摘要描述頁面

獨特、描述清楚的 title 和 meta description，幫助使用者很快判斷哪一則結果符合他的目的。你可以用 JavaScript 設定或修改 meta description 和 title。

設定標準網址

rel="canonical" 連結標籤幫助 Google 找到頁面的標準網址3。可以用 JavaScript 設定標準網址，但不要用它把標準網址改成和原始 HTML 裡寫的不一樣。最好用 HTML 設定。若一定要用 JavaScript，設定的值必須和原始 HTML 相同。若 HTML 裡無法設定，可以只用 JavaScript 設定，並不要在原始 HTML 裡再放一個。

撰寫相容的程式

瀏覽器提供很多 API，JavaScript 也變得很快。Google 對支援哪些 API 和語法有一些限制。要確認程式和 Google 相容，請遵循 JavaScript 問題的疑難排解指南。

若你偵測到缺少某個需要的瀏覽器 API，建議使用差異化提供和 polyfill。有些瀏覽器功能無法用 polyfill 補上，請查看 polyfill 文件裡的限制。

使用有意義的 HTTP 狀態碼

Googlebot 用 HTTP 狀態碼判斷抓取時是否出錯。

找不到的頁面用 404，需要登入的頁面用 401，告訴 Googlebot 這一頁不能抓取或不能索引。頁面換了網址時，也用狀態碼讓索引更新。

避免單頁應用的軟 404

在用戶端轉譯的單頁應用裡，路由常常做在瀏覽器端。這時很難回傳有意義的 HTTP 狀態碼。要避免軟 404，可以用下面其中一種做法：

  • 用 JavaScript 轉到一個伺服器會回 404 的網址，例如 /not-found。
  • 用 JavaScript 在錯誤頁加上 noindex 的 meta 標籤。

轉址做法的範例：

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product);
  } else {
    window.location.href = '/not-found';
  }
})

noindex 做法的範例。這個例子假設 HTML 裡還沒有別的 robots meta 標籤：

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product);
  } else {
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

用 History API，不要用網址片段

Google 只能發現 a 元素上帶 href 的連結。

單頁應用若在用戶端切換畫面，請用 History API。不要用網址片段載入不同內容。下面這種 #/products 是不好的做法，因為 Googlebot 無法穩定解析這些網址：

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

改成路徑，並用 History API 更新網址和瀏覽器歷史：

function goToPage(event) {
  event.preventDefault();
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1);
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl);
}
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

連結本身仍應是 <a href="/products"> 這種可抓取的寫法。

用 JavaScript 插入標準網址時只留一個

Google 不建議用 JavaScript 做這件事，但轉譯時可以讀到插入的 rel="canonical"。錯誤的實作可能產生多個標準網址，或改掉已經存在的那一個。互相衝突或多個 rel="canonical" 可能帶來意想不到的結果。

小心使用 robots meta 標籤

可以用 robots meta 標籤阻止 Google 索引頁面或跟隨連結4。例如：

<meta name="robots" content="noindex, nofollow">

也可以用 JavaScript 加入或修改這個標籤。例如 API 沒有回傳內容時，把目前頁面設成 noindex。

Google 遇到 noindex 時，可能略過轉譯和 JavaScript 執行。因此用 JavaScript 把原本的 noindex 改掉或移除，可能不會如預期運作。若希望頁面被索引，不要在原始頁面程式碼裡放 noindex。

使用長效快取

Googlebot 會積極快取，以減少網路請求和資源用量。網頁轉譯服務可能忽略快取標頭，因而用到過期的 JavaScript 或 CSS。把內容指紋放進檔名可以避開這個問題，例如 main.2bb85551.js。指紋依檔案內容而變，更新後檔名就會不同。

使用結構化資料

頁面上的結構化資料可以用 JavaScript 產生 JSON-LD 再插入頁面。請測試實作，避免出錯。

網頁元件的做法

Google 支援網頁元件。轉譯時會把 shadow DOM 和 light DOM 的內容攤平。這表示 Google 只能看到轉譯後 HTML 裡看得到的內容。請用複合式搜尋結果測試或網址檢查工具查看轉譯後的 HTML。

若內容在轉譯後的 HTML 裡看不到，Google 就無法索引它。

一個做法是用 Slot，讓 light DOM 的內容出現在 shadow DOM 裡，轉譯之後兩者都能被索引。原文的元件會輸出 "Hello World, this is shadow DOM content."，以及插槽裡的 light DOM 段落。

修正圖片和延遲載入的內容

圖片很佔頻寬，也影響效能。常見做法是延遲載入，快看到圖片時才載入。若要讓延遲載入對搜尋友善，請遵循 Google 的延遲載入指南5。

常見問題

  • Google 會執行網頁上的 JavaScript 嗎？會。Google 搜尋使用持續更新的 Chromium 來執行 JavaScript。流程是先抓取，再轉譯，然後用轉譯後的 HTML 建立索引。
  • 頁面被 robots.txt 擋住時，Google 還會轉譯裡面的 JavaScript 嗎？不會。robots.txt 不允許抓取時，Googlebot 不會請求該網址，也不會轉譯被擋的檔案或頁面裡的 JavaScript。
  • 可以用 JavaScript 把 noindex 拿掉，讓頁面被索引嗎？不要這樣做。Google 遇到 noindex 時可能略過轉譯和 JavaScript。若希望頁面被索引，原始 HTML 裡就不要放 noindex。
  • 單頁應用的網址可以用 #/products 這種片段嗎？文件不建議用片段載入不同內容。Google 只能穩定地從帶 href 的 a 標籤發現連結。應改用 History API，讓網址是 /products 這種路徑。
  • 軟 404 在單頁應用裡怎麼避免？兩種做法：用 JavaScript 轉到伺服器會回 404 的網址，或在錯誤頁用 JavaScript 加上 noindex 的 meta 標籤。

編輯解讀

一句話重點：Google 會執行 JavaScript，但那是抓取之後的第二步。重要內容、連結和標準網址最好先出現在伺服器回傳的 HTML 裡。

這對你的網站意味著什麼：

  • 商品說明、價格和主要連結不要只放在點擊之後才插入的區塊。
  • 單頁應用的網址使用 /products 這種路徑，不要用 #/products。
  • 不存在的商品要回真正的 404，或在錯誤狀態加上 noindex。不要留下一個 HTTP 200 的空白頁。
  • 原始 HTML 裡已經是 noindex 的頁面，不要再靠 JavaScript 把它拿掉。
  • 用網址檢查工具看轉譯後的 HTML，確認 shadow DOM 裡的文字真的出現了。

適用與不適用的情境：適合檢查 JavaScript 網站為什麼搜尋裡缺內容、缺連結或出現軟 404。不適合拿來查某一個瀏覽器 API Google 支不支援，那在疑難排解指南裡。

需要注意的限制：這是 Google 對自家轉譯流程的說明，頁面在 2026-03-04 更新。它沒有保證轉譯會在幾秒內完成，只說可能等幾秒，也可能更久。範例網域和程式是說明用的，不是測速結果。

延伸閱讀：

名詞與資料來源

1. robots.txt — Google Search Central：〈Introduction to robots.txt〉 <https://developers.google.com/search/docs/crawling-indexing/robots/intro>（檢索日期：2026-09-30） 2. 可抓取的連結 — Google Search Central：〈Links crawlable〉 <https://developers.google.com/search/docs/crawling-indexing/links-crawlable>（檢索日期：2026-09-30） 3. 標準網址 — Google Search Central：〈How to specify a canonical URL with rel="canonical" and other methods〉 <https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls>（檢索日期：2026-09-30） 4. robots meta 標籤 — Google Search Central：〈Robots meta tag, data-nosnippet, and X-Robots-Tag specifications〉 <https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag>（檢索日期：2026-09-30） 5. 延遲載入 — Google Search Central：〈Fix lazy-loaded content〉 <https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading>（檢索日期：2026-09-30）

Similar Posts