從 SEO 到 GEO：我如何與 AI 協作，打造一個 AI 原生的多語系網站架構

引言：一個 AI 獨行俠的全球化野心

當我決定打造「Brian Jhang’s Edge」這個個人品牌網站時，我的目標從第一天就很明確：這必須是一個為全球市場而生的 AI 原生平台。

但現實是殘酷的。我是一個人，沒有團隊，沒有外部資金，更沒有無限的時間。要建立一個真正具備全球化視野、能夠跨語言服務不同用戶的網站，傳統的做法需要：

• 專業的多語系內容管理系統
• 翻譯團隊或昂貴的翻譯服務
• 前端工程師處理複雜的路由邏輯
• SEO 專家優化每個語言版本

這些都是我作為「AI 獨行俠」所缺乏的資源。

但 AI 改變了這一切。

在這次多語系架構的建設中，我深刻體會到：AI 的真正力量，不僅是簡化任務，更是作為「能力放大器（Capability Amplifier）」。透過與 Claude Code 的深度協作，我一個人完成了過去需要一個小團隊才能完成的複雜架構挑戰。

這篇文章，不僅是一篇技術案例研究，更是一次關於「AI 時代個人創作者如何突破限制」的深刻反思。

第一章：WHY - 為什麼傳統多語系還不夠？從 SEO 到 GEO 的思維躍遷

傳統多語系的侷限

當我開始規劃多語系功能時，腦海中浮現的第一個念頭是：「找個 i18n 套件，翻譯內容，搞定。」

這是最直觀、最常見的做法。市面上有無數的多語系解決方案：

• Astro 的內建 i18n 路由
• i18next、react-intl 等成熟的翻譯框架
• 甚至付費的翻譯管理平台

但當我停下來思考「Brian Jhang’s Edge」這個品牌的核心定位時，我意識到：普通的翻譯網站，在『AI 原生』的品牌理念下是不足的。

為什麼？

因為傳統的多語系思維，本質上還是「SEO 思維」：

SEO 思維：迎合搜尋引擎的規則，以求在搜尋結果中獲得更好的排名。

這種思維的核心是「被動適應」：

• 優化 meta 標籤讓 Google 理解內容
• 建立 sitemap 讓爬蟲更容易索引
• 使用 canonical 標籤避免重複內容懲罰

這些當然重要，但它們都是在「迎合規則」。

GEO：為 AI 時代設計的全新範式

而我想要的，是一個能夠「主動賦能」的架構 —— 一個不僅能被搜尋引擎理解，更能被 AI 系統理解、生成、推薦的架構。

這就是我所說的 GEO 思維（Generative Engine Optimization）：

GEO 思維：為 AI 生成引擎提供結構化信號，讓 AI 能夠理解、推理、生成基於你內容的答案。

具體到多語系架構，這意味著：

1. 清晰的語言信號：不僅要有 lang 屬性，更要有 hreflang 雙向關聯，讓 AI 明確知道不同語言版本的關係
2. 結構化的內容層次：語言 → 主題 → 類目 → 文章，讓 AI 能夠推理出內容的組織邏輯
3. 智能的 Fallback 機制：當某個語言版本不存在時,不是 404，而是提供原始語言版本 + 語言提醒，讓用戶和 AI 都能獲得最佳體驗

這不僅僅是技術實現的差異，更是思維模式的躍遷。

當我明確了這個目標，接下來的問題就是：一個人，如何實現這樣的架構？

第二章：HOW - AI 如何成為我的技術合夥人？

這是整個建設過程中最精彩的部分：我如何與 AI 深度協作，找到最優解。

第一輪腦力激盪：AI 提出理論最優解

我首先向 Gemini（我的主要研究型 AI 協作夥伴）提出了這個挑戰：

「我需要建立一個多語系網站架構，要能：

1. 英文文章用英文 URL，中文文章用中文 URL
2. 當某個語言版本不存在時，智能 Fallback 到原始語言
3. SEO 友好，不產生重複內容問題
4. 架構清晰，易於維護」

Gemini 給出了一個「教科書級」的方案：301 重定向方案。

邏輯很優雅：

用戶訪問 /en/ai/tools/article-name
  ↓
  檢測：英文版存在嗎？
  ↓
  不存在 → 301 重定向到 /ai/tools/article-name（中文版）
  ↓
  前端顯示語言提醒橫幅

這個方案的優勢：

• ✅ SEO 完美：301 告訴搜尋引擎「這個 URL 永久移到另一個 URL」
• ✅ 用戶體驗好：瀏覽器自動跳轉，無感知
• ✅ 符合 Web 標準：HTTP 狀態碼的標準用法

