結論先講
技術 SEO 就是幫 Google 鋪路。 你的內容寫得再好,如果 sitemap 壞了、canonical 指錯、結構化資料沒加,Google 根本不知道你的頁面存在,或者找到了也看不懂。技術 SEO 不花你太多時間,但漏掉任何一項都可能讓你的內容石沉大海。
我自己的經驗:加上正確的結構化資料後,Google 搜尋結果從純文字變成帶有 FAQ rich snippet,CTR 從 2.1% 跳到 4.8%。就改了一段 JSON-LD。
Sitemap:主動告訴 Google 你有什麼
Sitemap 就是你網站的目錄清單。Google 不一定能爬到你的每個頁面,但 sitemap 能確保它至少知道這些頁面的存在。
XML Sitemap 基本結構
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://your-site.com/seo/02-technical-seo</loc>
<lastmod>2026-03-15</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://your-site.com/seo/03-content-seo</loc>
<lastmod>2026-03-15</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>自動生成 Sitemap
大多數靜態網站產生器都有 sitemap 外掛,不用手寫:
| 框架 | 方式 | 備註 |
|---|---|---|
| Quartz | 內建自動產生 | quartz build 就會輸出 sitemap.xml |
| Next.js | next-sitemap 套件 | 需要在 next.config.js 設定 |
| Hugo | 內建 | 預設就會產生 |
| Gatsby | gatsby-plugin-sitemap | 加到 gatsby-config.js |
驗證你的 Sitemap
產生之後一定要驗證:
- 瀏覽器直接打開
https://your-site.com/sitemap.xml,確認格式正確 - 用 XML Sitemap Validator 線上驗證
- 在 Google Search Console 提交後,看有沒有錯誤
robots.txt:門口的告示牌
robots.txt 告訴爬蟲哪些可以爬、哪些別碰。放在網站根目錄 /robots.txt。
# 基本設定 — 允許所有爬蟲
User-agent: *
Allow: /
# 別爬管理後台和 API
Disallow: /admin/
Disallow: /api/
# 別爬搜尋結果頁(避免重複內容)
Disallow: /search?
# 告訴爬蟲 sitemap 在哪
Sitemap: https://your-site.com/sitemap.xml常見地雷:
- 不要
Disallow: /static/— Googlebot 需要你的 CSS/JS 來渲染頁面 - 不要
Disallow: /images/— 你的圖片也可以出現在 Google 圖片搜尋 - 測試環境記得加
Disallow: /,但上線後一定要拿掉
Canonical URL:告訴 Google 誰是正版
當同一篇內容有多個 URL 時(常見於有/沒有 www、HTTP/HTTPS、帶查詢參數),Google 不知道該索引哪個。canonical 標籤解決這個問題。
什麼時候需要 canonical?
| 情境 | 範例 | 要指 canonical |
|---|---|---|
| www vs non-www | www.site.com/post 和 site.com/post | 選一個當正版 |
| HTTP vs HTTPS | http:// 和 https:// | 指向 HTTPS |
| 帶參數的 URL | /post?ref=twitter | 指向不帶參數的 URL |
| 分頁內容 | /articles?page=2 | 每頁指向自己(分頁不用合併) |
| 跨站轉載 | Medium 也發了同一篇 | 你自己的站是 canonical |
實作方式
<!-- 在 <head> 中加入 -->
<link rel="canonical" href="https://your-site.com/seo/02-technical-seo">注意事項:
- canonical 必須是完整的絕對 URL(包含
https://) - 自我指向也要加 — 每個頁面都應該有 canonical 指向自己
- canonical 是建議,不是指令 — Google 可能會忽略不合理的 canonical
結構化資料:讓搜尋結果更豐富
結構化資料用 Schema.org 的 JSON-LD 格式,告訴 Google 你的頁面內容是什麼類型。好處是搜尋結果會出現 rich snippet(星星評分、FAQ 展開、麵包屑等)。
Article 結構化資料
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "技術 SEO 實作:sitemap、canonical、結構化資料一次搞定",
"description": "從 XML sitemap 到 JSON-LD 的完整技術 SEO 實作指南",
"author": {
"@type": "Person",
"name": "Terry Yao"
},
"datePublished": "2026-03-15",
"dateModified": "2026-03-15",
"image": "https://your-site.com/covers/seo-02-technical-seo-og.webp",
"publisher": {
"@type": "Organization",
"name": "Terry's Blog"
}
}
</script>BreadcrumbList 麵包屑
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "首頁", "item": "https://your-site.com/" },
{ "@type": "ListItem", "position": 2, "name": "SEO 系列", "item": "https://your-site.com/seo/" },
{ "@type": "ListItem", "position": 3, "name": "技術 SEO 實作" }
]
}
</script>FAQ 結構化資料
這個最實用,直接在搜尋結果展開問答:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "sitemap 多久更新一次?",
"acceptedAnswer": {
"@type": "Answer",
"text": "每次發布新文章或修改舊文章後就應該更新。靜態網站產生器通常在 build 時自動產生。"
}
},
{
"@type": "Question",
"name": "canonical 指錯了會怎樣?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Google 可能會索引錯誤的 URL,或者直接不索引你的頁面。用 GSC 的 URL 檢查工具確認。"
}
}
]
}
</script>驗證你的結構化資料:Google Rich Results Test。
Meta Tags 檢查清單
每個頁面的 <head> 至少要有這些:
<head>
<!-- 基本 SEO -->
<title>技術 SEO 實作指南 | Terry's Blog</title>
<meta name="description" content="從 sitemap 到結構化資料,150 字以內">
<link rel="canonical" href="https://your-site.com/seo/02-technical-seo">
<!-- Open Graph(社群分享)-->
<meta property="og:title" content="技術 SEO 實作指南">
<meta property="og:description" content="同上,但可以稍微不同">
<meta property="og:image" content="https://your-site.com/og-image.webp">
<meta property="og:url" content="https://your-site.com/seo/02-technical-seo">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="技術 SEO 實作指南">
<meta name="twitter:description" content="同上">
<meta name="twitter:image" content="https://your-site.com/og-image.webp">
</head>HTTP 狀態碼與 SEO 的關係
不是所有 HTTP 狀態碼都跟 SEO 有關,但這幾個你一定要懂:
| 狀態碼 | 意義 | SEO 影響 |
|---|---|---|
| 200 | 正常 | 會被索引 |
| 301 | 永久轉址 | SEO 權重會轉移到新 URL(90%+) |
| 302 | 暫時轉址 | SEO 權重不轉移,Google 會繼續索引舊 URL |
| 404 | 找不到 | 少量沒事,大量會降權 |
| 410 | 已永久移除 | 告訴 Google「這頁真的不要了」,比 404 更明確 |
| 503 | 暫時維護 | Google 會晚點再來,不會馬上從索引移除 |
實務重點: 網站搬家一定要用 301,不要用 302。維護中用 503 + Retry-After header。
Mobile-First Indexing
從 2023 年 10 月開始,Google 100% 使用 mobile-first indexing。意思是 Google 用你的手機版頁面來決定排名,不是桌面版。
檢查項目:
- 手機版和桌面版的內容要一致(不要手機版少東西)
<meta name="viewport" content="width=device-width, initial-scale=1">一定要有- 字體大小至少 16px,按鈕間距至少 48px
- 用 PageSpeed Insights 測手機版分數
網站速度基礎
Google 的 Core Web Vitals 三個指標:
| 指標 | 衡量什麼 | 好的標準 |
|---|---|---|
| LCP(Largest Contentful Paint) | 最大內容元素載入時間 | < 2.5 秒 |
| CLS(Cumulative Layout Shift) | 頁面載入時的跳動幅度 | < 0.1 |
| INP(Interaction to Next Paint) | 互動後的回應速度 | < 200 毫秒 |
快速改善方向:
- 圖片用 WebP 格式、設定
width和height屬性(減少 CLS) - CSS 放
<head>,JS 加defer或async - 用 CDN(Cloudflare 免費方案就夠)
- 靜態網站 > 伺服器端渲染 > 客戶端渲染(SEO 友善度排序)
FAQ
sitemap 多久更新一次?
每次有新文章或修改舊文章後就應該更新。靜態網站產生器在每次 build 時自動產生新的 sitemap,所以你只要確保 CI/CD 有跑就好。
canonical 和 redirect 有什麼差別?
Redirect(301/302)是讓瀏覽器自動跳轉到新 URL。Canonical 不會跳轉,只是告訴 Google「這兩個頁面是同一個內容,請索引 canonical 指向的那個」。如果使用者不需要跳轉,用 canonical。如果舊 URL 不該存在了,用 301 redirect。
結構化資料一定要加嗎?
不加不會影響排名,但加了會讓搜尋結果更好看(rich snippet),提升 CTR。投入時間很少,效果明顯,推薦每個網站都加。
robots.txt 寫錯了怎麼辦?
修正後,到 GSC 的「robots.txt 測試工具」驗證。Google 大約每天會重新抓取你的 robots.txt,但你也可以在 GSC 手動要求重新爬取。
我用 SPA(React/Vue),SEO 怎麼辦?
務必做 SSR(Server-Side Rendering)或 SSG(Static Site Generation)。純 CSR 的 SPA,Googlebot 可能看到空白頁。Next.js、Nuxt.js 都有內建 SSR/SSG 支援。
下一步
技術 SEO 做完,接下來就是內容。技術面決定 Google 「能不能」看到你,內容面決定 Google 「要不要」推薦你。