Nuxt SEO: The Complete Guide to Ranking on Google and Getting Cited by AI

Nuxt SEO works well out of the box because the framework ships with server-side rendering as its default mode. Every page your visitors load gets a fully-formed HTML document delivered from the server, which means Googlebot can read your content without executing JavaScript. That is the foundational advantage Nuxt offers over a purely client-side React app or an Angular SPA with lazy hydration.

The practical work of SEO in a Nuxt project breaks into two layers. The first is what the framework provides natively: composables for meta tags, a title template system, structured data hooks, and rendering controls. The second is what the Nuxt SEO module suite adds on top: automated sitemaps, robots.txt management, dynamic Open Graph images, Schema.org structured data, and increasingly, tools that make your content readable by AI engines. Together they cover the full checklist a production site needs.

This guide covers both layers. Whether you are starting a new Nuxt project or auditing an existing one, you will find the concrete steps to rank on Google and get cited by ChatGPT, Perplexity, and Google AI Overviews.

Why Nuxt is a strong SEO starting point

Nuxt renders pages on the server by default, giving crawlers a complete HTML document on the first request. No JavaScript execution required. This is the single biggest SEO difference between a Nuxt site and a React SPA. Google’s documentation notes that client-side rendering can delay indexing because crawlers must queue JavaScript execution separately, sometimes days or weeks later.

Beyond the rendering default, Nuxt gives you two core composables for head management: useHead and useSeoMeta. The useSeoMeta composable is the recommended starting point. It accepts a typed object, which prevents the most common meta tag mistake: using name instead of property for Open Graph tags.

<script setup lang="ts">
useSeoMeta({
  title: 'Product Page',
  ogTitle: 'Product Page',
  description: 'A short, compelling description under 160 characters.',
  ogDescription: 'A short, compelling description under 160 characters.',
  ogImage: 'https://example.com/og-image.png',
  twitterCard: 'summary_large_image',
})
</script>

Nuxt also injects sensible defaults automatically: a charset=utf-8 meta tag and a viewport=width=device-width, initial-scale=1 tag on every page. You do not need to declare these. For site-wide fallbacks, set them once in nuxt.config.ts under app.head and override per-page with useSeoMeta.

Rendering modes and their SEO implications

Nuxt offers four rendering strategies, and choosing the wrong one for a given route is a common source of ranking problems.

Universal rendering (SSR) is the default. The server generates full HTML, the browser hydrates it into an interactive Vue app. Best for content that needs to rank: blog posts, landing pages, product pages, and documentation.

Static site generation (SSG / prerendering) renders all pages at build time. The output is static HTML files, which load fast and are trivially crawlable. Use this when content changes infrequently. Nuxt generates sitemaps automatically when you prerender.

Client-side rendering (CSR) runs entirely in the browser. Set ssr: false to enable it. Good for dashboards and authenticated interfaces where SEO does not matter, but avoid it for any public-facing page you want indexed.

Hybrid rendering lets you mix strategies per route using route rules. A checkout flow can be CSR while the product catalog is SSR and the blog is prerendered. This is Nuxt’s most powerful SEO lever for large sites with mixed content types.

The rendering mode you choose determines what Googlebot sees on first request, which is why this decision comes before any meta tag configuration.

The Nuxt SEO module suite

The @nuxtjs/seo package bundles seven production-ready modules that handle the parts of technical SEO Nuxt does not cover natively. The suite is at v5.1.3 and is actively maintained.

Install the full suite with:

npx nuxt module add seo

Or install individual modules when you need version pinning control.

Here is what each module does:

Module	What it handles
@nuxtjs/robots	Dynamic robots.txt with per-route control and X-Robots-Tag headers
@nuxtjs/sitemap	XML sitemaps with i18n and Nuxt Content integration
nuxt-schema-org	JSON-LD structured data with 20-plus rich result types
nuxt-og-image	Vue template-based dynamic Open Graph image generation
nuxt-seo-utils	Canonical URLs, breadcrumbs, favicon handling, semantic OG tags
nuxt-link-checker	Broken link detection with audit reports
nuxt-site-config	Single configuration layer that feeds all other modules