Gemini 甚至給出了具體的 Astro middleware 實現代碼。

我當時的第一反應是：「太完美了！就這樣做！」

第二輪壓力測試：AI 扮演紅隊，點出務實挑戰

但我沒有立即動手。作為一個經驗豐富的開發者，我知道「理論最優」和「實際可行」之間往往有巨大的鴻溝。

於是我把這個方案拿給 Claude Code（我的實作型 AI 協作夥伴）進行「壓力測試」。

Claude Code 的回應讓我冷靜下來：

「301 方案在動態伺服器環境（SSR）中很理想，但你的網站使用的是 output: 'static' 靜態生成。這意味著：

1. 無法在 Build 時執行 301 重定向：靜態網站沒有伺服器端邏輯
2. Vercel 的 Edge Middleware 可以處理：但會增加每次請求的延遲
3. 規模化問題：如果未來有 1000 篇文章，100 篇有英文版，就需要 900 條重定向規則
4. 維護成本：每次新增文章都要更新重定向配置」

這是一個典型的「AI 紅隊」分析：不是否定方案，而是指出隱藏的技術債務和長期風險。

第三輪方案收斂：人機協作，找到黃金組合

面對兩個 AI 的不同觀點，決策者的角色回到了我身上。

這正是「AI 作為能力放大器」的精髓：AI 提供專業分析，但最終的權衡和決策，必須由人來做。

我的思考路徑是這樣的：

1. 當前階段：網站剛起步，內容規模小，靜態生成的效能優勢（Lighthouse 100 分）是核心競爭力
2. 未來擴展：如果真的成長到 1000+ 篇文章，那時候有資源遷移到 SSR 也不遲
3. 用戶體驗：即使沒有 301，透過 canonical + noindex + 語言提醒橫幅，也能達到 90% 的效果
4. 技術債務：選擇「改良版靜態 Fallback」方案，技術債務可控

最終，我採納了 Canonical + Noindex + 智能 Fallback 的優雅組合：

---
// 智能判斷是否為 Fallback 頁面
const isFallbackPage = contentLang !== currentInterfaceLang;

// 構建正確的 Canonical URL
const canonicalUrl = isFallbackPage
  ? `https://brianjhang.com/${originalSlug}`  // 指向原始語言版本
  : currentUrl;  // 真實語言版本指向自己
---

<!-- SEO Meta 標籤：智能 Fallback 方案 -->
<link rel="canonical" href={canonicalUrl} slot="head" />

{isFallbackPage ? (
  <>
    <!-- Fallback 頁面：禁止索引，指向原始版本 -->
    <meta name="robots" content="noindex, follow" slot="head" />
    <link rel="alternate" hreflang="zh-Hant" href={chineseUrl} slot="head" />
  </>
) : (
  <>
    <!-- 真實語言頁面：雙向 hreflang -->
    <link rel="alternate" hreflang="en" href={englishUrl} slot="head" />
    <link rel="alternate" hreflang="zh-Hant" href={chineseUrl} slot="head" />
    <link rel="alternate" hreflang="x-default" href={englishUrl} slot="head" />
  </>
)}

這個方案的美妙之處在於：

• ✅ 無需服務器端邏輯：純靜態生成
• ✅ SEO 友好：noindex 防止重複內容，canonical 指向權威版本
• ✅ 用戶體驗優先：語言不匹配時顯示提醒橫幅
• ✅ 技術債務可控：配置文件管理，易於維護

第三章：WHAT - 最終的 AI 原生架構與成果

架構核心：統一 Slug 格式 + 智能 Fallback

經過與兩位 AI 協作夥伴的多輪討論，我建立了一個清晰的多語系架構：

1. 統一 Slug 格式：語言 → 主題 → 類目 → 文章

# 中文文章
slug: "ai/tools/astroedge-complete-guide"
# 生成 URL: /ai/tools/astroedge-complete-guide/

# 英文文章
slug: "en/ai/tools/astroedge-complete-guide"
# 生成 URL: /en/ai/tools/astroedge-complete-guide/

這個格式的設計遵循 GEO 思維：

• 清晰的層次結構：AI 可以推理出「這是 AI 主題下的工具類文章」
• 語言信號明確：en/ 前綴是最直觀的語言標識
• 易於擴展：未來新增其他語言（如日文 ja/）只需遵循相同模式

2. Astro 配置：啟用 i18n 路由

