VitePress 博客 SEO 優化與性能提升指南 2026

VitePress 基於 Vite + Vue 3，天生就擁有極快的構建速度和優秀的首屏性能。但「快」不等於「SEO 好」——一個 VitePress 博客想要在 Google / Bing 搜索中獲得高排名，還需要在結構化數據、Sitemap、Core Web Vitals、社交分享等方面做系統優化。

本文以本站 y-m.top（VitePress 2.0-alpha + pnpm）的真實配置為例，分享從 0 到 1 完成 VitePress SEO 優化的全部實踐。文中的每一行配置代碼都來自本站倉庫，可以直接參考使用。

---

VitePress 的 SEO 基礎能力

框架原生 SEO 優勢

VitePress 在 SEO 方面有幾個天然優勢：

特性	說明	對 SEO 的影響
SSG 預渲染	構建時生成完整 HTML	✅ 搜索引擎爬蟲無需執行 JS 即可獲取內容
cleanUrls	URL 無 .html 後綴	✅ URL 更簡潔，搜索引擎友好
metaChunk	將 meta 信息提取為獨立 chunk	✅ 減小主 HTML 體積，加快解析
lastUpdated	自動記錄文件修改時間	✅ 可用於 article:modified_time
sitemap	內置 sitemap.xml 生成	✅ 自動生成站點地圖
transformPageData	構建時動態修改頁面元數據	✅ 可批量注入 canonical / og / json-ld
head 配置	全局 head 標籤注入	✅ 統一管理 meta 標籤

全局 head 配置

在 .vitepress/configs/head.ts 中配置全局 head 標籤：

// .vitepress/configs/head.ts
import type { HeadConfig } from 'vitepress'

export const head: HeadConfig[] = [
  // 瀏覽器 UI 配置
  ['meta', { name: 'theme-color', content: '#ffffff' }],
  ['meta', { name: 'msapplication-TileColor', content: '#da532c' }],
  ['meta', { name: 'format-detection', content: 'telephone=no' }],

  // 網站圖標
  ['link', { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' }],
  ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
  ['link', { rel: 'shortcut icon', href: '/favicon.ico' }],
  ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }],
  ['link', { rel: 'manifest', href: '/site.webmanifest' }],

  // 站點基本信息
  ['meta', { name: 'author', content: '你的站點名' }],
  ['meta', { name: 'copyright', content: '你的站點名' }],

  // Open Graph 全局默認
  ['meta', { property: 'og:type', content: 'website' }],
  ['meta', { property: 'og:locale', content: 'zh-Hans' }],
  ['meta', { property: 'og:site_name', content: '你的站點名' }],

  // Twitter Card
  ['meta', { name: 'twitter:card', content: 'summary_large_image' }],

  // Robots 指令
  ['meta', { name: 'robots', content: 'index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1' }],
]

📌 robots meta 詳解：

• index, follow：允許索引並跟蹤鏈接
• max-snippet:-1：不限制摘要長度
• max-image-preview:large：允許大圖預覽（影響搜索結果展示）
• max-video-preview:-1：不限制視頻預覽

frontmatter 最佳實踐

每篇文章的 frontmatter 是 SEO 的第一道關卡：

---
title: 文章標題 2026：包含核心關鍵詞的完整標題
description: 150-160 字符的描述文本，包含主關鍵詞和輔助關鍵詞，自然語句。
keywords:
  - 關鍵詞1
  - 關鍵詞2
  - 關鍵詞3
head:
  - - meta
    - property: og:image
      content: https://example.com/og-image.jpg
  - - meta
    - name: twitter:image
      content: https://example.com/og-image.jpg
---

frontmatter SEO 檢查清單：

✅ title 包含核心關鍵詞，建議 30-60 字符
✅ description 150-160 字符（Google 搜索結果摘要上限）
✅ keywords 寫 5-8 個相關關鍵詞（Google 已不參考，但 Bing 仍使用）
✅ og:image 每篇都配獨立封面圖（1200×630px 最佳）
✅ twitter:image 與 og:image 可共用同一張圖
✅ title 格式：核心關鍵詞 + 副標題（用「：」或「|」分隔）

---

結構化數據（JSON-LD）

結構化數據能讓搜索引擎理解頁面內容類型，從而在搜索結果中展示富摘要（Rich Snippets），大幅提升點擊率（CTR）。

本站實踐：transformPageData 自動注入

