JavaScript SEO 是什麼？9 技巧教你優化網頁

一、JavaScript SEO 是什麼？

（一）JavaScript SEO 定義

JavaScript SEO 是搜尋引擎優化 (SEO) 的一個專門領域，目的是解決網站中使用 JavaScript 技術對搜尋引擎爬取和索引的影響。

隨著現代網頁開發中 JavaScript 的廣泛應用，許多網站依賴 JavaScript 動態生成內容。然而，這可能會導致搜尋引擎在爬取和索引過程中遇到挑戰，因此需要特定的 SEO 策略來應對。

（二）為什麼 JavaScript SEO 很重要？

💡 搜尋引擎爬取與處理 JavaScript 的挑戰

• 並非所有搜尋引擎都能正確處理 JavaScript。即使是 Google，也需要先執行 JavaScript 才能獲取動態內容。

• 如果網站的核心內容依賴於 JavaScript 渲染而未被搜尋引擎抓取，可能會導致內容無法被索引。

💡 影響搜尋排名與用戶體驗

• 動態內容未被正確索引可能降低搜尋排名。
• 無法完整處理 JavaScript 可能影響網頁的加載速度，進而影響用戶體驗和 SEO 表現。

Google 爬取網站 3 步驟！優化 JavaScript 前必看！

如果網站使用 JavaScript 技術建置，就需要了解 Google 處理 JavaScript 網頁的方式，確保網站內容能被順利抓取與索引，而 Google 的 JavaScript 網頁處理過程分成 3 個主要階段：Crawl → Render → Index，接下來將依序說明 ⤵

✏️ 檢索

Googlebot 會首先從檢索佇列中提取網址，確認是否允許檢索。這一步依賴於網站的 robots.txt 設定，如果 robots.txt 禁止檢索，Googlebot 將跳過該網址，甚至不會對其發送 HTTP 要求。

對於允許檢索的網址，Googlebot 則會解析 HTML 回應，提取頁面中的連結，並將這些連結新增至檢索佇列。

✏️ 轉譯

網頁被 Googlebot 提取後，會進入轉譯佇列。在轉譯過程中，Google 使用無頭 Chromium 執行 JavaScript，生成經過轉譯的 HTML。

如果網頁內容主要依賴於 JavaScript 動態生成，Google 必須先執行這些指令碼才能獲取完整的頁面內容。

接下來，Googlebot 接著解析轉譯後的 HTML，提取其中的新連結，並重新將這些連結排入檢索佇列。

✏️ 建立索引

當 Google 完成轉譯後，會依據產生的 HTML 內容判斷頁面資訊，並將符合條件的內容加入搜尋索引資料庫中，只有被成功建立索引的網頁，才有機會出現在搜尋結果頁面。

不過，網頁是否能被索引，仍會受到部分設定影響，例如頁面若設定 meta robots 標記，搜尋引擎就可能不會將該頁面納入索引。

另外，索引也可能受到搜尋引擎資源分配的影響，有些頁面可能需要等待一段時間，才會完成轉譯與索引流程。

如果想了解更多資訊可以參考Google 官方資料

JavaScript SEO 怎麼做？9 個做法任你挑選

當網站大量使用 JavaScript 建立內容時，如果沒有做好 SEO 設定，搜尋引擎可能無法順利抓取或理解頁面內容，因此，可以從以下 9 個方向著手優化，讓搜尋引擎更容易讀取與索引網站資訊。

🔍 程式碼分割

將 JavaScript 程式碼按需加載，使用工具（如 Webpack）進行分割，確保僅在必要時加載相關內容，減少初始加載時間。

🔍 非同步載入腳本

將非關鍵的 JavaScript 設為 async 或 defer，確保它們不阻塞主要內容的渲染。

🔍 最小化與壓縮 JavaScript

使用工具（如 Terser 或 UglifyJS）壓縮 JavaScript 檔案，減少代碼大小並提升加載速度。

🔍 採用快取機制