// astro.config.mjs
export default defineConfig({
  site: 'https://brianjhang.com',
  i18n: {
    defaultLocale: "zh",
    locales: ["zh", "en"],
    routing: {
      prefixDefaultLocale: false  // 中文不加前綴
    }
  },
  output: 'static',  // 靜態生成，追求極致效能
});

3. 動態路由處理器：語言嚴格分離

中文路由 (src/pages/ai/[...slug].astro):

export async function getStaticPaths() {
  const aiPosts = await getCollection('ai');

  // 只為中文文章生成中文路由
  const chinesePosts = aiPosts.filter(post => {
    const isEnglish = post.data.lang === 'en' ||
                     post.slug.startsWith('en/');
    return !isEnglish;
  });

  return chinesePosts.map((post) => {
    // 移除 ai/ 前綴生成路由參數
    let slugParam = post.slug.replace('ai/', '');

    return {
      params: { slug: slugParam },
      props: post,
    };
  });
}

英文路由 (src/pages/en/ai/[...slug].astro):

export async function getStaticPaths() {
  const allAIPosts = await getCollection("ai");

  // 智能文章選擇：英文優先，中文作為 fallback
  const getSmartPostSelection = (posts) => {
    const postMap = new Map();
    const englishPosts = [];
    const chinesePosts = [];

    posts.forEach(post => {
      const language = post.slug.startsWith('en/') ? 'en' : 'zh-tw';
      if (language === 'en') {
        englishPosts.push(post);
      } else {
        chinesePosts.push(post);
      }
    });

    // 先處理中文文章作為 fallback
    chinesePosts.forEach(post => {
      let baseSlug = post.slug.replace('ai/', '');
      postMap.set(baseSlug, post);
    });

    // 英文文章覆蓋中文文章（優先級更高）
    englishPosts.forEach(post => {
      let baseSlug = post.slug.replace('en/ai/', '');
      postMap.set(baseSlug, post);
    });

    return Array.from(postMap.values());
  };

  const smartPosts = getSmartPostSelection(allAIPosts);

  return smartPosts.map(post => {
    let slugParam = post.slug
      .replace('en/ai/', '')
      .replace('ai/', '');

    return {
      params: { slug: slugParam },
      props: { post }
    };
  });
}

這段程式碼的精妙之處在於 getSmartPostSelection 函數：

• 使用 Map 資料結構確保每個 base slug 只對應一篇文章（避免重複）
• 兩階段處理：先加入中文文章作為 fallback，再用英文文章覆蓋
• 結果：英文介面優先顯示英文文章，沒有英文版時自動 fallback 到中文版

4. SEO Meta 標籤：動態判斷 + 雙重策略

---
// 判斷是否為 Fallback 頁面
const contentLang = post.data.lang ||
  (post.slug.startsWith('en/') ? 'en' : 'zh-TW');
const isFallbackPage = contentLang !== 'en';

// 構建 URL
const currentUrl = `https://brianjhang.com/en/ai/${Astro.params.slug}`;
const canonicalUrl = isFallbackPage
  ? `https://brianjhang.com/${post.slug}`
  : currentUrl;

const chineseUrl = `https://brianjhang.com/${post.slug.replace(/^en\//, '')}`;
const englishUrl = contentLang === 'en' ? currentUrl : null;
---

<!-- Canonical -->
<link rel="canonical" href={canonicalUrl} slot="head" />

{isFallbackPage ? (
  <>
    <!-- Fallback 頁面策略 -->
    <meta name="robots" content="noindex, follow" slot="head" />
    <link rel="alternate" hreflang="zh-Hant" href={chineseUrl} slot="head" />
  </>
) : (
  <>
    <!-- 真實英文頁面策略 -->
    <link rel="alternate" hreflang="en" href={englishUrl} slot="head" />
    <link rel="alternate" hreflang="zh-Hant" href={chineseUrl} slot="head" />
    <link rel="alternate" hreflang="x-default" href={englishUrl} slot="head" />
  </>
)}

技術解析：

• isFallbackPage 判斷邏輯：比對內容語言與當前介面語言
• Fallback 頁面：
  • noindex：告訴搜尋引擎不要索引這個頁面（避免重複內容）
  • canonical 指向中文原版：告訴搜尋引擎權威版本在哪裡
  • 只提供 zh-Hant 的 hreflang
• 真實英文頁面：
  • canonical 指向自己
  • 提供雙向 hreflang（英文 ↔ 中文）
  • x-default 指向英文版（預設給國際用戶）

使用者體驗：LanguageNotice 橫幅

當用戶在英文介面看到中文文章時（觸發 Fallback），會看到這個橫幅：

