Astro 網站技術 SEO 完整指南

為什麼 Astro 天生對 SEO 友善

Astro 預設輸出接近零 JavaScript 的靜態 HTML，這對 SEO 有幾個直接優勢：

• LCP（最大內容繪製） 極快，搜尋引擎可快速解析
• Cumulative Layout Shift 幾乎為零（無客戶端 hydration 造成的排版跳動）
• 完整 HTML 在第一次回應就可讀，無需等待 JS 執行

Canonical Tag 設定

避免重複內容問題，每頁都要有正確的 canonical：

---
// layouts/MainLayout.astro
const canonicalUrl = Astro.props.canonical ?? Astro.url.href;
---
<link rel="canonical" href={canonicalUrl} />

對動態路由（如 [slug].astro），Astro.url.href 會自動帶入當前 URL，通常不需要手動覆寫。

Sitemap 自動生成

安裝 @astrojs/sitemap：

npx astro add sitemap

在 astro.config.mjs 設定 site：

export default defineConfig({
  site: "https://yourdomain.com",
  integrations: [sitemap()],
});

結構化資料 (JSON-LD)

對文章頁加入 Article schema，提升 Google 富結果機率：

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.data.title,
  "author": { "@type": "Person", "name": post.data.author },
  "datePublished": post.data.publishedAt.toISOString(),
  "description": post.data.excerpt,
})} />

Open Graph / Twitter Card

確保社群分享有預覽圖：

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />

Core Web Vitals 優化重點

指標	Astro 預設表現	額外優化
LCP	優秀（靜態 HTML）	使用 <Image /> 元件自動 WebP + lazy
FID / INP	極佳（少 JS）	client:visible 延遲非必要元件
CLS	極佳	圖片設定明確寬高

結語

Astro 把 SEO 的基礎工作做得很好，但細節仍需要人工確認。建立一個 SEO checklist 並在每次發布前過一遍，是維持搜尋流量最低成本的方式。