結論先講

技術 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.jsnext-sitemap 套件需要在 next.config.js 設定
Hugo內建預設就會產生
Gatsbygatsby-plugin-sitemap加到 gatsby-config.js

驗證你的 Sitemap

產生之後一定要驗證:

  1. 瀏覽器直接打開 https://your-site.com/sitemap.xml,確認格式正確
  2. XML Sitemap Validator 線上驗證
  3. 在 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-wwwwww.site.com/postsite.com/post選一個當正版
HTTP vs HTTPShttp://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>
<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 毫秒

快速改善方向:

  1. 圖片用 WebP 格式、設定 widthheight 屬性(減少 CLS)
  2. CSS 放 <head>,JS 加 deferasync
  3. 用 CDN(Cloudflare 免費方案就夠)
  4. 靜態網站 > 伺服器端渲染 > 客戶端渲染(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 「要不要」推薦你。

本系列文章

  1. SEO 基礎與注意事項
  2. 技術 SEO 實作(本篇)
  3. 內容 SEO 策略
  4. 網站搬家 SEO
  5. GSC 實戰指南
  6. Open Graph 與社群分享
  7. AEO 基礎:AI 搜尋引擎怎麼找答案
  8. AEO 內容策略
  9. SEO vs AEO 整合策略
  10. Core Web Vitals 效能優化
  11. AEO 監控自動化
  12. 案例:從 0 到被搜到