本站通過 transformPageData 在構建時自動為每個頁面注入 JSON-LD：

// .vitepress/configs/transformPageData.ts
import type { UserConfig } from 'vitepress'

const baseUrl = 'https://y-m.top'
const defaultOgImage = '/logo/y-m-top-og.webp'

export const transformPageData: UserConfig['transformPageData'] = (pageData) => {
  pageData.frontmatter.head ??= []

  // 1. 生成 canonical URL
  let DynamicUrl = `${baseUrl}/${pageData.relativePath}`.replace(/\.md$/, '')
  if (DynamicUrl.endsWith('/index')) {
    DynamicUrl = DynamicUrl.slice(0, -5)
  }

  const title = pageData.frontmatter?.hero?.name || pageData.title || '站點名'
  const description = pageData.frontmatter?.hero?.tagline || pageData.description || ''
  const modified_time = pageData.lastUpdated
    ? new Date(pageData.lastUpdated).toISOString()
    : new Date().toISOString()

  // 2. 獲取 og:image（優先 frontmatter 中的，回退默認）
  const ogImageEntry = pageData.frontmatter.head.find(
    (item: any) => item[0] === 'meta' && item[1]?.property === 'og:image'
  )
  const ogImage = ogImageEntry?.[1]?.content || defaultOgImage

  // 3. 根據頁面類型生成不同的 JSON-LD
  const isHome = pageData.relativePath === 'index.md'
  const jsonLd = isHome
    ? {
        '@context': 'https://schema.org',
        '@type': 'WebSite',        // 首頁用 WebSite 類型
        url: baseUrl + '/',
        inLanguage: 'zh-Hans',
        author: { '@type': 'Person', name: 'y-m.top', url: baseUrl },
        publisher: {
          '@type': 'Organization',
          name: 'y-m.top',
          logo: { '@type': 'ImageObject', url: baseUrl + '/logo/y-m-top-og.webp' }
        },
        description: description,
        name: title
      }
    : {
        '@context': 'https://schema.org',
        '@type': 'BlogPosting',    // 文章頁用 BlogPosting 類型
        headline: title,
        inLanguage: 'zh-Hans',
        author: { '@type': 'Person', name: 'y-m.top', url: baseUrl },
        publisher: {
          '@type': 'Organization',
          name: 'y-m.top',
          logo: { '@type': 'ImageObject', url: baseUrl + '/logo/y-m-top-og.webp' }
        },
        mainEntityOfPage: DynamicUrl,
        description: description,
        url: DynamicUrl,
        image: ogImage
      }

  // 4. 批量注入 head 標籤
  pageData.frontmatter.head.push(
    ['link', { rel: 'canonical', href: DynamicUrl }],
    ['meta', { property: 'og:title', content: title }],
    ['meta', { property: 'og:url', content: DynamicUrl }],
    ['meta', { property: 'og:image', content: ogImage }],
    ['meta', { property: 'og:description', content: description }],
    ['meta', { name: 'twitter:title', content: title }],
    ['meta', { name: 'twitter:image', content: ogImage }],
    ['meta', { name: 'twitter:description', content: description }],
    ['meta', { property: 'article:published_time', content: '2020-07-21T08:17:36.000Z' }],
    ['meta', { property: 'article:modified_time', content: modified_time }],
    ['script', { type: 'application/ld+json' }, JSON.stringify(jsonLd)]
  )
}

常用 Schema 類型選擇

Schema 類型	適用場景	富摘要效果
WebSite	首頁	站點名稱 + 搜索框
BlogPosting	博客文章	標題 + 作者 + 發佈日期 + 封面圖
TechArticle	技術教程	同 BlogPosting，更適合技術內容
FAQPage	FAQ 頁面	摺疊式問答展示
BreadcrumbList	麵包屑導航	搜索結果中顯示路徑
HowTo	教程步驟	分步展示
Article	通用文章	標題 + 日期 + 圖片

FAQPage 結構化數據示例

如果你的文章底部有 FAQ 摺疊塊，可以額外注入 FAQPage Schema：

// 在文章 <script setup> 中動態注入
import { onMounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.type = 'application/ld+json'
  script.text = JSON.stringify({
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "VitePress 需要裝 SEO 插件嗎？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "VitePress 原生支持 SSG、Sitemap 和 head 配置，基本 SEO 不需要額外插件。結構化數據可通過 transformPageData 自動注入。"
        }
      }
    ]
  })
  document.head.appendChild(script)
})

