DOCSEARCHbyAlgolia
Submit Docs

Nuxt SEO

repository·main·Indexed 23 days ago

https://github.com/harlan-zw/nuxt-seo

A comprehensive ecosystem of modules for full-stack Technical SEO and Answer Engine Optimization (AEO) in Nuxt applications. The @nuxtjs/seo meta-module bundles core tools including @nuxtjs/robots, @nuxtjs/sitemap, nuxt-schema-org, nuxt-og-image, nuxt-seo-utils, nuxt-link-checker, and nuxt-site-config. It ensures sites are discoverable by traditional search engines and AI crawlers, with optional companion modules like nuxt-ai-ready for LLM optimization and nuxt-skew-protection for asset persistence.

Tokens
26.8K
Snippets
65
Records
155
Agent score
80%

What's inside @nuxtjs/seo

  1. Overview of Nuxt SEO core modules

    main

    The @nuxtjs/seo module bundles 6 core modules to provide comprehensive SEO capabilities. Most work out-of-the-box, but specific configuration may be required depending on your site's needs. You can also install standalone modules like Skew Protection or AI Ready separately.

    Core modules included:

    • Sitemap: Generates sitemap.xml based on app data sources.
    • Robots: Generates robots.txt and manages <meta name="robots"> and X-Robots-Tag headers.
    • OG Image: Generates dynamic Open Graph images (requires configuration to opt-in).
    • Schema.org: Automatically generates JSON-LD schema for pages.
    • Link Checker: Checks links for SEO issues during build or via Nuxt DevTools.
    • SEO Utils: Provides extra features like automatic file metadata (icons/OG images), seoMeta opt-in, default meta/fallback titles, and breadcrumbs.

  2. Overview of Nuxt SEO features

    main

    Nuxt SEO provides several specialized modules to handle technical SEO:

    • Crawl Control: Automatic robots.txt generation, <meta name="robots"> tags, and X-Robots-Tag headers.
    • Sitemaps: Auto-generated sitemap.xml from app data, including multi-sitemap support for i18n.
    • OG Images: Dynamic Open Graph image generation for pages.
    • Structured Data: Automatic Schema.org JSON-LD generation with sensible defaults.
    • Link Checking: Build-time broken link detection with ESLint and DevTools support.
    • SEO Utils: Automatic favicons, default meta tags, breadcrumbs, and social share links.

    Standalone Modules (not included in the @nuxtjs/seo bundle but compatible):

    • Skew Protection: Solves Nuxt version skews with persistent assets.
    • AI Ready: Optimizes discoverability for AI and LLMs.

  3. Nuxt SEO Pro MCP Features

    main

    Nuxt SEO Pro provides advanced MCP tools for professional workflows, including:

    • analyze_page: Analyze Vue files for SEO issues.
    • generate_schema_org: Generate useSchemaOrg() TypeScript code.
    • generate_og_image_template: Generate OG image components.
    • Content Intelligence: Keyword research, SERP analysis, and ranking checks.
    • Content Generation: Specialized prompts for content creation.

  4. How i18n integration affects different Nuxt SEO modules

    main

    When integrated with an i18n module, Nuxt SEO modules behave as follows:

    • SEO Utils: Automatically sets the lang attribute on the <html> element and populates locale-specific meta tags like og:locale and og:site_name in the <head>.
    • Sitemap: Generates a sitemap index containing separate sitemaps for each locale (e.g., /__sitemap__/en-US.xml). Each locale-specific sitemap includes hreflang tags to link translations.
    • Robots: Automatically expands robots rules to include locale-prefixed paths based on your i18n strategy.
    • Schema.org: Creates a WebSite entity for each locale and uses workTranslation to link the different language versions together.
    • OG Image: Generates images per locale using the locale-specific site name and description as default properties.
    • Site Config: Automatically extracts url, defaultLocale, and currentLocale from your i18n configuration.

  5. Configure OG Image via Nuxt Content frontmatter

    main

    The defineOgImageSchema() provides three main properties for your content frontmatter:

    • component: The name of a component located in components/OgImage/.
    • props: An object containing the values for the properties defined in that component.
    • url: A direct link to an existing image file (bypasses on-the-fly generation).

    You can implement a failover strategy in your component to use either custom frontmatter or default values.

    <script setup lang="ts">
