SEO 最佳實踐：如何讓你的網站被搜尋引擎看見

每次接到新網站開發案，我們都會做完整的 SEO 基礎建置。這些工作佔不到總開發時間的 10%，卻能讓網站被搜尋引擎正確索引的機率大幅提升。以下是我們在每個案子中必做的 SEO 清單。

✅ 這份清單適用於任何 HTML/靜態網站，包括 GitHub Pages、Vercel 部署的單頁應用。

1. 語意化 HTML 結構

搜尋引擎透過 HTML 標籤理解頁面結構。使用正確的語意化標籤，比「一堆 div」更容易被理解：

<header>、<nav>、<main>、<article>、<footer>
每頁只有一個 <h1>，且包含主要關鍵字
標題層級順序正確：h1 → h2 → h3，不跳級
圖片必須有描述性的 alt 屬性
連結文字要有意義，避免「點擊這裡」

2. Meta 標籤三件套

每個頁面最基本要有以下三個 meta：

<!-- 精確描述頁面內容，含主要關鍵字，55-65 字元 -->
<title>PAGE TITLE | 品牌名稱</title>

<!-- 搜尋結果的說明文字，120-160 字元，含行動呼籲 -->
<meta name="description" content="..." />

<!-- 正規化 URL，避免重複內容問題 -->
<link rel="canonical" href="https://你的域名/此頁完整路徑" />

💡 canonical 標籤尤其重要：當同一個頁面有多個 URL（有無 trailing slash、有無 query string）時，告訴 Google 哪個才是「正版」。

3. Open Graph 社群分享

OG 標籤控制在 LINE、Facebook、Twitter 分享時顯示的標題、說明和圖片：

<meta property="og:type" content="website" />
<meta property="og:url" content="完整頁面 URL" />
<meta property="og:title" content="分享標題（可與 title 不同）" />
<meta property="og:description" content="分享說明文字" />
<meta property="og:image" content="https://域名/image.png" />
<!-- 圖片建議尺寸：1200×630px -->

4. JSON-LD 結構化資料

結構化資料是告訴搜尋引擎（以及 AI 爬蟲）「這個頁面在說什麼」的機器可讀格式。它不會直接影響排名，但有機會讓 Google 在搜尋結果中顯示 Rich Snippets（FAQ 展開、評星等），也有助於 AI SEO（Generative Engine Optimization）。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "你的品牌名",
  "url": "https://你的網站",
  "description": "品牌說明",
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer service",
    "email": "your@email.com"
  }
}
</script>

對於部落格文章，可以加入 BlogPosting schema，讓 Google 知道文章的發佈日期與作者。對於服務頁，可以加入 Service schema。

5. sitemap.xml 與 robots.txt

這兩個檔案放在網站根目錄，幫助 Google 爬蟲有效率地探索你的網站：

# robots.txt — 指引爬蟲，並告知 sitemap 位置
User-agent: *
Allow: /
Sitemap: https://你的域名/sitemap.xml

<!-- sitemap.xml — 列出所有重要頁面 -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://你的域名/</loc>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

完成後，到 Google Search Console 提交 sitemap URL，讓 Google 立即知道你的網站。

6. Core Web Vitals

Google 把頁面體驗納入排名因素，三個核心指標：

LCP（Largest Contentful Paint）：最大內容渲染，目標 < 2.5s。優化方向：壓縮圖片、使用 WebP 格式、加 CDN
CLS（Cumulative Layout Shift）：版面位移分數，目標 < 0.1。優化方向：為圖片指定 width/height，避免動態插入內容
INP（Interaction to Next Paint）：互動延遲，目標 < 200ms。優化方向：減少 JS 主執行緒阻塞

用 Chrome DevTools 的 Lighthouse 或 PageSpeed Insights 就能快速診斷。

7. 圖片 SEO

檔名使用描述性英文（line-liff-demo.webp，不是 IMG_0012.jpg）
alt 屬性描述圖片內容，含關鍵字但不要堆砌
使用 WebP 格式，比 JPEG 小 25-35%
超過 100KB 的圖片考慮使用 loading="lazy"

AI SEO / GEO 補充

隨著 ChatGPT、Gemini、Perplexity 等 AI 搜尋工具普及，讓 AI 爬蟲正確理解你的網站變得同樣重要。關鍵做法：

在根目錄放 llms.txt（類似 robots.txt，專為 LLM 說明你的網站定位與服務）
JSON-LD 中的 knowsAbout、description 寫清楚，方便 AI 引用
FAQ 內容用 FAQPage schema 標記，AI 搜尋最喜歡引用問答格式
內文中自然地出現你的品牌名稱與服務關鍵字，方便 AI 建立關聯