JavaScript SEO 不是反對前端互動，也不是說 Google 完全不能渲染 JavaScript。真正的問題是：外貿網站的關鍵內容、關鍵連結、產品引數、FAQ、分頁、圖片、狀態碼和詢價路徑，是否能在 Google 抓取、渲染和索引過程中被穩定看到。Google 官方 JavaScript SEO 文件明確說明，Google Search 處理 JavaScript 頁面會經歷 crawling、rendering、indexing 三個階段；Google 可以執行 JavaScript，但仍有資源、功能支援和實現方式的限制。
對外貿出口企業來說，風險往往不是“整個頁面無法開啟”，而是 custom metal parts 產品引數、LED flood light 分類導航、packaging machine 分頁產品、medical probe FAQ、waterproof connector 規格表、詢價入口或相關產品連結，被放在需要點選、滾動、篩選、非同步請求或客戶端狀態後才出現的位置。使用者看起來正常，搜尋系統和其他 crawler 看到的可能是不完整頁面。本文會把 Google 官方 JavaScript SEO、lazy loading、crawlable links 和 pagination 文件，轉成外貿官網可執行排查清單。
本文的目標查詢詞與搜尋意圖
本文對應的目標查詢詞是 JavaScript SEO、JavaScript SEO 檢查、懶載入 SEO、JS 導航 抓取、pagination incremental loading SEO。搜尋者真正想知道的是：Google 到底怎樣處理 JS 頁面，導航、懶載入、分頁、互動內容、產品篩選和表單會怎樣影響抓取、索引和理解，外貿網站應該如何檢查與修復。
| 查詢詞方向 | 搜尋意圖 | 外貿企業應該得到什麼 | 不該寫成什麼 |
|---|---|---|---|
| JavaScript SEO | 理解 JS 頁面如何被抓取和索引 | Google 官方流程 + 外貿頁面檢查清單 | 只討論前端框架好壞 |
| 懶載入 SEO | 判斷懶載入是否隱藏內容 | 圖片、產品列表、FAQ 和分頁的安全實現 | 簡單說 lazy loading 都不好 |
| JS 導航抓取 | 檢查連結是否可發現 | a href、內鏈、選單、分頁和篩選器排查 | 只看使用者能不能點 |
| 外貿 JS SEO | 解決產品頁、分類頁、詢價頁風險 | 產品引數、FAQ、表單、圖片和國家市場頁面案例 | 用 SEO 服務行業詞舉例 |
Top1 與權威基準對標：Google 官方 JavaScript SEO 文件講了什麼
Google Search Central 的 JavaScript SEO basics 是最重要的權威基準。官方文件說明 Google 處理 JavaScript web app 主要有 crawling、rendering、indexing 三個階段；Google bot 會把頁面放入 crawl queue，抓取後進入 processing，隨後頁面會進入 render queue，由 renderer 執行 JavaScript 並把 rendered HTML 交回處理系統，再索引內容並抽取連結。Google 還提醒：Google Search 不會渲染被 blocked 的 JavaScript 檔案或頁面；應使用有意義的 HTTP 狀態碼；單頁應用要避免 soft 404；title、description、canonical 等訊號要正確輸出。
Google 的 lazy loading 文件強調：要確保所有相關內容在進入 viewport 時載入，且不要依賴使用者操作如滾動或點選才能載入重要內容，因為 Google Search 不會和頁面互動。Google 的 crawlable links 文件明確，Google 通常只能抓取帶有 href 屬性的 HTML a 元素；用 JavaScript 動態插入連結可以，但最終標記仍應是可抓取 anchor。Google 的 pagination / incremental loading 文件也強調，要給分頁內容提供可發現 URL，不能只用 hash 或無法跟隨的載入方式。
| 對標物件 | 做對的地方 | 常見缺口 | 本站如何超越 |
|---|---|---|---|
| Google JavaScript SEO Basics | 權威說明 crawling、rendering、indexing、狀態碼、meta、canonical | 偏官方基礎，不拆外貿頁面場景 | 補產品頁、分類頁、FAQ、詢價表單檢查 |
| Google Lazy Loading | 說明內容應在 viewport 可見時載入，不能依賴使用者操作 | 不講外貿產品列表和圖片庫場景 | 補產品圖、引數、FAQ、分頁和行業頁案例 |
| Google Crawlable Links | 強調 a href 是可抓取連結基礎 | 不講外貿導航和篩選器治理 | 補選單、產品分類、內鏈和錨文本檢查 |
| Google Pagination / Incremental Loading | 強調分頁 URL、增量載入和 hash 風險 | 不講產品列表和分類頁 SEO 架構 | 補 packaging machine 產品列表和分類分頁案例 |
JavaScript SEO 的核心：使用者能看到，不等於 Google 穩定看到
使用者瀏覽器和搜尋系統的工作方式不同。使用者可以等待、點選、滾動、篩選、登入、觸發表單和載入更多；Google bot 抓取和渲染有佇列、資源限制和支援邊界。頁面對使用者可用，不代表所有關鍵內容都會被搜尋系統穩定抓取、渲染、索引和抽取連結。
| 使用者行為 | 搜尋系統風險 | 外貿頁面例子 | 更穩做法 |
|---|---|---|---|
| 點選展開 FAQ | 答案不一定在 HTML 中 | medical probe 滅菌和包裝問題 | FAQ 文本在 HTML 或渲染後可見 |
| 滾動載入產品 | Google 不會一直滾動 | packaging machine 分類列表 | 分頁 URL + 可發現連結 |
| 點選選單才生成連結 | 連結不是 a href | LED flood light 子分類 | 輸出 crawlable anchor |
| 篩選器生成結果 | 結果頁無獨立 URL | waterproof connector IP67 filter | 重要篩選建立可索引頁面 |
| 表單校驗後顯示資料 | 採購資料不可索引 | custom metal parts quote requirements | 關鍵資料清單寫在正文 |
外貿網站最常見的 10 類 JavaScript SEO 風險
| 風險 | 影響 | 檢查方法 | 修復方向 |
|---|---|---|---|
| 導航連結不是 a href | 產品頁和分類頁弱發現 | 檢視原始碼和渲染後 DOM | 使用 crawlable anchor |
| 產品引數非同步載入 | 規格資訊不穩定 | 停用 JS 或看 rendered HTML | 參數列服務端輸出或 SSR |
| FAQ 點選後才請求 | 問答缺失 | URL Inspection rendered HTML | 前臺 HTML 包含 FAQ 文本 |
| 圖片懶載入錯誤 | 產品圖和 alt 缺失 | 檢查 viewport 載入和 noscript | 原生 lazy + 正確 src/alt |
| 無限滾動無分頁 URL | 深層產品不可發現 | crawl 產品列表 | 提供 page=2/3 URL |
| hash 路由承載頁面 | URL 不可區分 | 檢查 /#/product | 使用真實 URL |
| 客戶端修改 title/meta | 搜尋結果訊號不穩定 | 看原始 HTML 和渲染 HTML | 服務端輸出關鍵 meta |
| soft 404 | 無貨/不存在頁面仍返回 200 | 檢查狀態碼和內容 | 用正確 404/410/重定向 |
| canonical 動態注入錯誤 | 索引訊號混亂 | URL Inspection | 服務端穩定輸出 canonical |
| 表單依賴 JS 才顯示 | 詢價路徑受阻 | 移動端和禁 JS 測試 | 保留基礎聯絡方式和資料說明 |
檢查一：原始 HTML 裡有沒有核心內容
外貿核心頁面的首段、產品名稱、關鍵引數、分類連結、FAQ、麵包屑和詢價資料，最好在原始 HTML 或 SSR/SSG 輸出中就能看到。不是所有內容都必須首屏原始輸出，但核心 SEO 和採購判斷資訊不應完全依賴客戶端請求。
| 頁面型別 | 原始 HTML 最好包含 | 風險表現 |
|---|---|---|
| 產品頁 | 產品名、引數、應用、FAQ、詢價資料 | 只看到空 div 和指令碼 |
| 分類頁 | 分類說明、子分類、產品連結、分頁 | 產品列表完全由 API 載入 |
| 行業頁 | 場景說明、適用產品、問題和內鏈 | 互動切換後才出現關鍵內容 |
| 技術文章 | 正文、H2、表格、FAQ、內鏈 | 正文由 JS 注入 |
| 詢價頁 | 聯絡方式、資料清單、基礎表單 | 表單失敗後無替代方式 |
檢查二：渲染後 HTML 是否完整
Google 會渲染 JavaScript，但渲染有佇列和限制。要用 URL Inspection、Rich Results Test、移動端測試、瀏覽器停用 JS、檢視 rendered DOM、爬蟲渲染模式交叉檢查。重點看渲染後是否出現關鍵文本和連結。
| 檢查項 | 通過標準 | 不通過時的動作 |
|---|---|---|
| 標題/描述 | 渲染前後穩定 | 服務端輸出 meta |
| 正文 | 核心段落可見 | SSR/SSG 或靜態輸出核心內容 |
| 連結 | a href 可抓取 | 避免 onclick-only 連結 |
| 圖片 | src/alt 正確出現 | 修懶載入實現 |
| 狀態碼 | 不存在頁面返回 404/410 | 避免 SPA soft 404 |
| canonical | 指向正確規範 URL | 服務端穩定輸出 |
檢查三：導航和內鏈必須可抓取
Google 的 crawlable links 文件明確，通常只有帶 href 的 a 元素才能作為可抓取連結。按鈕、div、span、onclick、hash、無 href 連結都可能讓關鍵頁面發現變弱。
| 弱連結寫法 | 風險 | 更穩寫法 |
|---|---|---|
| <button onclick=”go(‘/product’)”> | 不一定被當作連結 | <a href=”https://www.tianwenseo.com/product/”> |
| <div data-url=”/category”> | crawler 難發現 URL | a href 分類連結 |
| /#/products/led | hash 路由可能不適合獨立索引 | /products/led/ |
| 點選篩選後無 URL | 重要子類不可分享不可索引 | 重要篩選生成靜態 URL |
| 載入更多無分頁連結 | 深層產品無法發現 | /page/2/ 或 ?page=2 |
檢查四：懶載入不能隱藏核心內容
Google lazy loading 文件強調，所有相關內容應在進入 viewport 時載入，並且不要依賴使用者操作。外貿站可以懶載入圖片和非關鍵模組，但不能把正文、產品引數、FAQ、分頁連結和核心產品列表放到必須點選或滾動很深才請求的位置。
| 懶載入物件 | 是否適合 | 注意事項 |
|---|---|---|
| 下方產品圖片 | 適合 | 保留正確 src、alt、尺寸和可見時載入 |
| 首屏主圖 | 謹慎 | LCP 圖片通常不要懶載入 |
| 核心正文 | 不建議 | 應直接輸出或渲染可見 |
| FAQ 文本 | 不建議只點擊後請求 | 問答內容應在 HTML/渲染後存在 |
| 產品列表分頁 | 不應只無限滾動 | 提供可發現分頁 URL |
| 相關產品 | 可懶載入但要謹慎 | 重要內鏈應穩定輸出 |
渲染策略選擇：SSR、SSG、CSR 和預渲染
| 策略 | 適合場景 | SEO 風險 | 外貿建議 |
|---|---|---|---|
| Static HTML/SSG | 技術文章、產品頁、分類頁 | 低 | 核心內容優先使用 |
| SSR | 動態產品、分類、國家頁 | 較低 | 適合核心商業頁面 |
| Hydration | 首屏靜態 + 互動增強 | 注意前後不一致 | 確保核心內容不丟 |
| CSR | 賬戶中心、報價計算器、內部工具 | 對 SEO 頁面風險較高 | 核心內容不要全靠 CSR |
| Prerender | 特定 JS 頁面兜底 | 維護成本 | 可臨時解決，但不是長期首選 |
| Dynamic rendering | 舊方案/特定 crawler | 官方不建議長期依賴 | 優先 SSR/SSG/水合方案 |
外貿案例一：packaging machine 產品列表無限滾動
一個包裝機械網站的分類頁使用無限滾動展示產品，首屏只有 12 個產品，後續產品必須滾動到底才載入，且沒有 page=2、page=3 這類可發現 URL。使用者看起來能瀏覽，但 Google 很可能只穩定看到首屏產品和少量連結。對於 packaging machine 這種產品多、物料場景多的網站，這會讓深層產品和子分類弱發現。
| 問題 | 影響 | 修復 |
|---|---|---|
| 無限滾動無 URL | 深層產品不可發現 | 提供分頁 URL |
| 產品列表 API 載入 | 原始 HTML 無產品連結 | SSR/SSG 輸出核心產品 |
| 篩選無獨立頁面 | 粉末、顆粒、液體場景無法排名 | 重要篩選建立靜態分類頁 |
| 相關產品懶載入 | 內鏈訊號弱 | 核心相關連結直接輸出 |
外貿案例二：LED flood light FAQ 點選後才請求
一個燈具頁面把所有 FAQ 放在 accordion 中，使用者點選後才從 API 請求答案。FAQ 包含 IP65 vs IP66、wattage、mounting height、CE/RoHS 等採購問題，但原始 HTML 和渲染初始狀態都沒有答案。這樣會削弱頁面對問題詞的覆蓋。
| FAQ 問題 | SEO 價值 | 建議 |
|---|---|---|
| IP65 vs IP66 | 技術比較詞 | 答案直接在 HTML 中 |
| How many watts for warehouse | 應用詞 | 加入表格和連結 |
| CE/RoHS certification | 市場信任 | 說明檔案邊界 |
| Sample and MOQ | 詢價轉化 | 補採購資料清單 |
外貿案例三：custom metal parts 報價資料在表單後才顯示
custom metal parts 頁面要求使用者先提交表單，才顯示報價需要哪些資料。這樣對轉化可能也不友好，對搜尋更不友好。報價資料清單本身就是高價值內容，應該在頁面正文中說明：2D/3D drawing、material、tolerance、surface finish、quantity、application、inspection requirements。
| 資料 | 為什麼重要 | 頁面寫法 |
|---|---|---|
| 2D/3D drawing | 確定結構和公差 | 詢價前請準備圖紙 |
| Material | 影響成本和工藝 | 列常見材料和替代建議 |
| Surface finish | 影響工序和交期 | 表格說明 anodizing、plating、painting |
| Quantity | 影響單價和工藝選擇 | 說明樣品、小批次、批次差異 |
| Application | 影響材料和檢測 | 說明使用環境和風險 |
釋出前 JavaScript SEO 檢查清單
- 核心內容是否在原始 HTML 或渲染後 HTML 中可見。
- 導航、分頁、產品連結是否使用 a href。
- 重要篩選是否有可分享、可索引的 URL。
- FAQ、參數列、產品列表是否不依賴使用者點選才請求。
- 不存在頁面是否返回正確 404/410，而不是 soft 404。
- title、description、canonical、robots 是否穩定輸出。
- 懶載入圖片是否在 viewport 可見時自動載入，且有 alt。
- 移動端渲染是否和桌面核心內容一致。
- 詢價表單失敗時是否有替代聯絡方式和資料說明。
- 釋出後是否用 GSC URL Inspection 和渲染工具複檢。
外貿案例七：cnc machining parts 頁面用 3D 互動展示但缺少文本
一些機械加工網站會在 cnc machining parts 頁面放 3D viewer，讓使用者旋轉檢視零件。這對展示很有幫助，但如果材料、公差、表面處理、檢測方式和報價資料都只藏在互動面板裡，頁面對搜尋系統和採購商都不夠清楚。
| 互動模組 | 風險 | 補強方式 |
|---|---|---|
| 3D viewer | 機器難以讀取零件關鍵資訊 | 在正文列出 material、tolerance、finish、inspection |
| 點選熱點顯示引數 | 引數可能不在初始 HTML 中 | 參數列直接輸出，熱點做增強 |
| 檔案上傳後才顯示報價資料 | 採購前資訊不可見 | 提前說明圖紙、數量、材料、應用需求 |
| 相關工藝推薦由 API 載入 | 內鏈不穩定 | 直接連結到 milling、turning、surface finish 頁面 |
3D 互動不是問題，問題是用互動替代正文。核心 SEO 頁面應該先用文本和表格講清楚，再用 3D 或影片增強理解。
JavaScript SEO 和結構化資料
結構化資料可以由 JavaScript 注入，但核心頁面更穩的做法是服務端輸出或構建時輸出，並確保它與前臺可見內容一致。不能在結構化資料中填寫頁面沒有展示的價格、評分、庫存或 FAQ。
| Schema | JS 風險 | 外貿建議 |
|---|---|---|
| Product | 動態生成不穩定，資訊與頁面不一致 | 產品頁穩定輸出產品名、圖片、描述和可驗證資訊 |
| FAQPage | FAQ 前臺不可見但 schema 中有 | 問答必須在頁面中真實展示 |
| BreadcrumbList | 麵包屑由 JS 後加載 | 頁面 HTML 中輸出麵包屑 |
| Article | 作者和日期動態不一致 | 保持標題、日期、作者和正文一致 |
| Organization | 多語言/多網域實體資訊不一致 | 統一公司名、logo、聯絡方式 |
JavaScript SEO 與圖片 SEO：產品圖不能只追求效果
外貿產品圖通常很重要，但前端為了動效和效能，可能使用背景圖、canvas、懶載入佔位、輪播和相簿外掛。這樣做如果處理不好，會讓圖片缺少 alt、src、尺寸、圖注和周邊文本。
| 圖片實現 | 風險 | 建議 |
|---|---|---|
| CSS background 展示產品圖 | 圖片語義弱 | 核心產品圖使用 img 標籤 |
| canvas 渲染產品圖 | 搜尋系統難理解 | 提供靜態圖片和文字說明 |
| 輪播只首張載入 | 後續圖片不可見 | 重要圖片直接可訪問 |
| 懶載入無寬高 | 佈局跳動 | 設定 width/height |
| alt 空泛 | 圖片上下文弱 | 描述產品、規格或應用場景 |
外貿詢價路徑的 JS 風險
SEO 的終點不是頁面被抓取，而是採購商能完成行動。很多外貿站的詢價路徑依賴彈窗、浮動按鈕、第三方表單、聊天工具和驗證碼。如果這些指令碼載入失敗，使用者可能找不到聯絡方式。
| 詢價模組 | 風險 | 兜底方案 |
|---|---|---|
| 彈窗表單 | 被攔截或載入失敗 | 頁面正文保留固定表單入口 |
| 聊天工具 | 第三方指令碼慢 | 保留郵箱和 WhatsApp 文本連結 |
| 驗證碼 | 部分地區載入異常 | 提供替代表單或郵箱 |
| 多步驟表單 | 中途失敗丟失詢價 | 減少必填項，保留錯誤提示 |
| 報價按鈕 | onclick-only 不可抓取 | 使用可訪問連結或普通按鈕加明確說明 |
對 custom metal parts、medical probe 這類需要圖紙或檔案的產品，詢價頁還應明確寫出資料清單。不要讓“如何詢價”只存在於表單互動中。
開發驗收清單：給技術人員的明確標準
如果需要讓開發或建站團隊修 JavaScript SEO，可以用下面清單驗收，而不是隻說“SEO 友好”。
| 驗收項 | 合格標準 |
|---|---|
| 核心文本 | 檢視原始碼或渲染 HTML 能看到首段、引數、FAQ 和主要內鏈 |
| 連結 | 產品、分類、分頁、相關文章連結使用 a href |
| 分頁 | 深層列表有可訪問 URL，且可從第一頁到達 |
| 狀態碼 | 不存在頁面返回 404/410，不使用 soft 404 |
| meta | title、description、canonical、robots 在服務端穩定輸出 |
| 圖片 | 核心圖片有 img、src、alt、尺寸和圖注 |
| 表單 | 表單失敗時仍有聯絡方式和資料說明 |
| 複檢 | GSC URL Inspection 和 crawler 渲染結果通過 |
什麼時候不需要過度擔心 JavaScript SEO
不是每個 JS 互動都需要重構。如果頁面只是用 JavaScript 做圖片輪播、表單校驗、輕量動畫、聊天按鈕或非核心篩選，只要核心文本、連結、圖片、FAQ、狀態碼、canonical 和詢價資料穩定可見，就不必為了 SEO 把所有互動移除。判斷標準很簡單：這個互動是否承載搜尋意圖和採購判斷？如果只是增強體驗，可以保留；如果承載核心內容，就要優先保證可抓取和可索引。外貿核心頁面尤其要把產品事實、採購問題和下一步行動放在穩定層。
釋出後復盤指標
| 指標 | 週期 | 看什麼 | 動作 |
|---|---|---|---|
| URL Inspection | 釋出後 | HTML、截圖、索引狀態 | 確認關鍵內容可見 |
| GSC Pages | 7–30 天 | 是否發現、抓取、索引 | 修技術或內容價值 |
| GSC Queries | 30–60 天 | 產品詞、問題詞、規格詞 | 補 FAQ 或頁面型別 |
| Crawl 資料 | 釋出後 | 內鏈、分頁、狀態碼 | 修 a href 和分頁 |
| GA4 路徑 | 30–60 天 | 使用者是否能進入產品和詢價 | 最佳化路徑和表單 |
| 詢價品質 | 60–90 天 | 是否提供引數、圖紙、數量 | 補資料清單 |
外貿案例四：waterproof connector 篩選器沒有獨立 URL
聯結器網站常見篩選條件包括 IP rating、pin number、current、cable diameter、mounting type、material、application。使用者篩選後可以看到結果，但 URL 不變化，或者只是 hash 變化。這樣 waterproof connector 的重要子需求就無法被穩定索引。
| 篩選條件 | 是否值得索引 | 判斷依據 | 頁面動作 |
|---|---|---|---|
| IP67 waterproof connector | 可能值得 | 有搜尋需求和產品數量 | 建立靜態子分類頁 |
| 2 pin waterproof connector | 可能值得 | 型號/規格需求明確 | 子分類或產品列表頁 |
| 顏色篩選 | 通常不值得 | 搜尋需求弱 | 不索引或 canonical |
| 價格排序 | 不值得 | 排序 URL 重複 | 不索引 |
| solar application connector | 可能值得 | 場景搜尋明確 | 行業應用頁 |
不是所有篩選都要索引。JavaScript SEO 的重點是：有搜尋需求和商業價值的篩選結果，應有可抓取 URL、獨立標題、說明文字、產品列表和內鏈；沒有價值的篩選，不要製造大量重複 URL。
外貿案例五：private label activewear 頁面使用標籤切換
很多服裝定製頁面會用 tabs 展示 fabric、size chart、logo options、packaging、MOQ、sample process。如果這些內容只有使用者點選 tab 後才從介面載入，搜尋系統可能看不到完整定製能力。private label activewear manufacturer 這類商業頁尤其需要首屏和正文直接說明關鍵採購資訊。
| Tab 內容 | SEO/轉化價值 | 建議輸出方式 |
|---|---|---|
| Fabric options | 影響產品匹配 | HTML 中直接包含主要面料表 |
| Size chart | 影響品牌打樣 | 可摺疊但文本可見 |
| Logo options | 品牌定製核心 | 正文說明 embroidery、printing、heat transfer |
| Packaging | 影響私標採購 | 補 packaging options 表 |
| MOQ and sample | 高轉化問題 | FAQ 直接展示 |
外貿案例六：ceramic dinnerware 圖片庫很美，但文字不足
ceramic dinnerware 頁面經常大量依賴圖片瀑布流和輪播。圖片對外觀很重要，但如果材質、釉面、微波爐安全、洗碗機安全、包裝、MOQ 和 logo 定製都只在圖片裡，搜尋系統和採購商都難以快速判斷。
| 資訊 | 只放圖片的風險 | 更穩寫法 |
|---|---|---|
| 材質 | 無法明確 stoneware/porcelain/bone china | 材質對比表 |
| 套裝 | 圖片看不出件數和包裝 | set composition 表 |
| 安全 | 無法判斷 microwave safe | FAQ 和測試說明 |
| 定製 | logo 和包裝能力不清楚 | OEM/ODM 段落 |
| 詢價 | 使用者不知道提供什麼 | 數量、包裝、目標市場資料清單 |
圖片可以懶載入，但產品關鍵資訊要用文字和表格表達。圖片 alt 也要描述產品和場景，而不是 IMG_001。
JavaScript SEO 與 Core Web Vitals 的關係
JavaScript SEO 和效能不是同一件事，但高度相關。過重的 JS 會影響載入、渲染、互動和抓取效率，也會影響使用者體驗。外貿頁面如果首屏很慢，採購商可能還沒看到產品引數就離開。
| 效能指標/問題 | SEO 影響 | 外貿頁面處理 |
|---|---|---|
| LCP 圖片過大 | 首屏慢，體驗差 | 最佳化主圖尺寸和格式 |
| JS bundle 過大 | 渲染慢，互動延遲 | 拆包、延遲非關鍵指令碼 |
| CLS 佈局跳動 | 閱讀和點選體驗差 | 預留圖片/模組尺寸 |
| INP 差 | 互動遲緩 | 減少主執行緒阻塞 |
| 第三方指令碼多 | 載入和隱私風險 | 審查聊天、追蹤、廣告指令碼 |
外貿站常見第三方指令碼包括聊天工具、表單外掛、統計、熱力圖、廣告畫素和地圖。每加一個指令碼，都要問它是否影響核心頁面載入和詢價表單。
狀態碼和 Soft 404：SPA 最容易忽略的問題
Google 官方 JavaScript SEO 文件提醒，頁面應使用有意義的 HTTP 狀態碼，單頁應用要避免 soft 404。外貿網站如果某個產品不存在，卻仍然返回 200 並顯示“product not found”，Google 可能把它當成 soft 404 或低價值頁面。
| 頁面情況 | 正確狀態 | 外貿例子 |
|---|---|---|
| 產品永久下架且無替代 | 410 或 404 | 舊型號停止生產 |
| 產品下架但有替代型號 | 301 到替代頁或分類頁 | 舊 connector 轉到新系列 |
| 臨時缺貨但仍銷售 | 200 + 清楚說明 | 樣品暫時延遲 |
| 篩選無結果 | 200 或 noindex 視情況 | 顏色篩選無產品 |
| 感謝頁 | 200 + noindex | 詢價提交成功頁 |
Canonical、robots 和 meta 動態注入風險
很多 JS 頁面會在客戶端動態修改 canonical、robots、title、description。雖然 Google 可能看到渲染後結果，但關鍵 SEO 訊號最好在服務端穩定輸出，尤其是產品頁、分類頁、行業頁和支柱文章。
| 訊號 | 動態注入風險 | 建議 |
|---|---|---|
| title | 搜尋結果標題不穩定 | 服務端輸出準確標題 |
| description | 摘要和頁面意圖不一致 | 服務端或構建時輸出 |
| canonical | 指向錯誤 URL 或渲染前缺失 | 核心頁穩定輸出 |
| robots meta | 誤 noindex 或覆蓋失敗 | 釋出前複檢 |
| hreflang | 多語言關係不穩定 | 服務端輸出並驗證 |
多語言外貿站的 JavaScript SEO
多語言外貿站如果用 JS 切換語言，而 URL 不變化或 hreflang 不完整，會讓搜尋系統難以區分語言版本。每個重要語言頁面都應有獨立 URL、正確 hreflang、可抓取內鏈和本語言核心內容。
| 問題 | 風險 | 處理 |
|---|---|---|
| 語言切換隻改前端文本 | 沒有獨立索引 URL | 使用 /en/、/de/ 等獨立 URL |
| hreflang 動態注入錯誤 | 語言版本關係混亂 | 服務端輸出並測試 |
| 本地頁面內容由 API 載入 | 渲染不穩定 | SSG/SSR 輸出核心內容 |
| 國家市場 FAQ 缺失 | 本地意圖匹配弱 | 補認證、物流、市場場景 |
如何用工具檢查 JavaScript SEO
| 工具 | 看什麼 | 注意 |
|---|---|---|
| GSC URL Inspection | 索引、抓取、渲染截圖、HTML | 以 Google 視角看單頁 |
| Rich Results Test | 渲染後 HTML 和結構化資料 | 不是排名測試 |
| Chrome 檢視原始碼 | 原始 HTML | 看服務端是否輸出核心內容 |
| DevTools Elements | 渲染後 DOM | 和原始碼對比 |
| Screaming Frog/爬蟲 | 連結、狀態碼、渲染、標題 | 開啟 JS 渲染對比 |
| 停用 JavaScript 測試 | 基礎內容和路徑是否仍可用 | 不是要求完全無 JS，而是看兜底 |
修復優先順序：先修什麼
| 優先順序 | 問題 | 原因 |
|---|---|---|
| P0 | 核心產品/分類連結不可抓取 | 直接影響發現和商業詞 |
| P1 | 核心正文/引數/FAQ 不可見 | 影響索引和意圖理解 |
| P2 | 分頁和產品列表不可發現 | 影響深層產品 |
| P3 | title/canonical/robots 不穩定 | 影響索引訊號 |
| P4 | 圖片和非關鍵模組懶載入問題 | 影響體驗和圖片理解 |
| P5 | 非核心互動細節 | 可排到後續最佳化 |
JavaScript SEO 修復記錄表
| 欄位 | 說明 | 示例 |
|---|---|---|
| URL | 被檢查頁面 | /packaging-machine/ |
| 頁面型別 | 產品、分類、文章、詢價 | 分類頁 |
| 問題型別 | 連結、內容、分頁、meta、狀態碼 | 產品列表無限滾動無 URL |
| 影響層級 | 發現、抓取、渲染、索引、轉化 | 發現 + 渲染 |
| 修復動作 | 技術和內容改動 | 增加 /page/2/ 分頁連結 |
| 複檢工具 | GSC、crawl、rendered HTML | GSC URL Inspection |
| 復盤日期 | 7/30/60 天 | 2026-06-25 |
FAQ：JavaScript SEO 常見問題
Google 能渲染 JavaScript，是不是就不用管 JS SEO？
不是。Google 可以渲染 JavaScript，但仍有佇列、資源、實現方式和支援邊界。核心內容和連結越穩定輸出，風險越低。
懶載入圖片會影響 SEO 嗎？
正確實現通常沒問題。風險在於把重要內容、產品列表、FAQ 或分頁連結放到依賴使用者操作才載入的位置。圖片也要有正確 src、尺寸、alt 和可見時自動載入。
按鈕點選跳轉能不能代替 a href？
不建議。Google 官方連結最佳實踐強調可抓取連結通常應是帶 href 的 a 元素。重要產品頁、分類頁和分頁連結應使用標準連結。
單頁應用一定不適合 SEO 嗎？
不一定。關鍵看路由、狀態碼、meta、canonical、正文、連結和渲染是否穩定。核心 SEO 頁面更建議 SSR、SSG 或至少保證首屏關鍵內容可見。
產品篩選頁都應該索引嗎？
不是。只有有搜尋需求、商業價值和獨立內容的篩選組合才值得做成可索引頁面。大量低價值篩選應謹慎處理，避免重複和抓取浪費。
外貿詢價表單依賴 JavaScript 有問題嗎？
表單可以有 JS 增強，但頁面應保留基礎聯絡方式、資料清單和錯誤提示。否則使用者和搜尋系統都可能看不清下一步。
如何判斷 Google 看到的內容是否完整？
用 GSC URL Inspection、渲染測試、檢視原始碼、渲染後 DOM、爬蟲工具和停用 JS 測試交叉檢查。重點看核心正文、連結、圖片、FAQ、meta 和 canonical。
JavaScript SEO 問題會影響詢價嗎？
會。如果產品引數、報價資料、相關產品、表單或聯絡方式依賴不穩定指令碼，使用者和搜尋系統都可能看不完整。對外貿站來說，技術可見性和詢價路徑必須一起檢查。
WordPress 和 Elementor 網站也會有 JavaScript SEO 問題嗎？
可能會。即使不是 SPA，導航、彈窗、摺疊 FAQ、圖片懶載入、產品篩選、表單和第三方指令碼也可能影響頁面可見性、效能和使用者路徑，需要按頁面實際輸出檢查。
結語：JavaScript SEO 的目標是讓關鍵內容穩定可見
外貿網站可以使用現代前端和互動效果，但不能讓關鍵產品資訊、分類連結、FAQ、分頁、詢價資料和規範訊號變成不穩定輸出。使用者能看到只是第一步，搜尋系統能否發現、渲染、索引和理解，才決定頁面能否長期服務自然搜尋和 AI 答案環境。
真正穩妥的 JavaScript SEO，不是追求完全不用 JS，而是把核心 SEO 內容和採購路徑放在穩定層，把互動作為增強。對核心產品頁、分類頁、行業頁和技術文章，優先保證文本、連結、圖片、FAQ、狀態碼和 meta 在抓取與渲染階段可靠出現，再用 GSC、crawl、GA4 和詢價資料復盤。這樣做不能承諾穩定排名或詢價結果，但能顯著降低“使用者看著正常，搜尋系統看不完整”的風險。
官方來源與JavaScript SEO驗收邊界
JavaScript SEO 不是“前端能看到就行”。外貿網站要確認 Google bot 能抓取、渲染、發現連結，並在渲染後看到關鍵文本、canonical、robots meta 和產品/分類頁入口。
| 官方來源 | 適合檢查 | 外貿站驗收點 |
|---|---|---|
| JavaScript SEO basics | Google 處理 JavaScript 的抓取、渲染、索引流程 | 核心產品詞、分類詞和正文不要只依賴使用者互動後才出現 |
| Make your links crawlable | 連結是否用可抓取的 href 暴露 | 產品頁、分類頁、應用場景頁要有真實可抓取連結 |
| URL Inspection tool | 檢視 Google 對單個 URL 的索引和 live test 狀態 | 用頁面級證據確認渲染後內容是否可見 |
| Robots meta tag specification | 檢查動態 meta robots 是否造成索引誤傷 | 不要用 JS 在載入後臨時切換 index/noindex |
| Sitemaps overview | 確認重要 URL 是否被提交 | JS 生成的入口仍要有 sitemap 和正文內鏈兜底 |
JavaScript SEO復盤表
| 檢查項 | 通過標準 | 失敗後先改什麼 |
|---|---|---|
| 導航連結 | a 標籤有 href，URL 可直接開啟 | 把點選事件連結改成真實連結 |
| 正文內容 | 首屏和核心段落渲染後能讀取 | 關鍵內容服務端輸出或減少懶載入依賴 |
| 分頁/篩選 | 重要分類路徑有可抓取 URL | 給可索引組合單獨 URL 和 canonical 策略 |
| 結構化資料 | Product、Breadcrumb 等欄位穩定輸出 | 避免價格、庫存、SKU 等欄位只在使用者操作後出現 |
繼續讀這組SEO資料
如果你正在系統梳理外貿網站SEO，建議順著下面幾篇繼續看。先把抓取、索引、內容、連結和復盤關係理清，再決定下一步改哪一頁。
