Google SEO 實戰指南

Google Search Console 設定、Meta Tags、Structured Data 與 Core Web Vitals 優化

Overview##

SEO（Search Engine Optimization）是讓你的網站被 Google 找到、理解、並排在搜尋結果前面的技術與策略。

Google 搜尋引擎的運作流程：

graph LR
  A[Crawl] --> B[Index]
  B --> C[Rank]
  C --> D[SERP]

階段	說明	你能影響的
Crawl	Googlebot 爬取網頁內容	robots.txt、sitemap、連結結構
Index	解析並儲存頁面資訊	Meta tags、structured data、內容品質
Rank	根據演算法排序	Core Web Vitals、反向連結、相關性
SERP	顯示搜尋結果頁面	Title、description、rich results

Note

Google 明確表示不使用 meta keywords 標籤來排名。專注在內容品質、技術健康度和使用者體驗上，而非堆砌關鍵字。

Google Search Console##

Google Search Console（GSC）是管理網站在 Google 搜尋表現的免費工具。設定 SEO 的第一步就是註冊 GSC。

驗證網站所有權###

GSC 提供五種驗證方式：

方式	操作	適用場景
DNS TXT Record	在 DNS 加入 TXT 紀錄	推薦，驗證整個 domain
HTML 檔案	上傳檔案到根目錄	簡單直接
HTML Meta Tag	在 `<head>` 加入 meta 標籤	無法上傳檔案時
Google Analytics	已安裝 GA 的網站	免額外設定
Google Tag Manager	已安裝 GTM 的網站	免額外設定

推薦使用 DNS TXT Record——驗證整個 domain，子域名也一併涵蓋：

# 在 Cloudflare DNS 加入 TXT 紀錄
example.com.    IN  TXT  "google-site-verification=abc123..."

提交 Sitemap###

Sitemap 告訴 Google 你的網站有哪些頁面、更新頻率和優先級：

<!-- sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-04-18</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog/seo-guide</loc>
    <lastmod>2026-04-18</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

提交路徑：GSC → Sitemaps → 輸入 sitemap.xml → Submit

Tip

Astro 的 @astrojs/sitemap 整合會在 build 時自動產生 sitemap-index.xml，不需要手動維護。只需在 astro.config.ts 設定 site URL 即可。

常見索引問題###

GSC 的「Pages」報表會顯示索引狀態。常見問題：

狀態	原因	解法
Crawled - not indexed	頁面品質不足或重複	改善內容、加 canonical
Blocked by robots.txt	robots.txt 阻擋爬取	檢查並移除阻擋規則
Duplicate without canonical	多個 URL 指向同一內容	加入 `<link rel="canonical">`
Soft 404	頁面存在但內容空或錯誤	修正內容或回傳真正的 404

Meta Tags##

Meta tags 是 HTML <head> 中的標籤，告訴搜尋引擎這個頁面是什麼。

基本 SEO Meta Tags###

<head>
  <!-- 標題：50-60 字元，主要關鍵字放前面 -->
  <title>Google SEO 實戰指南 | The Own Lab</title>

  <!-- 描述：120-160 字元，吸引點擊 -->
  <meta
    name="description"
    content="從 Google Search Console 設定到 Core Web Vitals 優化，完整的 SEO 實務指南。"
  />

  <!-- Canonical：指定頁面的正規 URL -->
  <link rel="canonical" href="https://example.com/blog/seo-guide" />

  <!-- Robots：控制爬取和索引行為 -->
  <meta name="robots" content="index, follow" />
</head>

標籤	功能	最佳實踐
`<title>`	SERP 標題	50-60 字元，關鍵字在前
`meta description`	SERP 摘要	120-160 字元，含 CTA
`link canonical`	正規 URL	避免重複內容問題
`meta robots`	爬取控制	`index, follow` 為預設

Open Graph（社群分享）###

Open Graph 標籤控制頁面在社群平台分享時的呈現：