⚠️ 注意：FAQPage 的內容必須與頁面可見的 FAQ 文本完全一致，否則可能被 Google 判定為作弊。

---

Sitemap 與 Robots

VitePress 內置 Sitemap

VitePress 2.0 內置了 sitemap 生成功能，只需一行配置：

// .vitepress/config.mts
export default defineConfig({
  sitemap: {
    hostname: 'https://y-m.top'
  }
})

構建完成後，dist/sitemap.xml 會自動生成。配合 cleanUrls: true，所有 URL 都是無 .html 後綴的乾淨鏈接。

IndexNow 自動提交

Sitemap 生成後，搜索引擎需要主動去抓取。本站通過 buildEnd 鉤子在每次構建完成後自動向 IndexNow 提交所有 URL：

// .vitepress/configs/buildEnd.ts
import path from 'node:path'
import fs from 'node:fs'
import type { SiteConfig } from 'vitepress'

export async function buildEnd(siteConfig: SiteConfig) {
  try {
    const sitemapPath = path.resolve(siteConfig.outDir, 'sitemap.xml')

    // 輪詢等待 sitemap.xml 生成（最多等 5 秒）
    let retryCount = 0
    while (!fs.existsSync(sitemapPath) && retryCount < 10) {
      await new Promise(resolve => setTimeout(resolve, 500))
      retryCount++
    }

    if (!fs.existsSync(sitemapPath)) {
      console.warn('\n⚠️ 未找到 sitemap.xml, 退出了 IndexNow 提交')
      return
    }

    // 從 sitemap.xml 中提取所有 URL
    const sitemapContent = fs.readFileSync(sitemapPath, 'utf-8')
    const urls = [...sitemapContent.matchAll(/<loc>(.*?)<\/loc>/g)].map(m => m[1])

    // 向 IndexNow API 提交
    const key = 'your-indexnow-key'
    const data = JSON.stringify({
      host: 'y-m.top',
      key: key,
      keyLocation: `https://y-m.top/${key}.txt`,
      urlList: urls
    })

    const res = await fetch('https://api.indexnow.org/indexnow', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json; charset=utf-8' },
      body: data
    })

    if (res.ok) {
      console.log(`\n🎉 成功將 ${urls.length} 個鏈接提交至 IndexNow!`)
    } else {
      console.error(`\n❌ 提交 IndexNow 失敗: ${res.status} ${res.statusText}`)
    }
  } catch (error) {
    console.error('\n❌ 提交 IndexNow 時引發錯誤:', error)
  }
}

IndexNow 支持的搜索引擎：

搜索引擎	支持 IndexNow	備註
Bing	✅	即時索引，效果最明顯
Yandex	✅	俄羅斯搜索引擎
Seznam	✅	捷克搜索引擎
Google	❌	不支持 IndexNow，需通過 GSC 提交 Sitemap
百度	❌	需在百度搜索資源平臺手動提交

💡 IndexNow 的密鑰需要是一個 8-32 位的十六進制字符串，同時在站點根目錄放一個 密鑰.txt 文件用於驗證。

robots.txt 配置

在 public/robots.txt 中配置：

User-agent: *
Allow: /
Disallow: /tw/          # 如果繁體鏡像不想被索引

Sitemap: https://y-m.top/sitemap.xml

如果你不希望繁體鏡像頁面被搜索引擎收錄（避免重複內容懲罰），可以通過 robots.txt 或 meta robots 標籤禁止爬取。

搜索引擎站長平臺提交

平臺	提交方式	鏈接
Google Search Console	Sitemap + URL 檢查	search.google.com/search-console
Bing Webmaster Tools	Sitemap + IndexNow	bing.com/webmasters
百度搜索資源平臺	Sitemap + 主動推送	ziyuan.baidu.com
搜狗站長平臺	Sitemap 提交	zhanzhang.sogou.com

---

Core Web Vitals 性能優化

Core Web Vitals 是 Google 排名的重要信號，三個核心指標：

三大指標解讀

指標	全稱	含義	良好閾值	評分權重
LCP	Largest Contentful Paint	最大內容繪製時間	≤ 2.5s	最重要
CLS	Cumulative Layout Shift	累積佈局偏移	≤ 0.1	視覺穩定性
INP	Interaction to Next Paint	交互到下一次繪製	≤ 200ms	替代舊 FID 指標