The nuxt-site-config module is worth understanding separately. When you set your site URL once in site config, every other module reads it. Canonical tags, sitemap URLs, and OG image absolute paths all derive from that single source. This prevents the class of bugs where a staging URL leaks into production sitemaps.

Schema.org structured data in Nuxt

The nuxt-schema-org module auto-injects Organization and WebPage schema on every page by default. Once you configure your site name and URL, the base schema appears without any per-page work. For richer schemas, the module exposes composables you call inside your Vue components.

A product page might look like this:

<script setup>
useSchemaOrg([
  defineProduct({
    name: 'Wireless Keyboard',
    description: 'A compact mechanical keyboard.',
    image: '/images/keyboard.jpg',
    offers: {
      price: 89,
      priceCurrency: 'USD',
      availability: 'https://schema.org/InStock',
    },
  }),
])
</script>

The module ships with over 30 node types covering Product, Article, BreadcrumbList, FAQ, LocalBusiness, and more. Each type maps directly to a Google-supported rich result. The Fokal guide to schema markup covers the full set of schema types that produce visible search enhancements.

For local businesses built on Nuxt, combining defineLocalBusiness with a well-configured nuxt-site-config gives you the structured data foundation most competing sites miss. See the local schema markup guide for implementation patterns.

Sitemaps and robots.txt

The @nuxtjs/sitemap module generates XML sitemaps automatically from your route list. For SSG builds, this runs at build time. For SSR apps, it generates dynamically at /_sitemap.xml. The module handles multi-sitemap indexes for large sites and integrates with Nuxt Content’s collection API to include blog posts and other content-managed pages.

The robots module (720,000+ downloads from the Nuxt modules directory, current version 6.0.9) writes your robots.txt and injects the correct meta robots tags and X-Robots-Tag HTTP headers per route. A common use: block your /admin and /checkout routes from crawling while keeping your product catalog fully open. In production mode the defaults are permissive; in development and staging environments the module blocks all crawlers automatically, preventing accidental indexation of preview environments.

Dynamic Open Graph images

Most Nuxt sites either skip OG images entirely or generate them statically at build time, which means every page shares the same image. The nuxt-og-image module generates them dynamically using Vue templates and Satori (a headless renderer).

Define a template once, pass it page-specific data, and each URL gets a distinct 1200x630 image served from your own origin. This matters for link-sharing on LinkedIn and Slack, where the image is often the deciding factor in whether someone clicks through.

Nuxt SEO and AI search visibility

Ranking on Google is no longer the only game. ChatGPT, Perplexity, and Google AI Overviews pull from indexed web content, but they have their own preferences for what they cite. A Nuxt site that handles this well does three things: gives AI crawlers access, provides content in a format they parse cleanly, and signals what the page is about through structured data.

The nuxt-ai-ready module (installable alongside @nuxtjs/seo) handles the technical layer:

• Generates llms.txt and llms-full.txt files at build time, listing your pages in the format AI engines expect
• Exposes any route as a markdown endpoint (e.g., /blog/post becomes /blog/post.md), which AI crawlers read without needing to parse your HTML
• Provides an MCP server with list_pages and search_pages tools for AI agents to discover your content programmatically
• Sends IndexNow notifications to search engines when pages change, reducing re-index lag

Install it with:

npx nuxi@latest module add nuxt-ai-ready

Beyond the module, the core AI-visibility practices apply regardless of your framework. Write each page with a direct-answer opening paragraph that could appear as a verbatim quote in an AI response. Use Schema.org structured data so engines can identify entities on your pages. Keep your robots.txt open to the major AI crawlers (Googlebot, GPTBot, PerplexityBot, ClaudeBot). The robots module manages this per-route, so you can open content pages while keeping admin routes private.

