name: nuxt-seo description: Nuxt SEO 元模块,包含 robots.txt、sitemap.xml、OG 图像和 schema.org。用于配置 SEO、生成站点地图、创建 OG 图像或添加结构化数据。 license: MIT
Nuxt SEO
npx nuxi module add @nuxtjs/seo
何时使用
适用于:
- SEO 配置(站点 URL、名称、可索引性)
- Robots.txt 和 sitemap.xml 生成
- 动态 OG 图像生成
- JSON-LD 结构化数据(schema.org)
- 面包屑和规范 URL
加载文件
根据任务考虑加载以下参考文件:
- [ ] references/site-config.md - 如果配置站点 URL、名称或 SEO 基础
- [ ] references/crawlability.md - 如果设置 robots.txt 或 sitemap.xml
- [ ] references/og-image.md - 如果生成动态 OG 图像
- [ ] references/schema-org.md - 如果添加 JSON-LD 结构化数据
- [ ] references/utilities.md - 如果处理面包屑、规范 URL 或链接检查
不要一次性加载所有文件。 只加载与当前任务相关的文件。
站点配置
所有 SEO 模块的基础。在 nuxt.config.ts 中配置 site,通过 useSiteConfig() 访问。查看 references/site-config.md 获取完整选项。
模块概述
| 模块 | 用途 | 关键 API |
|---|---|---|
| nuxt-site-config | 共享配置 | useSiteConfig() |
| @nuxtjs/robots | robots.txt | useRobotsRule() |
| @nuxtjs/sitemap | sitemap.xml | defineSitemapEventHandler() |
| nuxt-og-image | OG 图像 | defineOgImage() |
| nuxt-schema-org | JSON-LD | useSchemaOrg() |
| nuxt-seo-utils | 元工具 | useBreadcrumbItems() |
| nuxt-link-checker | 链接验证 | 构建时检查 |
Nuxt Content v3
使用 asSeoCollection() 从 frontmatter 自动生成站点地图、OG 图像和结构化数据:
// content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'
export default defineContentConfig({
collections: {
posts: defineCollection(asSeoCollection({ type: 'page', source: 'posts/**' }))
}
})
重要: 在模块数组中先加载 @nuxtjs/seo,再加载 @nuxt/content:
export default defineNuxtConfig({
modules: ['@nuxtjs/seo', '@nuxt/content']
})
Frontmatter 字段:ogImage, sitemap, robots, schemaOrg。
相关技能
- nuxt-content - 用于带有 SEO frontmatter 的 MDC 渲染
链接
令牌效率
主要技能:约 250 个令牌。每个子文件:约 400-600 个令牌。只加载与当前任务相关的文件。