iFluxArt Docs

Hey，同学！想让你的文档更容易被搜索引擎找到吗？这一篇教你 Docs 的 SEO 配置～ 🚀

🤔 Docs 的 SEO 特点

文档站点有特殊的 SEO 需求：

特点	说明
内容多	大量页面需要索引
结构深	多级目录层级
更新频	文档经常更新
长尾词	大量长尾搜索词

💡 想象一下：每个文档页面都是一张「名片」，SEO 就是让名片更容易被看到！

⚙️ 自动 SEO

Meta 标签

Docs 会自动为每个页面生成：

html

<title>页面标题 | 站点名称</title>
<meta name="description" content="页面描述">

Open Graph

社交分享时显示：

html

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="封面图">

📋 配置方式

1. Frontmatter 配置

在每个文档中配置：

markdown

---
title: 安装指南
description: 详细的安装步骤和注意事项
seo:
  title: Next.js 安装完整指南 2024
  keywords: Next.js, 安装, 教程
---

2. 站点级配置

在环境变量或配置文件中：

txt

NEXT_PUBLIC_SITE_NAME=我的文档
NEXT_PUBLIC_SITE_DESCRIPTION=技术文档和教程
NEXT_PUBLIC_SITE_URL=https://docs.my.com
NEXT_PUBLIC_DEFAULT_OG_IMAGE=https://docs.my.com/og.png

📊 结构化数据

JSON-LD

Docs 会为每个页面生成 Schema：

json

{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "页面标题",
  "description": "页面描述",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "首页" },
      { "@type": "ListItem", "position": 2, "name": "分类" },
      { "@type": "ListItem", "position": 3, "name": "页面" }
    ]
  }
}

🗺️ Sitemap

自动生成

访问 /sitemap.xml 获取完整的站点地图：

xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url>
    <loc>https://docs.my.com/docs/intro</loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  ...
</urlset>

提交到搜索引擎

在 Google Search Console 中：

添加站点
提交 Sitemap URL：https://docs.my.com/sitemap.xml
查看索引状态

🔗 内部链接优化

链接结构

合理的目录层级
面包屑导航
相关文章推荐

锚点链接

文档内标题自动生成锚点：

html

<h2 id="installation">Installation</h2>
<!-- 可以用 #installation 链接到此 -->

🚫 控制索引

阻止索引

如果某个页面不想被索引：

markdown

---
index: false
---

nofollow 链接

对于外部链接：

html

<a href="https://external.com" rel="nofollow">外部链接</a>

📈 性能与 SEO

Core Web Vitals

Google 关注的性能指标：

指标	要求
LCP	< 2.5s
FID	< 100ms
CLS	< 0.1

Docs 使用 SSG/ISR，性能通常很好！

图片优化

使用 next/image 自动优化：

WebP/AVIF 格式
懒加载
尺寸适配

🔍 搜索优化

1. 标题关键词

每个文档标题包含关键词：

markdown

---
title: React useState 完全指南
---

2. 描述完整

markdown

---
description: 深入理解 React Hooks 中的 useState，包括用法、最佳实践和常见问题。
---

3. 内部链接

文档之间相互链接，形成网状结构。

📋 检查清单

发布文档前检查：

标题包含关键词
description 已填写
封面图已设置
内部链接已添加
无需索引的页面已设置 index: false

🔗 下一步

部署配置 —— 上线后提交搜索引擎
MDX 组件 —— 丰富文档内容

🔍 好的 SEO 让「酒香」不再怕「巷子深」！

Hey，同学！想让你的文档更容易被搜索引擎找到吗？这一篇教你 Docs 的 SEO 配置～ 🚀

🤔 Docs 的 SEO 特点

文档站点有特殊的 SEO 需求：

特点	说明
内容多	大量页面需要索引
结构深	多级目录层级
更新频	文档经常更新
长尾词	大量长尾搜索词

💡 想象一下：每个文档页面都是一张「名片」，SEO 就是让名片更容易被看到！

⚙️ 自动 SEO

Meta 标签

Docs 会自动为每个页面生成：

html

<title>页面标题 | 站点名称</title>
<meta name="description" content="页面描述">

Open Graph

社交分享时显示：

html

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="封面图">

📋 配置方式

1. Frontmatter 配置

在每个文档中配置：

markdown

---
title: 安装指南
description: 详细的安装步骤和注意事项
seo:
  title: Next.js 安装完整指南 2024
  keywords: Next.js, 安装, 教程
---

2. 站点级配置

在环境变量或配置文件中：

txt

NEXT_PUBLIC_SITE_NAME=我的文档
NEXT_PUBLIC_SITE_DESCRIPTION=技术文档和教程
NEXT_PUBLIC_SITE_URL=https://docs.my.com
NEXT_PUBLIC_DEFAULT_OG_IMAGE=https://docs.my.com/og.png

📊 结构化数据

JSON-LD

Docs 会为每个页面生成 Schema：

json

{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "页面标题",
  "description": "页面描述",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "首页" },
      { "@type": "ListItem", "position": 2, "name": "分类" },
      { "@type": "ListItem", "position": 3, "name": "页面" }
    ]
  }
}

🗺️ Sitemap

自动生成

访问 /sitemap.xml 获取完整的站点地图：

xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url>
    <loc>https://docs.my.com/docs/intro</loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  ...
</urlset>

提交到搜索引擎

在 Google Search Console 中：

添加站点
提交 Sitemap URL：https://docs.my.com/sitemap.xml
查看索引状态

🔗 内部链接优化

链接结构

合理的目录层级
面包屑导航
相关文章推荐

锚点链接

文档内标题自动生成锚点：

html

<h2 id="installation">Installation</h2>
<!-- 可以用 #installation 链接到此 -->

🚫 控制索引

阻止索引

如果某个页面不想被索引：

markdown

---
index: false
---

nofollow 链接

对于外部链接：

html

<a href="https://external.com" rel="nofollow">外部链接</a>

📈 性能与 SEO

Core Web Vitals

Google 关注的性能指标：

指标	要求
LCP	< 2.5s
FID	< 100ms
CLS	< 0.1

Docs 使用 SSG/ISR，性能通常很好！

图片优化

使用 next/image 自动优化：

WebP/AVIF 格式
懒加载
尺寸适配

🔍 搜索优化

1. 标题关键词

每个文档标题包含关键词：

markdown

---
title: React useState 完全指南
---

2. 描述完整

markdown

---
description: 深入理解 React Hooks 中的 useState，包括用法、最佳实践和常见问题。
---

3. 内部链接

文档之间相互链接，形成网状结构。

📋 检查清单

发布文档前检查：

标题包含关键词
description 已填写
封面图已设置
内部链接已添加
无需索引的页面已设置 index: false

🔗 下一步

部署配置 —— 上线后提交搜索引擎
MDX 组件 —— 丰富文档内容

🔍 好的 SEO 让「酒香」不再怕「巷子深」！