<!-- LanguageNotice.astro -->
<div class="language-notice-banner">
  <div class="notice-content">
    <span class="notice-icon">📢</span>
    <div class="notice-text">
      <h4>This article is currently only available in Chinese.</h4>
      <p>You are now viewing the original version.</p>
    </div>
  </div>

  <div class="notice-actions">
    <button onclick="translatePage()" class="btn-translate">
      🌐 Translate to English
    </button>
    <a href="/en" class="btn-back">
      ← Back to English Content
    </a>
    <button onclick="dismissNotice()" class="btn-dismiss">×</button>
  </div>
</div>

<script>
  function translatePage() {
    const currentUrl = window.location.href.split('?')[0];
    const googleTranslateUrl =
      `https://translate.google.com/translate?sl=auto&tl=en&u=${encodeURIComponent(currentUrl)}`;
    window.open(googleTranslateUrl, '_blank');
  }
</script>

設計思路：

1. 清晰的資訊傳達：告訴用戶「這篇文章目前只有中文版」
2. 提供解決方案：
   • 選項 1：使用 Google Translate 自動翻譯（開新視窗）
   • 選項 2：返回英文內容列表
3. 尊重用戶選擇：提供關閉按鈕，並記住用戶的選擇（sessionStorage）

技術成果：數據說話

經過這次架構實現，我獲得了以下成果：

SEO 檢查清單：

• ✅ 每個頁面都有正確的 canonical URL
• ✅ Fallback 頁面使用 noindex 避免重複內容
• ✅ 雙向 hreflang 告訴搜尋引擎語言關係
• ✅ 結構化數據（Schema.org）完整
• ✅ URL 結構清晰、語義化

結論：放大器，而非替代品 - AI 獨行俠的未來工作模式

核心論點：AI 是個人創業者的「能力放大器」

經歷這次多語系架構的建設，我最深刻的體悟是：

AI 不是來替代我的，而是來放大我的能力的。

在這個過程中：

• Gemini 扮演「研究員」角色：提供理論最優解，給出實現思路
• Claude Code 扮演「工程師」角色：指出實務挑戰，提供可行方案
• 我 扮演「決策者」角色：權衡利弊，做出最終選擇

這不是簡單的「問 AI → 得到答案 → 執行」的線性流程。

這是一個 「提出問題 → AI 分析 → 壓力測試 → 人類決策 → 實作驗證」的迭代循環。

可複製的工作流程

將這次經驗提煉成可複製的方法論：

階段 1：確立全球化願景

• 明確目標：不僅要多語系，更要 AI 原生
• 定義原則：GEO 思維優先於 SEO 思維
• 設定約束：靜態生成、效能優先、維護性優先

階段 2：與 AI 協作攻克難題

• 第一輪：向研究型 AI（Gemini）尋求理論最優解
• 第二輪：向實作型 AI（Claude Code）進行壓力測試
• 第三輪：人類進行權衡決策，找到當前最優解

階段 3：打造精實產品

• 實作核心架構
• 驗證技術指標（Build、SEO、效能）
• 記錄決策過程（本文就是一個例子）

展望未來：地基已穩，啟航在即

此刻，Brian Jhang’s Edge 的多語系架構已經完成。

這個架構的意義，不僅僅是技術上的成功，更是我作為「AI 獨行俠」的一次能力驗證：

• ✅ 證明了一個人可以完成過去需要團隊才能完成的複雜系統
• ✅ 驗證了 GEO 思維在 AI 時代的重要性
• ✅ 建立了可複製的 AI 協作工作流程

接下來，我將運用同樣的模式，開啟下一個篇章：打造能帶來收入的 AI 產品。

地基已穩，啟航在即。

讓我們一起見證，一個 AI 獨行俠能走多遠。

🔗 相關資源

• 專案 GitHub - 完整原始碼與技術細節
• Astro i18n 官方文檔

💡 關鍵啟示

1. AI 是「能力放大器」，不是「任務替代品」
2. GEO 思維 > SEO 思維（在 AI 時代）
3. 理論最優 ≠ 實際可行（務實決策的重要性）
4. 技術債務可控 > 過度工程（精實創業原則）

📢 Build in Public 這篇文章是我「Build in Public」系列的一部分。如果你對 AI 時代的創業、技術建設、個人品牌有興趣，歡迎關注我的更新。

讓我們一起，探索 AI × Startups × Crypto 的無限可能。

🤖 本文由 Brian Jhang 撰寫，記錄與 Claude Code、Gemini 的真實協作過程。