LCP 優化策略

LCP 元素通常是首屏的大圖或大標題。優化方向：

1. 圖片優化

// VitePress 中使用 Vite 的資源處理能力
// .vitepress/config.mts
export default defineConfig({
  vite: {
    assetsInclude: ['**/*.webp', '**/*.svg', '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg'],
  }
})

優化手段	效果	實施難度
使用 WebP 格式代替 JPG/PNG	體積減少 25-35%	⭐
設置 loading="lazy" 非首屏圖片	減少首屏加載量	⭐
首屏圖片設置 fetchpriority="high"	優先加載 LCP 圖片	⭐
圖片設置 width/height 屬性	避免 CLS 偏移	⭐
使用 CDN 分發圖片	減少網絡延遲	⭐⭐
使用 <picture> 響應式圖片	按設備加載不同尺寸	⭐⭐

首屏圖片優先加載示例：

<img
  src="/cover.webp"
  alt="封面圖"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
/>

2. 字體加載優化

/* 通過 font-display: swap 避免字體加載阻塞渲染 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;  /* 關鍵：先用系統字體渲染，字體加載後替換 */
}

3. 關鍵 CSS 內聯

VitePress 默認將關鍵 CSS 內聯到 HTML <head> 中，無需額外配置。metaChunk: true 可以將 meta 信息提取為獨立 chunk，進一步減小主 HTML 體積。

CLS 優化策略

CLS（累積佈局偏移）通常由以下原因導致：

原因	解決方案
圖片無尺寸屬性	添加 width 和 height
字體加載導致文字跳動	使用 font-display: swap + size-adjust
廣告/嵌入內容高度變化	預留佔位空間 min-height
動態插入內容	在已渲染內容上方插入時使用 transform

INP 優化策略

INP 替代了舊的 FID 指標，衡量頁面的整體交互響應速度：

優化方向：
1. 減少 JavaScript 執行時間
   - 代碼分割（Code Splitting）
   - 延遲加載非關鍵 JS（defer / async）
   - Tree Shaking 去除無用代碼

2. 拆分長任務（Long Task）
   - 使用 requestIdleCallback / scheduler.postTask
   - 將大任務拆分為 < 50ms 的小任務

3. 減少第三方腳本
   - 延遲加載分析腳本
   - 使用 Partytown 將第三方 JS 移入 Web Worker

性能檢測工具

工具	用途	推薦度
PageSpeed Insights	線上檢測 LCP/CLS/INP + 優化建議	⭐⭐⭐⭐⭐
Lighthouse	Chrome DevTools 內置，本地檢測	⭐⭐⭐⭐⭐
Core Web Vitals Report	GSC 中的真實用戶數據	⭐⭐⭐⭐
Web Vitals Chrome 擴展	實時查看當前頁面指標	⭐⭐⭐⭐
CrUX Dashboard	Chrome 用戶體驗報告數據可視化	⭐⭐⭐

---

Open Graph 與社交分享

OG 標籤完整配置

Open Graph 協議決定了鏈接在微信 / Twitter / Facebook / Telegram 等社交平臺上的預覽卡片樣式：

OG 標籤	作用	示例值
og:type	內容類型	website / article
og:title	分享標題	文章標題
og:description	分享描述	150 字以內摘要
og:image	分享封面圖	1200×630px
og:url	頁面 canonical URL	https://y-m.top/xxx
og:site_name	站點名稱	你的博客名
og:locale	語言區域	zh-Hans
twitter:card	Twitter 卡片類型	summary_large_image
twitter:image	Twitter 封面圖	同 og:image

本站通過 transformPageData 自動注入所有 OG 標籤，無需手動在每篇文章中重複配置。

OG 圖片設計規範

📐 尺寸：1200 × 630 px（推薦）
📐 比例：1.91:1
📐 格式：JPG / PNG / WebP
📐 文件大小：≤ 300KB
📐 安全區域：中心 1200×630，邊緣留 80px 安全區

設計建議：
- 使用品牌色作為背景
- 標題文字 ≥ 42px，確保移動端可讀
- 添加站點 Logo（左下角或右下角）
- 使用 Unsplash 免費圖片作為封面（本站實踐）

社交預覽測試工具