配置長效快取，讓瀏覽器存儲靜態資源，減少後續的網路請求次數和伺服器負擔。

🔍 伺服器端轉譯（SSR）

使用伺服器端轉譯（如 Next.js 或 Nuxt.js），將完整內容預先生成靜態 HTML，讓搜尋引擎和用戶能快速獲取內容。

以上就是 Javascript SEO 的介紹，如果您想要了解更多 SEO 資訊，或者想要獲取免費的 SEO 健檢報告，都可以透過下方黃色按鈕與 Welly 團隊最專業的 SEO 公司聯繫！

🔍 正確設置 Canonical URL

在 JavaScript 網站中，可能會因為不同網址參數或路徑產生多個相似頁面。此時可以透過 rel="canonical" 標記 指定網頁的標準版本，幫助 Google 判斷應該索引哪一個頁面，避免出現重複內容問題。

一般來說，建議直接在 HTML 中設定 canonical，這是最穩定的做法。如果需要透過 JavaScript 設定，也應確保 canonical 指向與原始 HTML 相同的網址，避免在載入過程中被改成其他頁面，影響搜尋引擎判斷。

🔍 避免單頁應用程式出現 soft 404 錯誤

在使用單頁應用程式（Single Page Application, SPA） 的網站中，頁面內容通常透過 JavaScript 在用戶端動態轉譯，如果頁面不存在時仍回傳正常的狀態碼，就可能被搜尋引擎判定為 soft 404。

為了避免這種情況，可以在頁面不存在時，使用 Google 提供的 2 種作法，這樣搜尋引擎就能正確判斷該頁面不存在，避免被誤判為無效內容。

• 透過 JavaScript 重新導向至伺服器到並且回傳 404 狀態碼（例如 /not-found）
• 將 <meta name="robots" content="noindex"> 新增至發生錯誤的網頁

🔍 謹慎使用 robots.txt 與 noindex 設定

可以使用 JavaScript 在網頁上新增 meta robots 標記、 robots.txt 來控制搜尋引擎是否抓取或索引某些頁面，不過在設定時需要特別小心，避免誤封鎖重要內容。

例如，如果頁面設定了 noindex，搜尋引擎可能會直接跳過後續的轉譯與 JavaScript 執行流程，導致頁面無法被索引。

🔍 使用結構化資料幫助搜尋引擎理解內容

如果網站想要使用結構化資料標記，可以透過 JavaScript 產生 JSON-LD，並將其插入頁面，讓搜尋引擎更容易理解頁面內容，例如文章、產品或評價資訊，進而提升搜尋結果中的呈現方式。

JavaScript SEO 檢查工具推薦：協助檢查網站抓取與轉譯狀況

在優化 JavaScript SEO 時，除了調整網站設定與結構之外，也建議透過工具定期檢查網站是否能被搜尋引擎順利抓取與轉譯。

（一）Google Search Console（GSC）

Google Search Console 是最基本也最重要的 SEO 工具，可以查看網站頁面的索引狀態、抓取問題以及搜尋表現，如果某些頁面因 JavaScript 影響而未被索引，也能在這裡發現相關提示。

主要會使用 GSC 的「網址審查工具」（又稱「URL inspection」），實際查看 Google 實際抓取與轉譯後的頁面內容，以及確認搜尋引擎是否能看到 JavaScript 載入的內容。

（二）Screaming Frog SEO Spider

Screaming Frog 是協助頁面和網站優化的 SEO 檢測工具，可以模擬搜尋引擎抓取網站的過程，並且透過啟用 JavaScript 渲染功能，可以檢查網站在轉譯後的內容、內部連結與頁面結構，幫助發現潛在的 SEO 問題。

以上就是 JavaScript SEO 的介紹，如果您想要了解更多 SEO 資訊，或者想要獲取免費的 SEO 健檢報告，都可以透過下方黃色按鈕與 Welly 團隊最專業的 SEO 公司聯繫！