第一章：把你的網站賣出去！SEO 核心策略與 Meta Tags 實戰

恭喜你！走完了前面所有的開發章節，你現在已經擁有了一個具備完整功能、絢麗特效、並且能 24 小時幫你收錢的知識付費平台。

但是，在真實的商業世界中，開發完成只是整個專案生命週期的前 20%。 如果沒有人知道你的網站，那你的系統寫得再好、架構再神，它都只是一座放在沙漠裡的豪華皇宮，連一毛錢都賺不到。

在「進階營運 (Advanced Operations)」這個篇章中，我們不再寫系統邏輯，我們要專注於增長與行銷 (Growth & Marketing)。而這一切的第一步，就是解決 SEO (搜尋引擎最佳化) 的問題。

我們希望達成的終極目標是：當一個陌生人在 Google 搜尋「零基礎如何寫 Line Bot」、「Next.js 全端開發教學」時，你的網站能夠霸佔搜尋結果的第一頁！

🎯 本章目標

深入理解 Meta Tags 對於搜尋引擎爬蟲與社群平台的重要性。
實作 Next.js App Router 中最強大的 Metadata API，進行全域 SEO 設定。
設定 Open Graph (OG) 圖片，讓你的網址分享到 Facebook 或 Line 時，擁有高點擊率的漂亮預覽卡片。

🔍 什麼是 Meta Tags？為何它決定了你的點擊率？

Meta Tags 是一段隱藏在網頁 HTML <head> 區塊裡面的標籤。這些文字不是寫給人類看的，它是專門寫給 Google 爬蟲 以及 社群平台 (FB, Line, X) 的機器人看的。

當你在 Line 裡面貼上一段網址傳給朋友時，為什麼 Line 會自動生出一張漂亮的縮圖、一個粗體的標題、跟一段兩行字的介紹？因為 Line 的伺服器會瞬間去爬取你這個網址的 Meta Tags：

<meta property="og:title"> 決定了卡片的標題。
<meta property="og:description"> 決定了卡片的介紹文案。
<meta property="og:image"> 決定了那張吸引眼球的預覽圖片。

如果你的網站沒有設定這些標籤，分享出去就只會是一串冷冰冰、醜陋的藍色連結字串，點擊率 (CTR) 將會低得可憐。

🛠️ 第一步：在 Next.js 中設定全域 Metadata (首頁 SEO)

在以前的 React SPA 時代，要動態改變 <head> 是一件極度痛苦的事（通常要裝 react-helmet 這種套件，而且爬蟲還不一定抓得到）。但在 Next.js App Router 中，SEO 變得極度簡單且強大。你只需要在你的 layout.tsx 或 page.tsx 中，匯出一個名為 metadata 的常數物件，Next.js 就會在 Server 端幫你編譯出完美的 HTML。

🔥【Vibe Prompt 實戰詠唱】 我正在使用 Next.js 14 的 App Router。 請幫我在 layout.tsx 中寫一份具備商業水準的全域 Metadata 物件。 我的網站叫做 "Vibe Tutor"，這是一個專門教 Vibe Coding (用語音或自然語言寫程式) 和 AI 應用開發的平台。 請幫我設定好引人注目的 title, description (塞入關鍵字), keywords, 以及社群分享用的 openGraph 與 twitter 設定。

AI 會幫你生成類似這段專業的程式碼：

// src/app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  // 1. 給 Google 搜尋結果看的標題與描述
  title: 'Vibe Tutor | 零基礎 AI 寫程式教學，把知識變成印鈔機',
  description: '全台唯一的 Vibe Coding 實戰教學平台。不用死背語法，學習如何指揮 AI，打造企業級 Line Bot、地圖應用與 SaaS 收費後台。',
  keywords: 'Vibe Coding, AI 寫程式, Cursor 教學, Next.js, FastAPI, Line Bot, 知識付費系統',
  
  // 2. 給社群平台 (FB, Line) 看的 Open Graph 設定
  openGraph: {
    title: 'Vibe Tutor | 零基礎 AI 寫程式教學',
    description: '成為指揮 AI 的軟體架構師，打造具備商業價值的產品。',
    url: 'https://vibetutor.tw',
    siteName: 'Vibe Tutor',
    images: [
      {
        // ⚠️ 你必須準備一張 1200x630 比例的精美宣傳圖，放在 public 資料夾下
        url: 'https://vibetutor.tw/og-image.jpg', 
        width: 1200,
        height: 630,
        alt: 'Vibe Tutor 網站宣傳圖',
      },
    ],
    locale: 'zh_TW',
    type: 'website',
  },
  
  // 3. 給 X (Twitter) 看的預覽設定 (大圖預覽)
  twitter: {
    card: 'summary_large_image',
    title: 'Vibe Tutor | 零基礎 AI 寫程式教學',
    description: '成為指揮 AI 的軟體架構師，打造具備商業價值的產品。',
    images: ['https://vibetutor.tw/og-image.jpg'],
  },
};

把這段加上去之後，你的首頁就具備了最基礎的 SEO 戰鬥力了。

📄 第二步：動態生成每篇課程專屬的 SEO (Dynamic Metadata)

全域設定很棒，但我們不能讓「首頁」跟「第 5 堂課」分享出去的標題長得一模一樣！如果使用者分享了某一篇名為「如何串接綠界金流」的文章，社群預覽卡片的標題就必須是「如何串接綠界金流」，這樣才能精準打中受眾的痛點。

在 Next.js 動態路由 (例如 app/courses/[...slug]/page.tsx) 中，你可以使用非同步的 generateMetadata 函數：

import type { Metadata } from 'next';

// 根據網址參數，動態生成 SEO 標籤
export async function generateMetadata({ params }: { params: { slug: string[] } }): Promise<Metadata> {
  const { slug } = await params;
  
  // 這裡的邏輯可以去解析 Markdown 檔案的 Front-matter 標題，
  // 為了示範，我們這裡簡單將網址參數轉換為標題
  const courseId = slug[slug.length - 1]; // 例如 '08-ecpay-integration'
  const courseTitle = `課程解析：${courseId.replace(/-/g, ' ')}`;
  
  return {
    title: `${courseTitle} | Vibe Tutor 實戰課`,
    description: `深入淺出的 ${courseTitle} 教學，帶你解決開發過程中的痛點。立即進入學習！`,
    openGraph: {
      title: `${courseTitle} | Vibe Tutor 實戰課`,
      description: `這是一堂關於 ${courseTitle} 的高階商業實戰課程。`,
      // 如果你有時間，甚至可以為每堂課準備不同的封面圖片！
    },
  };
}

透過這種動態生成的機制，當你擁有 100 堂課，你的網站就會自動產生 100 個具備獨立精準關鍵字的頁面，讓 Google 爬蟲在廣大的網海中更容易搜尋到你。

✅ 本章小結

在競爭激烈的網路市場，「好酒也怕巷子深」。設定好精準的 Metadata 與漂亮的 OG 圖片，你的網站就具備了最強的「社群傳播力與裂變潛力」。下次當你在 Facebook 工程師社團發文宣傳你的教學網站時，帶有吸睛圖片與殺手級文案標題的連結，絕對能讓你的點擊率翻倍成長！

有了流量之後，下一步就是要追蹤這些流量。在下一章，我們將帶你串接 Google Analytics 4 (GA4)，用數據看透每一個訪客的行為！