NuxtSEO优化模块Skill nuxt-seo

Nuxt SEO优化模块是一个用于Nuxt.js框架的SEO工具集,提供配置SEO、生成robots.txt和sitemap.xml、创建动态OG图像、添加JSON-LD结构化数据等功能,帮助提升网站搜索排名和用户体验。关键词:Nuxt SEO、SEO优化、站点地图、OG图像、结构化数据。

前端开发 0 次安装 1 次浏览 更新于 3/9/2026

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

加载文件

根据任务考虑加载以下参考文件:

不要一次性加载所有文件。 只加载与当前任务相关的文件。

站点配置

所有 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 个令牌。只加载与当前任务相关的文件。