<head>
  <!-- Open Graph -->
  <meta property="og:title" content="Google SEO 實戰指南" />
  <meta property="og:description" content="完整的 SEO 實務指南" />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/blog/seo-guide" />
  <meta property="og:type" content="article" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Google SEO 實戰指南" />
  <meta name="twitter:description" content="完整的 SEO 實務指南" />
  <meta name="twitter:image" content="https://example.com/og-image.jpg" />
</head>

Tip

OG image 建議尺寸為 1200x630px。使用 Facebook Sharing Debugger 和 Twitter Card Validator 預覽分享效果。

Structured Data##

Structured Data（結構化資料）用 JSON-LD 格式告訴 Google 頁面內容的語義結構，讓搜尋結果顯示 Rich Results（星等、價格、FAQ 展開等）。

JSON-LD 基礎###

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Google SEO 實戰指南",
    "description": "從 Search Console 設定到 Core Web Vitals 優化",
    "author": {
      "@type": "Person",
      "name": "Rong"
    },
    "datePublished": "2026-04-18",
    "dateModified": "2026-04-18",
    "publisher": {
      "@type": "Organization",
      "name": "The Own Lab"
    }
  }
</script>

常用 Schema 類型###

Schema Type	Rich Result	適用場景
`Article`	文章標題、作者、日期	部落格、新聞
`FAQPage`	FAQ 展開列表	常見問題頁
`HowTo`	步驟列表	教學文章
`Product`	價格、評分、庫存	電商
`BreadcrumbList`	麵包屑導航	多層級網站
`WebSite`	搜尋框（Sitelinks Search Box）	首頁

BreadcrumbList 範例###

讓 Google 顯示頁面的導航路徑：

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Marketing",
        "item": "https://example.com/marketing"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Google SEO 實戰指南"
      }
    ]
  }
</script>

Note

使用 Google Rich Results Test 驗證你的 structured data 是否正確。JSON-LD 應在 server-side 渲染（SSR/SSG），不要用 JavaScript 動態注入。

Core Web Vitals##

Core Web Vitals 是 Google 用來衡量使用者體驗的三個核心指標，直接影響搜尋排名。

graph LR
  A[LCP] --> D[Ranking Signal]
  B[INP] --> D
  C[CLS] --> D

指標	全名	衡量	目標
LCP	Largest Contentful Paint	載入速度	< 2.5s
INP	Interaction to Next Paint	互動回應	< 200ms
CLS	Cumulative Layout Shift	視覺穩定性	< 0.1

LCP 優化###

LCP 衡量頁面最大可見元素（通常是 hero image 或標題）的載入時間：

<!-- 為 LCP 元素加上 fetchpriority -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="630" loading="eager" />

優化策略	效果
使用 AVIF / WebP 格式	比 JPEG 小 30-50%
`fetchpriority="high"`	優先下載 LCP 元素
移除 render-blocking CSS/JS	加快首次渲染
CDN 分發	減少網路延遲
Preload 關鍵資源	`<link rel="preload">`

INP 優化###

INP（Interaction to Next Paint）取代了舊的 FID，衡量所有互動的回應時間（不只第一次）：

優化策略	說明
減少 main thread 工作	避免長時間的 JavaScript 執行
使用 `requestIdleCallback`	非關鍵工作延後處理
Code splitting	減少初始 JS bundle
Web Workers	把運算移出 main thread

Tip

Astro 的 Island Architecture 天生對 INP 友好——大部分頁面沒有 JavaScript，只有標記 client:* 的元件才會 hydrate，main thread 幾乎沒有負擔。

CLS 優化###

CLS 衡量頁面載入過程中元素的位移量：

<!-- 為圖片和影片設定固定尺寸 -->
<img src="/photo.webp" width="800" height="450" alt="Photo" />

<!-- 為動態內容預留空間 -->
<div style="min-height: 250px;">
  <!-- Ad slot or lazy-loaded content -->
</div>

常見原因	解法
圖片未設定尺寸	加上 `width` 和 `height`
字型載入造成 FOUT	`font-display: swap` + preload
動態插入內容	預留容器高度
廣告/iframe 無固定尺寸	設定 `min-height`

