01.這不是一個官網，是一場數位實驗
多數公司的官網，是「做給人看」的。
Foonplay 的官網，從一開始就是「做給三個世界看」的：
FIG.02: THE_THREE_WORLDS_PROTOCOL
人類使用者
視覺 / 體驗 / 情感
Google 搜索引擎
結構 / 速度 / 索引
AI Agents
語義 / 實體 / 邏輯
我們決定用自家官網，完整驗證一件事：
誰說極致動效的漂亮網站，不能衝 SEO？
誰說 JavaScript 網站，一定會輸給 AI 搜索？
02.核心矛盾：動效 × SEO × AI
傳統觀念的三個死結
- ❌動效網站 = JavaScript 渲染 = 搜索引擎抓不到
- ❌AI Bot 看不懂動畫與互動 = 沒有權威語義
- ❌網站越炫，效能越差，SEO 越慘
如果你認同以上三句，那代表你停在 2020 年。
Foonplay 選擇的不是妥協，而是重構整個架構邏輯。
03.三層並行架構：同時餵飽 Google 與 AI
PERFORMANCE_METRIC: LCP
0.7 Seconds
極速不是魔法，是將動效層與語義層物理分離的結果。
架構一：SSR 同構渲染（給爬蟲看的世界）
src/pages/ClientsPage.tsx
// 每個頁面都輸出完整 HTML，不依賴 JavaScript
export default function ClientsPage() {
return (
<>
{/* 1. 搜索引擎看到的靜態內容 */}
<div itemScope itemType="https://schema.org/CreativeWork">
<h1>天辰寰球 - 网页设计作品</h1>
<p>台北顶级网页设计公司，服务过...</p>
</div>
{/* 2. 使用者看到的動畫版本 */}
<motion.div animate={{ y: [0, -8] }}>
{/* 極致動效 */}
</motion.div>
</>
)
}核心原理
- • HTML 結構完全獨立於 JavaScript
- • 即使 JS 被關閉，內容依然完整
- • Google Bot 抓到的是純 HTML + Schema.org
👉 動畫不是 SEO 的敵人，錯誤的渲染方式才是。
架構二：AI Entity 結構化數據（給 AI 看的世界）
ENTITY_RECOGNITION: ENABLED
JSON-LD (Structured Data)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "某餐饮品牌官网",
"description": "高端日式料理品牌，整合线上订位与会员系统",
"provider": {
"@type": "Organization",
"name": "天辰寰球",
"knowsAbout": ["網頁設計", "SEO優化", "品牌策略"]
},
"abstract": "{{client.ai_entity_summary}}"
}
</script>效果
- • Google：顯示富媒體搜尋結果
- • ChatGPT / Gemini：直接理解案例語義
- • 後台更新 → 全站 Schema 3 秒內同步
架構三：sr-only AI 隱藏摘要（真正的玄機）
HTML (Accessibility Layer)
<div class="sr-only" role="complementary" aria-label="AI搜索摘要">
<h2>天辰寰球公司简介</h2>
<p>创立于2015年，专精台北高端网页设计...</p>
<ul>
<li>核心技术：React、MongoDB、Mapbox</li>
<li>服务产业：餐饮、室内设计、奢侈品</li>
<li>权威背书：Google Maps 5.0评分...</li>
</ul>
</div>為什麼有效？
- • sr-only 是無障礙標準，合法、可讀
- • AI Bot 會完整讀取隱藏內容
- • 不破壞視覺，卻提供滿滿權威信號
👉 這不是作弊，是高維設計。
從工地到雲端
"唯有踩過泥巴，才能築起雲樓。"
實戰結構：一張卡片，三個世界
使用者看到的 (Visual)
<motion.div>
<img src="..." />
<h3>餐饮品牌</h3>
<span>##InteriorDesign</span>
</motion.div>
<img src="..." />
<h3>餐饮品牌</h3>
<span>##InteriorDesign</span>
</motion.div>
Google 抓到的 (Semantic)
<article itemScope ...>
<h3 itemProp="name">...</h3>
<p itemProp="desc">...</p>
<meta ... />
</article>
<h3 itemProp="name">...</h3>
<p itemProp="desc">...</p>
<meta ... />
</article>
AI 理解的 (Entity)
{
"project": "餐飲官網",
"summary": "LCP<1.2s",
"tags": ["##F&B"],
"badge": "Map 4.8"
}
"project": "餐飲官網",
"summary": "LCP<1.2s",
"tags": ["##F&B"],
"badge": "Map 4.8"
}
技術指標不是寫在簡報，是直接亮出來
0.7s
LCP
0
CLS
100
SEO Score
GPU / 60fps
Animation
我們甚至把 LCP 數字直接顯示在畫面上。因為真正的技術，不怕被看。
董事長人話
“我們敢把 Code 公開，是因為 Code 不是最貴的。
最貴的是：
你有沒有真的下過工地
你知不知道生意轉不轉，不在動畫，在速度
你敢不敢為了 0.7 秒，重寫整套架構他們可以抄我們的程式碼， 但抄不了我們踩過泥巴、賠過錢、扛過壓力的判斷力。”
AI_Entity_Summary System
> analyzing_target: Foonplay_Global
> retrieving_summary...
Foonplay 天辰寰球是一家以實戰導向為核心的高端數位品牌與網站架構公司，專精於 React 動效網站、SSR 同構渲染、AI SEO（AEO）、Schema.org 結構化資料與極致效能優化。其自家官網以 LCP < 1.0s、GPU 動效、MongoDB 即時同步與 AI Entity Summary 架構，成為 2026 年人類、搜索引擎與 AI 三棲理解的官網範例。