工具	用途
Meta Sharing Debugger	Facebook / WhatsApp 預覽
Twitter Card Validator	Twitter 卡片預覽
OpenGraph.xyz	多平臺預覽
微信文件傳輸助手	發送鏈接查看微信內預覽效果

---

內鏈策略

內鏈是 SEO 中最容易被忽視的部分，良好的內鏈結構能幫助搜索引擎理解站點架構，傳遞頁面權重。

相關文章推薦

在每篇文章末尾添加「延伸閱讀」區塊，手動推薦 5-7 篇相關文章：

## 延伸閱讀

- [流媒體觀影終極指南](/tw/streaming/2026-ultimate-core-guide)
- [Netflix 國內觀看指南 2026](/tw/streaming/netflix-guide)
- [優質機場推薦與選購指南](/tw/serve/airport/summary)

內鏈錨文本最佳實踐：

✅ 好的錨文本：
- 「Netflix 國內觀看指南 2026」→ 包含關鍵詞 + 年份
- 「優質機場推薦」→ 簡潔描述目標頁面內容

❌ 差的錨文本：
- 「點擊這裡」→ 無信息量
- 「這篇文章」→ 搜索引擎無法理解目標頁面主題

麵包屑導航

VitePress 默認側邊欄提供了層級導航。如果需要額外的麵包屑結構化數據：

// 麵包屑 BreadcrumbList JSON-LD
const breadcrumbJsonLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首頁",
      "item": "https://y-m.top/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "技術筆記",
      "item": "https://y-m.top/notes/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "VitePress",
      "item": "https://y-m.top/notes/vitepress/"
    }
  ]
}

內鏈密度建議

指標	建議值	說明
每篇內鏈數量	5-8 個	過少不夠，過多像垃圾站
內鏈錨文本多樣性	≥ 3 種	不要所有鏈接都用相同錨文本
相關性	高	只鏈接主題相關的文章
深度鏈接比例	≥ 60%	鏈接到具體文章而非分類頁

---

站點分析集成

三大分析工具對比

工具	隱私友好	免費	國內可用	特點
Google Analytics 4	⚠️ 一般	✅	❌ 需代理	功能最全，生態最好
Umami	✅ 優秀	✅ 自建	✅	輕量、隱私友好、Cookieless
Plausible	✅ 優秀	💰 付費	✅	開源、簡潔、GDPR 合規
百度統計	⚠️ 一般	✅	✅	國內訪問無障礙
Cloudflare Web Analytics	✅ 優秀	✅	✅	免費、隱私友好、無腳本

GA4 配置（本站實踐）

本站使用 Google Analytics 4，在 head.ts 中全局注入：

// .vitepress/configs/head.ts
export const head: HeadConfig[] = [
  // ... 其他配置
  [
    'script',
    { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX' }
  ],
  [
    'script',
    {},
    `window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'G-XXXXXXXXXX');`
  ]
]

⚠️ GA4 在國內部分網絡環境下可能加載緩慢。如果你的讀者主要在國內，建議同時接入 Umami 或百度統計作為補充。

Umami 自建方案

# Docker 一鍵部署 Umami
docker run -d \
  --name umami \
  -p 3000:3000 \
  -e DATABASE_URL=postgresql://umami:umami@db:5432/umami \
  -e HASH_SALT=your-random-salt \
  ghcr.io/umami-software/umami:latest

# 在 VitePress head 中添加追蹤代碼
# <script async src="https://umami.your-domain.com/script.js" data-website-id="xxx"></script>

---

PWA 與離線訪問

VitePress PWA 插件

使用 vite-plugin-pwa 為 VitePress 添加 PWA 能力：

// .vitepress/config.mts
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  vite: {
    plugins: [
      VitePWA({
        registerType: 'autoUpdate',
        includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt'],
        manifest: {
          name: '你的站點名',
          short_name: '簡稱',
          description: '站點描述',
          theme_color: '#ffffff',
          icons: [
            {
              src: 'pwa-192x192.png',
              sizes: '192x192',
              type: 'image/png'
            },
            {
              src: 'pwa-512x512.png',
              sizes: '512x512',
              type: 'image/png'
            }
          ]
        },
        workbox: {
          // 預緩存 VitePress 構建產物
          globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
          // 運行時緩存策略
          runtimeCaching: [
            {
              urlPattern: /^https:\/\/images\.unsplash\.com\/.*/i,
              handler: 'CacheFirst',
              options: {
                cacheName: 'unsplash-images',
                expiration: {
                  maxEntries: 100,
                  maxAgeSeconds: 60 * 60 * 24 * 30  // 30 天
                }
              }
            }
          ]
        }
      })
    ]
  }
})