測量工具###

工具	資料來源	用途
PageSpeed Insights	Field + Lab	綜合分析
Chrome DevTools	Lab	開發時即時偵測
GSC Core Web Vitals 報表	Field（真實用戶）	長期追蹤
web.dev/measure	Lab	快速測試

Warning

Lab data（模擬環境）和 Field data（真實用戶）的數值可能差異很大。Google 排名用的是 Field data（CrUX 報告），優化時以 Field data 為準。

Technical SEO##

robots.txt###

robots.txt 告訴搜尋引擎哪些頁面可以爬取：

# robots.txt
User-agent: *
Allow: /

# 阻止爬取管理後台和 API
Disallow: /admin/
Disallow: /api/

# Sitemap 位置
Sitemap: https://example.com/sitemap-index.xml

Caution

Disallow 阻止爬取但不阻止索引。如果頁面已被其他連結指向，Google 仍可能索引它。要完全阻止索引，需要在頁面加上 <meta name="robots" content="noindex">。

sitemap.xml###

Sitemap 的最佳實踐：

實踐	說明
自動產生	用框架整合（如 `@astrojs/sitemap`）
只包含正規 URL	不要放 redirect 或 noindex 頁面
更新 `lastmod`	內容變更時更新日期
提交到 GSC	Sitemaps 報表提交
放在 robots.txt	`Sitemap: https://...`

SSG vs SSR 對 SEO 的影響###

渲染方式	SEO 友好度	原因
SSG（靜態產生）	最好	HTML 完整、速度最快、CDN 快取
SSR（伺服器渲染）	好	HTML 完整，但需要 server 回應時間
CSR（客戶端渲染）	差	Googlebot 需要執行 JS 才能看到內容
ISR（增量靜態再生）	好	結合 SSG 速度和 SSR 動態性

Note

純 CSR（React SPA 無 SSR）對 SEO 不友好——Googlebot 雖然可以執行 JavaScript，但有延遲和資源限制。內容導向網站務必使用 SSG 或 SSR。

Astro SEO 設定範例###

// astro.config.ts
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com', // 必須設定，sitemap 需要
  output: 'static', // SSG：最佳 SEO
  integrations: [sitemap()], // 自動產生 sitemap
});

---
// src/layouts/BaseLayout.astro
const { title, description, image } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<html lang="zh-TW">
  <head>
    <meta charset="utf-8" />
    <title>{title} | The Own Lab</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonicalURL} />

    <!-- Open Graph -->
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image || '/og-default.jpg'} />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:type" content="article" />
  </head>
  <body>
    <slot />
  </body>
</html>

Quiz##

Single Choice

Google 搜尋引擎的三個主要階段是什麼？

Single Choice

robots.txt 的 Disallow 規則能完全阻止頁面被 Google 索引嗎？

Single Choice

Core Web Vitals 的三個指標分別衡量什麼？

Single Choice

為什麼 JSON-LD structured data 不應該用 JavaScript 動態注入？

Single Choice

以下哪種渲染方式對 SEO 最不友好？

Summary##

Google 搜尋流程：Crawl → Index → Rank，每個階段都可以透過技術手段優化
Google Search Console 是 SEO 的第一步：驗證所有權（推薦 DNS TXT）、提交 sitemap、追蹤索引狀態
Meta Tags：title（50-60 字元）、description（120-160 字元）、canonical、Open Graph
Structured Data：JSON-LD 格式的 Schema.org 標記，讓搜尋結果顯示 Rich Results（CTR 提升 20-40%）
Core Web Vitals：LCP < 2.5s、INP < 200ms、CLS < 0.1，Google 用 Field data 作為排名依據
Technical SEO：robots.txt 控制爬取（但不阻止索引）、sitemap 自動產生、SSG 對 SEO 最友好
Disallow ≠ noindex——要完全阻止索引需使用 <meta name="robots" content="noindex">

留言 (0)

登入後即可留言