home / skills / onmax / nuxt-skills / nuxt-seo

nuxt-seo skill

safe

This skill helps configure Nuxt SEO, generate sitemaps and OG images, and add JSON-LD structured data for richer search results.

npx playbooks add skill onmax/nuxt-skills --skill nuxt-seo

Review the files below or copy the command above to add this skill to your agents.

Files (6)

SKILL.md

2.7 KB

---
name: nuxt-seo
description: Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
license: MIT
---

# Nuxt SEO

```bash
npx nuxi module add @nuxtjs/seo
```

## When to Use

Working with:

- SEO configuration (site URL, name, indexability)
- Robots.txt and sitemap.xml generation
- Dynamic OG image generation
- JSON-LD structured data (schema.org)
- Breadcrumbs and canonical URLs

## Usage Pattern

**Progressive loading - only read what you need:**

- Configuring site? → [references/site-config.md](references/site-config.md)
- Setting up robots/sitemap? → [references/crawlability.md](references/crawlability.md)
- Generating OG images? → [references/og-image.md](references/og-image.md)
- Adding JSON-LD? → [references/schema-org.md](references/schema-org.md)
- Breadcrumbs, links, icons? → [references/utilities.md](references/utilities.md)

## Site Config

Foundation for all SEO modules. Configure `site` in `nuxt.config.ts`, access via `useSiteConfig()`. See [references/site-config.md](references/site-config.md) for full options.

## Module Overview

| Module            | Purpose         | Key API                       |
| ----------------- | --------------- | ----------------------------- |
| nuxt-site-config  | Shared config   | `useSiteConfig()`             |
| @nuxtjs/robots    | robots.txt      | `useRobotsRule()`             |
| @nuxtjs/sitemap   | sitemap.xml     | `defineSitemapEventHandler()` |
| nuxt-og-image     | OG images       | `defineOgImage()`             |
| nuxt-schema-org   | JSON-LD         | `useSchemaOrg()`              |
| nuxt-seo-utils    | Meta utilities  | `useBreadcrumbItems()`        |
| nuxt-link-checker | Link validation | Build-time checks             |

## Nuxt Content v3

Use `asSeoCollection()` for automatic sitemap, og-image, and schema-org from frontmatter:

```ts
// 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/**' }))
  }
})
```

**Important:** Load `@nuxtjs/seo` before `@nuxt/content` in modules array:

```ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/seo', '@nuxt/content']
})
```

Frontmatter fields: `ogImage`, `sitemap`, `robots`, `schemaOrg`.

## Related Skills

- [nuxt-content](../nuxt-content/SKILL.md) - For MDC rendering with SEO frontmatter

## Links

- [Documentation](https://nuxtseo.com)
- [GitHub](https://github.com/harlan-zw/nuxt-seo)

## Token Efficiency

Main skill: ~250 tokens. Each sub-file: ~400-600 tokens. Only load files relevant to current task.

Overview

This skill provides a Nuxt SEO meta-module that centralizes robots, sitemap, OG image generation, and schema.org JSON-LD. It streamlines SEO configuration across Nuxt projects and integrates with Nuxt Content for automatic frontmatter-driven SEO. Use it to establish canonical URLs, control indexability, and produce share-ready OG images and structured data.

How this skill works

The module exposes site-level configuration (useSiteConfig) and specialized APIs for robots (useRobotsRule), sitemap (defineSitemapEventHandler), OG images (defineOgImage), and schema.org (useSchemaOrg). It can read frontmatter from Nuxt Content via asSeoCollection to auto-generate sitemap entries, OG images, and JSON-LD. Build-time link checks and utilities for breadcrumbs and meta utilities help enforce consistent SEO across pages.

When to use it

When setting global site SEO: title, URL, indexability, and default meta
When generating robots.txt and sitemap.xml for crawlers
When producing dynamic OG images for social sharing
When adding JSON-LD structured data for pages and collections
When integrating SEO into Nuxt Content frontmatter for automated outputs

Best practices

Define a central site config in nuxt.config.ts and use useSiteConfig() throughout components
Load the SEO module before @nuxt/content so content collections can opt into SEO features
Use asSeoCollection for content collections to auto-generate sitemaps, OG images, and schema from frontmatter
Keep robots and sitemap rules minimal and test with search engine tools before changing indexability
Version OG image templates and test social previews for representative pages

Example use cases

Create a site-wide canonical strategy and generate consistent meta for multi-locale sites
Auto-build sitemap.xml and robots.txt during deployment with dynamic sitemap event handlers
Generate social-ready OG images per article using defineOgImage and content frontmatter
Attach JSON-LD organization, article, and breadcrumb data using useSchemaOrg for improved SERP features
Run link validation at build time to catch broken internal links before publishing

FAQ

Do I need Nuxt Content to use this module?

No. Core SEO features (robots, sitemap, OG image, schema APIs) work without Nuxt Content. Nuxt Content integration (asSeoCollection) is optional and adds automated frontmatter-driven outputs.

How do I enable automatic sitemap and OG images for my content collection?

Use asSeoCollection when defining the collection in content.config.ts and ensure the SEO module is listed before @nuxt/content in modules so the integration can register handlers.