第五章：Sitemap 與搜尋引擎收錄實戰

在第一章我們學會了如何設定 Meta Tags，讓搜尋引擎看到我們網頁時能讀取到漂亮的標題與介紹。但問題來了：如果 Google 根本不知道你的網站存在，那設定再多 Meta Tags 也沒用！

剛上線的全新網站就像是開在一條沒有路標的深山小徑裡的店面。如果你只是坐在店裡等客人上門（等 Google 爬蟲自己發現你），你可能會等上好幾個月。

這堂課我們將學習如何畫一張地圖（Sitemap）給 Google，並且主動把地圖塞到它的手裡！

1. 什麼是 robots.txt 與 Sitemap.xml？

在 SEO 的世界裡，有兩個檔案是你網站的「大門守衛」與「導覽手冊」：

🤖 robots.txt (大門守衛)

這是一個純文字檔案，通常放在網站的根目錄（例如 https://你的網址/robots.txt）。它的作用是告訴所有搜尋引擎的爬蟲：「哪些網頁可以爬、哪些網頁不准爬」。例如，你絕對不希望 Google 把你的「會員後台」或是「結帳頁面」收錄進搜尋結果裡。

🗺️ sitemap.xml (導覽手冊)

這是一個 XML 格式的檔案，列出了你網站上所有「希望被收錄」的網址清單。它不僅告訴爬蟲有哪些頁面，還能告訴爬蟲這些頁面「最後更新時間是何時」以及「更新頻率有多高」。這能大幅提升爬蟲掃描你網站的效率。

2. 在 Next.js 中自動產出 robots.txt

在 Next.js App Router 中，產生這兩個檔案極度簡單，你甚至不需要手寫。只要在你的 app/ 目錄下建立一個 robots.ts 檔案：

// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*', // 允許所有搜尋引擎的爬蟲
      allow: '/',     // 允許爬取所有公開頁面
      disallow: ['/dashboard/', '/api/', '/checkout/'], // 禁止爬取會員後台、API 路由與結帳頁面
    },
    sitemap: 'https://vibe-tutor.com/sitemap.xml', // 告訴爬蟲你的 Sitemap 在哪裡
  };
}

當你部署後，只要訪問 /robots.txt，Next.js 就會自動幫你把它轉成標準格式！

3. 在 Next.js 中自動產出動態 Sitemap

靜態網站手寫 Sitemap 很簡單，但如果你是一個課程平台、或是部落格，你的頁面是「動態」的（每次新增一門課，就會多一個網址）。這時候，我們就需要讓 Sitemap 也是動態生成的！

在 app/ 目錄下建立一個 sitemap.ts 檔案：

// app/sitemap.ts
import { MetadataRoute } from 'next';
import { courses } from '@/config/courses'; // 引入我們定義的所有課程資料

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://vibe-tutor.com';

  // 1. 定義靜態路由
  const staticRoutes = [
    '',
    '/courses',
    '/pricing',
    '/contact',
  ].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date(),
    changeFrequency: 'weekly' as const,
    priority: route === '' ? 1.0 : 0.8, // 首頁權重最高
  }));

  // 2. 動態生成課程路由
  const dynamicCourseRoutes = courses.map((course) => ({
    url: `${baseUrl}${course.link}`, // 例如 /courses/chrome-extension-mastery
    lastModified: new Date(),
    changeFrequency: 'monthly' as const,
    priority: 0.9, // 課程頁面權重也很高
  }));

  // 回傳合併後的陣列，Next.js 會自動把它轉成完美的 XML 格式！
  return [...staticRoutes, ...dynamicCourseRoutes];
}

[!TIP] Priority (權重) 怎麼設定？ priority 的範圍是 0.0 到 1.0。這不是用來跟別人的網站比，而是告訴 Google 在你自己的網站內部，哪些頁面比較重要。通常首頁設 1.0，重要產品頁設 0.8 ~ 0.9，一般文章設 0.5 ~ 0.7，隱私權政策等頁面設 0.3。

4. 主動出擊！提交至 Google Search Console (GSC)

檔案準備好並且部署上線後，最關鍵的步驟來了：不要乾等，主動去找 Google 敲門！

Google Search Console (簡稱 GSC) 是 Google 提供給站長們的免費且最強大的 SEO 工具。

步驟一：驗證網站所有權

前往 Google Search Console。
點擊「新增資源」。
選擇「網址前綴 (URL Prefix)」，輸入你的網站完整網址 (包含 https://)。
Google 會給你一段 HTML 標籤或是 TXT 紀錄，依照指示放在你的網站上完成驗證（如果你用 Vercel 部署，通常直接連動 Google 帳號認證最快）。

步驟二：提交 Sitemap

進入 GSC 後台，點擊左側選單的 「Sitemaps (網站代碼)」。
在「新增 Sitemap」的輸入框中，填入 sitemap.xml，然後按下提交！
Google 會顯示「成功」。接下來的幾天內，Google 的爬蟲就會優先沿著你給的這張地圖，把你的網站翻個底朝天，將所有內容收錄進資料庫中！

5. 追蹤 SEO 關鍵字成效

提交 Sitemap 約一週後，你就可以在 GSC 的 「成效 (Performance)」 報表中看到魔法發生了！

你會看到非常具體的數據：

曝光次數：你的網站在搜尋結果中出現了幾次。
點擊次數：有多少人點進來。
查詢關鍵字 (Queries)：這是最值錢的資訊！你可以看到別人是搜尋了什麼字才找到你的（例如：「Next.js 金流串接教學」）。
平均排名：你在這些關鍵字的搜尋結果排在第幾名。

[!IMPORTANT] 資料驅動的優化策略 如果你發現某個關鍵字的「曝光次數」很高，但「點擊率」很低，代表什麼？代表你的排名可能不錯，但你的 <title> 和 <meta description> 寫得太爛，吸引不了人點擊！這時候趕快回到第一章去修改你的 Meta Tags，這就是最真實的 SEO 實戰！

下一章，我們將進入最後的重頭戲：除了等待自然搜尋流量，我們還能如何透過內容行銷與社群曝光，在產品上線第一天就拿到爆炸性的訂單！