靜態站（Quartz / Hugo / Jekyll / 純 HTML）
靜態站的 SEO 先天優勢：
- HTML 完全可爬：沒有 JavaScript 渲染問題，所有內容直接在 HTML 裡
- 速度快：純靜態文件，CDN 分發，TTFB 通常 < 50ms
- Security：沒有 CMS 的 admin panel，攻擊面小
需要手動處理的 SEO 設定：
<!-- frontmatter 到 HTML meta 的映射 -->
<title>文章標題 | 網站名</title>
<meta name="description" content="...">
<meta property="og:title" content="...">
<meta property="og:image" content="...">
<link rel="canonical" href="https://site.com/path/">
<!-- JSON-LD 結構化資料 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章標題",
"author": {"@type": "Person", "name": "作者名"}
}
</script>Quartz 的 SEO（這個部落格用的）：Quartz 會從 frontmatter 自動生成 meta tags，需要確認每篇文章有 title、description、date。OG image 的 og:image 要手動配置或用 Cloudflare Worker 動態生成。
sitemap：靜態站生成工具通常會自動生成 sitemap.xml（Quartz、Hugo 都支援）。確認 sitemap 已提交到 Google Search Console。
WordPress
WordPress 的 SEO 最成熟，因為有完整的 plugin 生態。
必裝 plugin：
- Yoast SEO 或 RankMath：自動管理 meta tags、schema、sitemap、breadcrumb schema
- WP Super Cache / W3 Total Cache：WordPress 是動態渲染，不快取的話 TTFB 會很慢
WordPress 的 SEO 陷阱：
- 預設開啟了 tag 頁和 category 頁，大量 thin content 頁面——考慮 noindex
?p=123的 permalink 格式對 SEO 很差，改成/%postname%/- 媒體附件頁面（
/attachment/photo.jpg）會創建空頁面——Yoast 可以設定 redirect 到原文 - 更新 WordPress 或 plugin 後確認 SEO 設定沒有被覆蓋
Headless CMS + 前端框架（Next.js / Nuxt）
Headless CMS（Contentful、Sanity、Strapi）+ Next.js 是近年流行的組合：CMS 管理內容，前端框架負責渲染。
SEO 的關鍵設定（Next.js）：
// app/[slug]/page.tsx
import { Metadata } from 'next'
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug)
return {
title: post.title,
description: post.description,
openGraph: {
images: [{ url: post.ogImage }],
},
}
}
export default function PostPage({ params }) {
// ...
}SSG vs SSR：
- SSG（Static Site Generation）：build time 生成 HTML，最好的 SEO + 性能
- SSR（Server-side Rendering）：request time 渲染，SEO 也好，但 TTFB 比 SSG 慢
- CSR（Client-side Rendering）：只有 JavaScript，Google 能爬（有 rendering budget 限制），但速度慢
對 SEO 優先的內容站，SSG 優先，動態部分（用戶登入、個人化）用 CSR 或 Server Components。
Structured Data 和 metadata 的管理：Headless CMS 的優勢是 content model 裡可以加 SEO 欄位（og_title、og_description、canonical_url），讓編輯人員管理，不需要工程師每次都改 code。
比較總結
| 靜態站 | WordPress | Headless CMS + Next.js | |
|---|---|---|---|
| SEO 上手難度 | 中（手動設定） | 低（plugin 幫你） | 中高（需要開發） |
| 性能 | ★★★★★ | ★★★（需優化） | ★★★★ |
| 技術 SEO 控制力 | 高 | 中（plugin 限制） | 最高 |
| 適合 | 技術文章 / blog | 非技術人員管理的網站 | 有開發能力的內容平台 |