PWA 緩存策略選擇

策略	適用場景	說明
CacheFirst	靜態資源（CSS/JS/字體/圖標）	優先緩存，緩存不存在才請求
NetworkFirst	HTML 頁面	優先網絡，離線時回退緩存
StaleWhileRevalidate	圖片/API 數據	先返回緩存，同時後臺更新
NetworkOnly	分析請求	不緩存，始終請求網絡
CacheOnly	離線頁面	只用緩存

💡 VitePress 的 HTML 頁面建議用 NetworkFirst——保證用戶看到最新內容，同時離線時也能訪問緩存版本。

---

Google Search Console 監測

配置流程

1. 添加站點屬性

   • 訪問 Google Search Console
   • 添加域名屬性（推薦）或 URL 前綴屬性
   • 通過 DNS TXT 記錄驗證

2. 提交 Sitemap

   • 在 GSC 左側菜單 → Sitemaps
   • 輸入 sitemap.xml 並提交
   • 等待 Google 處理（通常 1-3 天）

3. 請求索引

   • 對於新發布的重要文章，使用 URL 檢查工具
   • 點擊「請求編入索引」
   • 加速首次收錄

關鍵指標監測

指標	位置	含義
索引覆蓋率	索引 → 網頁	已被 Google 索引的頁面數
搜索表現	搜索結果 → 搜索分析	展示次數 / 點擊次數 / CTR / 平均排名
Core Web Vitals	體驗 → 核心網頁指標	LCP / CLS / INP 真實用戶數據
移動設備易用性	體驗 → 移動設備易用性	移動端友好度報告
鏈接報告	鏈接 → 外部鏈接 / 內部鏈接	反向鏈接和內鏈統計

常見索引問題排查

問題 1：頁面未被索引
→ 檢查 robots.txt 是否屏蔽
→ 檢查 meta robots 是否為 noindex
→ 檢查 canonical URL 是否正確
→ 在 GSC 中手動請求索引

問題 2：索引後排名低
→ 檢查 title/description 是否包含目標關鍵詞
→ 檢查內容質量（字數、深度、原創性）
→ 檢查內鏈數量和質量
→ 檢查 Core Web Vitals 是否達標

問題 3：頁面從索引中被移除
→ 檢查服務器是否經常不可用（503 錯誤）
→ 檢查是否被標記為重複內容
→ 檢查是否被 Manual Action 處罰

---

本站優化實踐覆盤

y-m.top 的 SEO 配置架構

本站的 VitePress 配置採用了模塊化拆分，便於維護：

.vitepress/
├── config.mts              # 主配置入口
├── configs/
│   ├── head.ts             # 全局 head 標籤
│   ├── transformPageData.ts # 動態 meta + JSON-LD 注入
│   ├── buildEnd.ts         # 構建後 IndexNow 提交
│   ├── nav.ts              # 導航欄
│   ├── sidebar.ts          # 側邊欄
│   ├── search.ts           # 搜索配置
│   ├── markdown.ts         # Markdown 插件
│   └── socialLinks.ts      # 社交鏈接
└── theme/                  # 自定義主題

關鍵配置彙總

// .vitepress/config.mts 中的 SEO 相關配置
export default defineConfig({
  head,                        // 全局 meta 標籤
  sitemap: {                   // 站點地圖
    hostname: 'https://y-m.top'
  },
  transformPageData,           // 自動注入 canonical/og/json-ld
  buildEnd,                    // 構建後 IndexNow 提交
  cleanUrls: true,             // 乾淨 URL
  metaChunk: true,             // meta 獨立 chunk
  lastUpdated: true,           // 記錄更新時間
  srcDir: 'content',           // 源文件目錄
})

繁體鏡像的 SEO 處理

本站有簡體 / 繁體雙版本，為了避免重複內容問題：

處理方式	說明
URL 分離	簡體 /streaming/xxx，繁體 /tw/streaming/xxx
hreflang 標籤	告訴搜索引擎兩個版本的關係
robots.txt	可選：禁止爬取 /tw/ 目錄
OpenCC 轉換	使用 opencc-js 自動轉換簡→繁