The intersection of structured data and AI citations is the key insight here. When Perplexity or ChatGPT answers a question about your product category, the sources it cites are pages with clear entity signals, authoritative linking patterns, and clean HTML that returns quickly. A Nuxt SSR site, well-configured with the SEO module suite, satisfies all three. For a broader treatment of how AI engines decide what to cite, see the AI ranking factors guide.

You can track whether AI engines are actually citing your Nuxt site with Fokal, which monitors your brand across ChatGPT, Perplexity, and Google AI Overviews on a schedule.

Title template and per-page meta patterns

A practical pattern for Nuxt projects: set a title template in app.vue and override it per page with useSeoMeta.

In app.vue:

<script setup>
useHead({
  titleTemplate: (title) => title ? `${title} | Acme` : 'Acme',
})
</script>

In any page component:

<script setup>
useSeoMeta({
  title: 'Pricing',
  description: 'Simple, transparent pricing for teams of all sizes.',
  ogTitle: 'Pricing | Acme',
})
</script>

This gives you a consistent brand suffix on every page without repeating it in every component. The definePageMeta composable can complement this by setting metadata at the route level, useful when you want different layout or middleware alongside the SEO configuration.

Canonical URLs and duplicate content

Canonical tags prevent crawl budget waste and duplicate content penalties on Nuxt sites that serve the same content at multiple URLs. The nuxt-seo-utils module injects self-referencing canonical tags by default, pointing to the canonical URL as defined in nuxt-site-config.

Common scenarios where this matters: paginated routes (/blog?page=2), filtered URLs (/products?category=shoes), and trailing slash variants (/about vs /about/). By default, Nuxt redirects trailing slashes to enforce consistency, and the SEO utils module ensures the canonical URL reflects whichever variant you choose.

For JavaScript SEO in general, the canonical tag is one of the most important signals to get right early, because fixing duplicate content issues after a site has been indexed is significantly harder than preventing them at setup.

Lighthouse and Core Web Vitals

Nuxt’s SSR default and static generation modes both produce pre-built HTML, which gives you a head start on Lighthouse performance scores. The Nuxt SEO module suite is explicitly built to help sites pass Lighthouse’s SEO audit, including the meta tags, valid robots directives, and structured data checks.

Core Web Vitals remain a ranking signal. Nuxt’s approach to image handling (the <NuxtImg> component wraps your images with lazy loading, responsive sizes, and modern formats by default) addresses the Largest Contentful Paint (LCP) metric that trips up many Vue-based sites. If you are building with Nuxt and seeing poor LCP scores, check whether your hero image is being lazy-loaded (it should not be) and whether you have set a fetchpriority="high" attribute on it.

For a complete technical SEO checklist applicable across frameworks, the platform SEO hub covers the patterns that apply to Nuxt, Next.js, and other SSR frameworks equally.

Practical checklist for a production Nuxt site

Getting the SEO fundamentals right on a Nuxt project means covering these bases before launch:

1. Confirm ssr: true (default) for all public-facing routes. Use route rules to selectively apply CSR only to authenticated pages.
2. Install @nuxtjs/seo and configure nuxt-site-config with your production URL.
3. Set a titleTemplate in app.vue and add useSeoMeta to every page component with unique title and description.
4. Verify the sitemap at /sitemap.xml and submit it in Google Search Console.
5. Check the robots output at /robots.txt to confirm staging paths are blocked and production paths are open.
6. Add nuxt-schema-org schema for your primary content type (Product, Article, LocalBusiness) on the relevant pages.
7. Run Lighthouse against at least three representative page templates before launch.
8. Install nuxt-ai-ready and verify llms.txt is accessible at /llms.txt to support AI search indexing.

The AI SEO strategy guide covers step eight in depth, including which AI crawlers to allow and what your llms.txt file should contain.