VitePress 学习指南

主题

SEO 优化指南 ​

搜索引擎优化（SEO）对于提高网站曝光度和访问量至关重要。本文将介绍如何在 VitePress 中实施有效的 SEO 策略。

基础 SEO 配置 ​

全局元数据 ​

在 .vitepress/config.mts 中配置全局 SEO 元数据：

typescript
export default defineConfig({
  title: 'VitePress 学习指南',
  description: '从零开始学习 VitePress，掌握静态网站生成技术',
  lang: 'zh-CN',
  
  head: [
    // 基础 SEO
    ['meta', { name: 'author', content: 'VitePress 学习指南' }],
    ['meta', { name: 'robots', content: 'index, follow' }],
    ['meta', { name: 'googlebot', content: 'index, follow' }],
    
    // 关键词
    ['meta', { name: 'keywords', content: 'VitePress,Vue,静态网站生成器,文档工具' }],
    
    // 规范链接
    ['link', { rel: 'canonical', href: 'https://your-domain.com/' }]
  ]
})

页面级元数据 ​

每个页面应设置独特的标题和描述：

markdown
---
title: 页面标题 - 网站名称
description: 页面描述，建议 50-160 字符
head:
  - - meta
    - name: keywords
      content: 关键词1, 关键词2
---

Open Graph 优化 ​

配置 OG 标签 ​

typescript
head: [
  // Open Graph
  ['meta', { property: 'og:type', content: 'website' }],
  ['meta', { property: 'og:locale', content: 'zh_CN' }],
  ['meta', { property: 'og:site_name', content: 'VitePress 学习指南' }],
  ['meta', { property: 'og:title', content: 'VitePress 学习指南' }],
  ['meta', { property: 'og:description', content: '从零开始学习 VitePress' }],
  ['meta', { property: 'og:image', content: '/og-image.png' }],
  ['meta', { property: 'og:image:width', content: '1200' }],
  ['meta', { property: 'og:image:height', content: '630' }]
]

制作 OG 图片 ​

  • 推荐尺寸：1200 x 630 像素
  • 格式：PNG 或 JPEG
  • 内容：包含网站标题、简介和品牌标识

结构化数据 ​

添加 JSON-LD ​

在主题中添加结构化数据组件：

vue
<!-- .vitepress/theme/components/StructuredData.vue -->
<script setup lang="ts">
import { useData } from 'vitepress'

const { page, frontmatter, site } = useData()

const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'TechArticle',
  headline: frontmatter.value.title,
  description: frontmatter.value.description,
  author: {
    '@type': 'Organization',
    name: site.value.title
  },
  datePublished: frontmatter.value.date,
  dateModified: page.value.lastUpdated
}
</script>

<template>
  <script type="application/ld+json">
    {{ JSON.stringify(structuredData) }}
  </script>
</template>

文章类型结构化数据 ​

typescript
const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: '文章标题',
  author: {
    '@type': 'Person',
    name: '作者名'
  },
  datePublished: '2026-02-27',
  dateModified: '2026-02-27',
  image: '/article-cover.png'
}

站点地图配置 ​

自动生成 sitemap ​

typescript
export default defineConfig({
  sitemap: {
    hostname: 'https://your-domain.com',
    lastmodDateOnly: true
  }
})

手动优化 sitemap ​

构建后检查 sitemap.xml：

xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://your-domain.com/</loc>
    <lastmod>2026-02-27</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

robots.txt 配置 ​

创建 robots.txt ​

在 public/robots.txt 中配置：

txt
# 允许所有爬虫访问
User-agent: *
Allow: /

# 禁止访问特定目录
Disallow: /api/
Disallow: /admin/

# 站点地图位置
Sitemap: https://your-domain.com/sitemap.xml

配置说明 ​

指令说明
User-agent指定爬虫类型，* 表示所有
Allow允许访问的路径
Disallow禁止访问的路径
Sitemap站点地图 URL

内容优化 ​

标题层级 ​

正确使用标题层级（H1-H6）：

markdown
# H1 - 页面主标题（每页只有一个）

## H2 - 章节标题

### H3 - 小节标题

#### H4 - 更细节的标题

内部链接 ​

  • 使用描述性锚文本
  • 避免使用"点击这里"等模糊文字
  • 建立合理的内容关联
markdown
<!-- 好 -->
查看 [VitePress 安装教程](/guide/installation) 了解详情。

<!-- 避免 -->
点击 [这里](/guide/installation) 查看安装教程。

图片优化 ​

markdown
<!-- 添加 alt 文本 -->
![VitePress 项目结构图](./images/structure.png)

<!-- 使用现代图片格式 -->
![截图](./images/screenshot.webp)

性能与 SEO ​

页面加载速度 ​

  • 压缩图片资源
  • 使用懒加载
  • 减少不必要的 JavaScript

Core Web Vitals ​

关注三个核心指标：

指标说明目标值
LCP最大内容绘制时间< 2.5s
FID首次输入延迟< 100ms
CLS累积布局偏移< 0.1

移动端 SEO ​

响应式设计 ​

确保网站在移动设备上正常显示：

css
/* 移动端适配 */
@media (max-width: 640px) {
  .container {
    padding: 16px;
  }
}

移动端友好测试 ​

  • 使用 Google 移动设备适合性测试工具
  • 确保文字大小适中
  • 确保点击区域足够大

SEO 检查清单 ​

基础检查项 ​

  • [ ] 每个页面有独特的标题（50-60 字符）
  • [ ] 每个页面有独特的描述（50-160 字符）
  • [ ] 使用语义化 HTML 标签
  • [ ] 图片有 alt 属性
  • [ ] 链接可正常访问

技术检查项 ​

  • [ ] 网站有 sitemap.xml
  • [ ] 配置了 robots.txt
  • [ ] 使用 HTTPS
  • [ ] 页面加载速度快
  • [ ] 移动端友好

内容检查项 ​

  • [ ] 内容原创且有价值
  • [ ] 定期更新内容
  • [ ] 内部链接合理
  • [ ] 外部链接有效

SEO 工具推荐 ​

分析工具 ​

工具说明
Google Search ConsoleGoogle 官方 SEO 工具
Bing Webmaster ToolsBing 站长工具
Google Analytics网站流量分析

检测工具 ​

工具说明
Lighthouse页面性能和 SEO 审计
PageSpeed Insights页面速度检测
AhrefsSEO 综合分析工具

持续优化

SEO 是一个持续的过程，定期检查和优化你的网站，跟踪排名变化。

贡献者

加载中...

想要成为贡献者？

在 CNB 上参与贡献

Copyright © 2016 - 2026 VitePress 学习指南