// 簡體→繁體自動轉換（本站實踐）
import * as OpenCC from 'opencc-js'
const converter = OpenCC.Converter({ from: 'cn', to: 'tw', _config: 's2t' })

// 在 locales 中配置繁體版本
locales: {
  root: { label: '簡體中文', lang: 'zh-Hans', ... },
  tw: {
    label: '繁體中文',
    lang: 'zh-Hant',
    link: '/tw/',
    title: converter('簡體標題'),
    description: converter('簡體描述'),
    ...
  }
}

優化效果數據

經過以上優化，本站在 SEO 方面的表現：

指標	優化前	優化後	提升幅度
Google 索引頁面數	~50	400+	8 倍
Lighthouse SEO 評分	75	100	+25
Lighthouse 性能評分	82	96	+14
LCP（首屏繪製）	3.2s	1.1s	-66%
CLS（佈局偏移）	0.15	0.02	-87%
Bing 收錄速度	數週	24h 內	IndexNow 效果

---

SEO 優化檢查清單

將上述所有要點整理為一份可操作的檢查清單：

基礎配置

□ 配置 sitemap.hostname
□ 開啟 cleanUrls: true
□ 開啟 lastUpdated: true
□ 開啟 metaChunk: true
□ 配置全局 head 標籤（favicon / robots / og 默認值）
□ 配置 public/robots.txt
□ 配置 public/站點驗證文件（Google / Bing / 百度）

每篇文章

□ title 包含核心關鍵詞（30-60 字符）
□ description 150-160 字符
□ keywords 5-8 個相關關鍵詞
□ og:image 獨立封面圖（1200×630px）
□ jsonLD 結構化數據（TechArticle / BlogPosting）
□ 文章末尾 5-7 個內鏈（延伸閱讀）
□ 圖片設置 width / height / alt 屬性
□ 首屏圖片設置 fetchpriority="high"

構建與部署

□ transformPageData 自動注入 canonical / og / json-ld
□ buildEnd 鉤子自動提交 IndexNow
□ 圖片使用 WebP 格式
□ 第三方腳本使用 async / defer
□ PWA Service Worker 緩存策略配置
□ GA4 / Umami 分析代碼接入

持續監測

□ 每週檢查 Google Search Console 索引狀態
□ 每月檢查 Core Web Vitals 真實用戶數據
□ 定期檢查 Lighthouse 性能評分
□ 監控搜索關鍵詞排名變化
□ 檢查死鏈（404 頁面）並修復
□ 每月提交一次 Sitemap（確保新頁面被收錄）

---

常見問題（FAQ）

Q1：VitePress 需要安裝額外的 SEO 插件嗎？

不需要。VitePress 2.0 原生提供：
• SSG 預渲染 → 搜索引擎可直接讀取 HTML 內容
• 內置 sitemap.xml 生成
• head 配置 → 全局 meta 標籤管理
• transformPageData → 構建時動態注入 meta 和 JSON-LD
• cleanUrls → URL 無 .html 後綴

以上能力已覆蓋 90% 的 SEO 需求。唯一可能需要插件的是 PWA 功能（vite-plugin-pwa）。

Q2：為什麼我的文章在 Google 搜索中顯示的標題和 frontmatter 中的不一樣？

Google 可能會根據搜索關鍵詞自動重寫標題。常見原因：
• title 過長或過短 → Google 認為需要優化
• title 與搜索意圖不匹配 → Google 使用 H1 或描述文本
• title 中關鍵詞堆砌 → Google 簡化

解決方法：
• 確保 title 簡潔明瞭（30-60 字符）
• title 包含核心關鍵詞
• H1 與 title 保持一致
• 使用 GSC URL 檢查工具查看 Google 實際抓取的標題

Q3：VitePress 的 SSG 和 CSR 有什麼區別？對 SEO 有什麼影響？

SSG（Static Site Generation）：
• 構建時預渲染為完整 HTML
• 搜索引擎爬蟲無需執行 JS 即可獲取內容
• VitePress 默認使用 SSG → SEO 友好 ✅

CSR（Client-Side Rendering）：
• 瀏覽器加載 JS 後才渲染內容
• 部分搜索引擎爬蟲不執行 JS → 可能無法索引
• VitePress 不使用純 CSR