const props = defineProps({
  title: { type: String, required: false, default: 'title' },
  description: { type: String, required: false },
})
</script>

<template>
  <div style="background-color: darkgoldenrod;display: flex; flex-direction: column; font-size: 2rem; padding: 3rem; color: white">
    <h1 style="font-size: 4rem; font-weight: 800;">
      {{ title }}
    </h1>
    <h2 v-if="description" style="display: block;">
      {{ description }}
    </h2>
  </div>
</template>
    <script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})

// Failover strategy: use frontmatter component/props or fallback to a default
const component = page.value?.ogImage?.component || 'Simple.takumi'
const props = page.value?.ogImage?.props || { title: page.value?.title, description: page.value?.description }
const [ogImagePath] = defineOgImage(component, props)

useSeoMeta({
  title: page.value.title,
  description: page.value.description,
  ogImage: ogImagePath,
})
</script>

  6. Configure Robots.txt and indexing rules

    main

    The Robots module generates a robots.txt file at /robots.txt and manages indexing via <meta name="robots"> and X-Robots-Tag headers.

    • Environments: If you use environments other than development or production, you must configure the env option.
    • Blocking routes: By default, all routes are allowed. You can configure rules to block specific routes.
    • I18n: Disallow rules automatically include locale prefixes.

  7. Automatic SEO features provided by @nuxtjs/seo with Nuxt Content

    main

    When integrated with Nuxt Content, @nuxtjs/seo automatically provides the following features for every page generated from content files:

    • Meta Tags: <title> and <meta name="description"> are derived from the file's frontmatter.
    • Open Graph Images: An OG image is automatically generated using nuxt-og-image.
    • Sitemaps: Every content page is automatically included in the /sitemap.xml.
    • Structured Data: Schema.org metadata is automatically generated via nuxt-schema-org.

  8. How nuxtseo-layer-devtools architecture works

    main

    The nuxtseo-layer-devtools is a shared Nuxt layer providing components, composables, and a design system for all Nuxt SEO module devtools clients.

    It follows a Source Layer (Model C) architecture:

    1. nuxtseo-shared/devtools: Registers the Nuxt DevTools iframe tab. In development, it assembles every installed SEO module's devtools/ layer and the base layer into one unified client, serving it at /__nuxt-seo-devtools/<slug>.
    2. nuxtseo-layer-devtools: The base layer containing shared components, composables, CSS, and fonts.
    3. Module client: The specific devtools/ directory within a module containing its pages and logic. This is extended by the assembler.

    Key Libraries available via the layer:

    • @nuxt/ui (v4): Use components like UButton, UBadge, UIcon, UInput, UTooltip, and UApp.
    • @vueuse/nuxt: All VueUse composables are auto-imported.
    • Shiki: Syntax highlighting via loadShiki or useRenderCodeHighlight composables.

  10. Override SEO settings using frontmatter

    main

    For content-driven sites, you can override default SEO behaviors on a per-page basis by using frontmatter keys. Supported keys for overrides include:

    • sitemap: Customizes sitemap behavior for the page.
    • robots: Configures robots.txt directives (e.g., index, follow).
    • schemaOrg: Provides structured data for the page.
    ---
title: SEO Tips for Nuxt Sites
description: A short collection of SEO tips for content-driven Nuxt sites.
date: 2026-05-17
robots: index, follow
---

  12. Choose between @nuxtjs/seo and individual modules

    main

    You can install the entire suite using the @nuxtjs/seo alias, which installs all 6 modules at once. This alias contains no extra logic and provides the exact same features and configuration as installing them individually.

    • Use @nuxtjs/seo: For convenience and a quick setup.
    • Use individual modules: If you only need specific features or require granular version pinning control.

    Note: nuxt-site-config is a dependency that installs automatically when you install any Nuxt SEO module. You do not need to add it to your modules array manually.