第 33 章：JavaScript SEO 與 Log File 分析

在 SPA（Single Page Application）和前端框架（React、Vue、Angular）日益普及的時代，JavaScript SEO 成為技術 SEO 中最具挑戰性的領域。核心問題很簡單：

Google 能不能看到你的內容？

傳統網站：伺服器直接返回 HTML → Googlebot 直接讀取 ✅
JS 渲染網站：伺服器返回空的 HTML 框架 → 需要 JS 執行後才有內容 ⚠️

Googlebot 的「兩階段」索引流程

第一階段：爬取與解析
  → Googlebot 讀取 HTML，提取連結和資源（CSS/JS）

第二階段：渲染（延遲執行）
  → 將 JS 檔案送去 Web Rendering Service（WRS）
  → 使用 Chromium 執行 JS
  → 讀取最終渲染後的 DOM
  → 提取內容和連結

關鍵問題： 第一階段和第二階段之間存在時間差。Google 可能在第一階段就開始索引，也可能幾天甚至幾週後才進行第二階段的 JS 渲染。

2026 年現狀： Google 的 JS 渲染能力已大幅提升，但仍不是即時的。對於時效性內容，完全依賴 JS 渲染有風險。

1. CSR（Client-Side Rendering，用戶端渲染）

伺服器 → 空的 HTML（只有 <div id="root"></div>）→ 瀏覽器下載 JS → JS 執行 → 渲染內容

2. SSR（Server-Side Rendering，伺服器端渲染）

伺服器 → 執行 JS → 生成完整 HTML → 回傳給瀏覽器

3. SSG（Static Site Generation，靜態網站生成）

建置階段 → 預先渲染所有頁面 → 輸出純 HTML 檔案 → 部署到 CDN

檢查 1：Google 看到的 vs 使用者看到的

使用以下工具對比：

核心檢查清單

☐ 關閉 JS 後，頁面主要內容是否存在？
☐ 關閉 JS 後，導覽連結是否可用？
☐ 關閉 JS 後，<title> 和 <meta description> 是否存在？
☐ 關閉 JS 後，canonical 標籤是否存在？
☐ 關閉 JS 後，結構化資料是否存在？
☐ 關閉 JS 後，<h1> 標題是否存在？
☐ 關閉 JS 後，內部連結是否可被發現？

實用方法： 在 Chrome 中安裝「Web Developer」擴充 → Disable JavaScript → 重新載入頁面，觀察內容是否仍然存在。

Next.js（React）

// 在需要 SEO 的頁面使用 SSR 或 SSG
export async function getServerSideProps(context) {
  // SSR: 每次請求都在伺服器端渲染
  const data = await fetch(`https://api.example.com/page/${context.params.id}`);  
  return { props: { data } };
}

export async function getStaticProps() {
  // SSG: 建置時生成靜態 HTML
  const data = await fetch('https://api.example.com/pages');
  return { props: { data } };
}

Nuxt.js（Vue）

// nuxt.config.js
export default {
  ssr: true,  // 啟用 SSR
  target: 'server',  // 或 'static' 用於 SSG
}

通用建議

什麼是 Log File？

伺服器日誌檔記錄了每一次被存取的請求，包括誰訪問了什麼、什麼時候、結果如何。對於 SEO 來說，最重要的是 Googlebot 的爬取紀錄。

# Apache / Nginx 典型的 Log 格式
66.249.66.1 - - [23/Jul/2026:14:30:00 +0800] "GET /blog/seo-guide HTTP/1.1" 200 15240 "-" "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"

Log File 能回答的 SEO 問題

Log File 分析的 SEO 價值

Googlebot 的爬取總量 = Crawl Budget

你應該確保：
- Googlebot 大部分時間在爬「重要頁面」
- Googlebot 沒有浪費時間在404、重定向、低品質頁面
- 重要新內容被快速發現和爬取

免費工具

專業付費工具

實務建議： 對大多數網站來說，Screaming Frog Log File Analyser 已足夠。每年一次深度 Log 分析就能發現大量優化機會。

第一步：取得 Log 檔案

• 從主機面板（cPanel / Plesk）下載
• 透過 SSH 存取 /var/log/nginx/access.log 或 /var/log/apache2/access.log
• 使用 CDN 的話，Cloudflare / CloudFront 都有 Log 下載功能

第二步：過濾 Googlebot

# Linux 命令列過濾 Googlebot
grep "Googlebot" access.log > googlebot-requests.log

第三步：分析��取模式

• 哪些 URL 被爬取最多 / 最少？
• 哪些目錄 被過度爬取（例如搜尋結果頁、篩選頁）？
• 哪些重要頁面 長時間未被爬取？
• 新內容 被發現的速度如何？
• 錯誤回應（4xx/5xx）的比例？

第四步：制定優化行動

Crawl Budget（爬取預算） = Google 每天願意爬取你網站的頁面數量。

影響 Crawl Budget 的因素

優化清單

1. 確保重要頁面載入速度快（< 2 秒）
2. 消除低品質頁面（thin content、自動生成頁面）
3. 用 robots.txt 阻止無效 URL 空間（搜尋結果、篩選組合）
4. 使用正確的 HTTP 狀態碼（不要 soft 404）
5. 減少重定向鏈
6. 確保 Sitemap 準確且即時更新
7. 透過內部連結引導 Googlebot 到重要內容
8. 合併分散在多個 URL 的內容