結論：VitePress 的 SSG 模式天然 SEO 友好，無需額外處理。
但注意：<script setup> 中動態生成的內容不會被預渲染到 HTML 中，
僅靠客戶端 JS 執行。重要的 SEO 內容（標題、描述）應放在 frontmatter 中。

Q4：如何加速 Google 對新文章的收錄？

最快路徑：
1. 發佈文章後立即觸發構建部署
2. buildEnd 鉤子自動提交 IndexNow → Bing 即時收錄
3. 在 GSC 中使用 URL 檢查工具 → 請求編入索引
4. 在已收錄的文章中添加新文章的內鏈
5. 確保新文章在 sitemap.xml 中（VitePress 自動生成）

通常新文章 1-3 天內會被 Google 收錄。
如果超過一週仍未收錄，檢查 robots.txt 和 meta robots 是否有誤。

Q5：本站同時有簡體和繁體版本，會被 Google 判定為重複內容嗎？

風險存在但可規避：

方案 1：禁止繁體索引（簡單粗暴）
→ robots.txt 中 Disallow: /tw/
→ 適合只面向簡體中文用戶

方案 2：使用 hreflang 標籤（推薦）
→ 在 head 中添加 hreflang 互指
→ 告訴 Google 兩個版本是同一內容的不同語言變體

方案 3：canonical 指向簡體版
→ 繁體頁面 canonical 指向簡體版
→ Google 會只索引簡體版，但不影響用戶訪問繁體

本站目前使用方案 1（robots.txt 禁止 /tw/），因為目標受眾主要是簡體中文用戶。

Q6：Cloudflare Pages / Vercel / Netlify 哪個對 VitePress SEO 更好？

三者都能完美支持 VitePress 部署，SEO 差異不大：

| 平臺 | CDN 節點 | 自定義 Header | 預渲染 | 免費額度 |
|------|---------|:--:|:--:|:--:|
| Cloudflare Pages | 全球 300+ | ✅ | ✅ | 無限 |
| Vercel | 全球 100+ | ✅ | ✅ | 100GB/月 |
| Netlify | 全球 100+ | ✅ | ✅ | 100GB/月 |

推薦 Cloudflare Pages：
• 全球邊緣節點最多，訪問速度最快
• 無限免費請求量
• 原生支持自定義 Header 和重定向規則
• 參考 [VitePress + Cloudflare Pages 搭建指南](/tw/notes/vitepress/build-with-cloudflare)

---

總結

VitePress 的 SEO 優化不需要複雜的插件體系——框架原生能力已經覆蓋了絕大部分需求。以本站 y-m.top 的實踐經驗來看，做好以下五件事就能達到 95 分以上：

🎯 1. transformPageData 自動注入
   → canonical URL + og 標籤 + JSON-LD 結構化數據
   → 一處配置，所有頁面自動生效

🎯 2. Sitemap + IndexNow 自動提交
   → sitemap.hostname 配置 + buildEnd 鉤子
   → 新文章發佈後 Bing 24h 內收錄

🎯 3. Core Web Vitals 優化
   → WebP 圖片 + fetchpriority + font-display: swap
   → LCP ≤ 2.5s / CLS ≤ 0.1 / INP ≤ 200ms

🎯 4. 內鏈策略
   → 每篇文章 5-8 個延伸閱讀鏈接
   → 錨文本包含關鍵詞 + 自然語句

🎯 5. Google Search Console 持續監測
   → 提交 Sitemap + 請求索引 + 監控排名
   → 定期檢查索引覆蓋率和 Core Web Vitals

如果你正在使用 VitePress 搭建博客，希望本文的實踐經驗能幫你少走彎路。本站的所有配置代碼都在倉庫中公開，歡迎參考。

---

延伸閱讀

• VitePress + Cloudflare Pages 搭建完全指南
• VitePress 寶塔面板部署完全指南
• VitePress Giscus 評論系統集成指南
• VitePress 圖片放大功能配置
• GitHub Actions 完全指南：CI/CD 自動化部署
• Obsidian 知識管理完全指南
• Prettier 代碼格式化配置指南

---

---

延伸阅读

• 流媒体使用与常见问题汇总
• 全平台代理客户端配置指南
• 直连、中转、专线线路差异说明
• AI 工具新手入门与常见问题

免责声明

本文仅供技术交流和学习参考。涉及第三方服务的链接可能包含 sponsored 标记，请自行核实服务条款、价格和可用性，并遵守当地法律法规。