搜尋觀點

JavaScript 網站的 SEO,不能只看瀏覽器:核心內容真的有被讀到嗎?

網站在瀏覽器中顯示正常,不代表搜尋系統在抓取和渲染後一定取得同樣的內容。若服務文字、主要連結、圖片、FAQ 或結構化資料要等很久才由 JavaScript 補上,或只存在於登入後、點擊後的互動狀態,重要頁面便可能失去可理解的訊號。

JavaScript SEO 由原始 HTML、JavaScript 渲染、可抓取輸出到 URL 驗證組成的檢查流程圖
由原始回應、渲染後輸出到搜尋主控台逐層核對,才知道核心內容在哪一步消失。

先列出不能缺席的核心元素

每個主要 URL 至少列出 title、description、H1、服務正文、內鏈、圖片 alt、canonical、robots 與 Schema。這份清單讓開發與內容團隊知道哪些元素不是視覺細節,而是搜尋與使用者都需要的正式資料。

比較原始 HTML 與渲染後內容

原始回應是否已有重要文字和連結?若依賴 JavaScript,渲染後是否仍有可讀內容、正常 URL 和 HTML 連結?Google 的 JavaScript SEO 基礎 可協助理解抓取與渲染的限制。

不要把導航與內容藏在不可靠的互動後面

只靠按鈕事件、無 href 的元素、無限捲動或需使用者操作才出現的正文,會增加抓取和使用難度。重要服務頁應有直接可存取的 URL;延伸內容可以互動,但不應代替核心說明。

用 URL 檢查確認搜尋系統實際看見甚麼

Search Console 的 URL Inspection 有助核對索引與抓取狀態。你亦可先用 Agent SEO 檢測 抽查公開訊號,再到 SEO 工具 整理後續技術清單。

把檢查拆成「伺服器回應、渲染結果、索引版本」三層

第一層看伺服器首次回傳的 HTML:核心服務文字、H1、重要連結與 canonical 是否已存在;第二層看瀏覽器完成 JavaScript 後的 DOM:資料有沒有載入失敗、按鈕是否變成正常連結、圖片和結構化資料是否仍可用;第三層才以 Search Console 的 URL 檢查確認 Google 最後取得與索引的是甚麼。三層結果不一致時,應先記錄差異所在,而不是隻因畫面看起來正常就關閉問題。

SSR、預先渲染與純前端載入的取捨要看頁面角色

首頁、服務頁、分類頁和可被自然搜尋找到的文章,通常應優先讓核心內容在初始 HTML 或可靠的預先渲染輸出中出現。互動式篩選、登入後資料或次要儀錶板可以由前端載入,但不能取代服務範圍、商品分類、正文和導航。這不是否定單頁應用程式,而是先分清哪些內容是搜尋與新訪客必須立即取得的公開資訊。

常見失敗不是「JavaScript 太多」,而是依賴方式不透明

實務上常見問題包括:API 逾時後正文留白、路由只靠 click handler、分頁沒有可分享 URL、圖片 alt 等資料在互動後才補入、404 頁仍回傳 200,或 cookie/地區設定令爬蟲取得另一個空版本。排查時要保留失敗畫面、請求狀態與受影響 URL;這比一句「Google 應該會渲染」更能讓開發團隊修正原因。

發佈前用一份關鍵 URL 測試表守住改版

每次部署前挑選首頁、主服務頁、含內鏈的文章、分類頁、表單頁和 404 頁作樣本。逐項確認狀態碼、title、description、H1、可見正文、canonical、hreflang、主要連結、圖片 alt 和 JSON-LD。若網站以 API 供應內容,也要測試 API 不可用時的降級呈現。這份表不求覆蓋所有網址,重點是覆蓋最容易影響索引和查詢的公開路徑。

把問題分派給內容、前端與技術負責人

缺少服務說明由內容負責人補;原始 HTML 沒有正文、路由不可抓取或狀態碼錯誤則由前端與部署流程處理;索引與 canonical 差異交由 SEO 負責人回看。使用 Agent SEO 檢測 作公開訊號的初步抽查後,仍應以 Search Console 與實際 HTML 輸出作最後依據;需要把改版風險與內容架構一併盤點,則可由 SEO 服務 建立持續檢查流程。

延伸閲讀

官方參考資料