๐Ÿ’š

GEO for Nuxt.js: Complete Implementation Guide

intermediate

Published April 18, 2026 ยท Updated May 13, 2026

Nuxt 4 has the most advanced native GEO support of any framework. Install nuxt-llms to auto-generate /llms.txt. Use @nuxtjs/seo for a unified suite: schema-org composables, automatic sitemaps, robots.txt control, and OG image generation. The useSeoMeta() composable via Unhead v2 handles all meta tags type-safely.

GEO for Nuxt.js: Complete Implementation Guide

Nuxt.js implements GEO via the useSeoMeta() composable for meta tags and useHead() for JSON-LD injection. Use nuxt-schema-org module for automatic schema generation. Enable SSG mode (nuxt generate) so AI crawlers receive static HTML instead of client-side JavaScript.

Nuxt.js provides strong GEO support through its composable API. The useSeoMeta composable handles all Open Graph and meta tags in a type-safe, SSR-compatible way.

Page Implementation

<!-- pages/geo-guide.vue -->
<script setup lang="ts">
const publishedTime = '2026-04-18T00:00:00Z'
const url = 'https://yoursite.com/geo-guide'
const description = 'GEO in Nuxt.js with useSeoMeta, Open Graph, and JSON-LD. Complete guide with examples.'

useSeoMeta({
  title: 'How to Implement GEO in Nuxt.js | My Site',
  description,
  ogType: 'article',
  ogTitle: 'How to Implement GEO in Nuxt.js',
  ogDescription: description,
  ogUrl: url,
  ogSiteName: 'My Site',
  ogImage: 'https://yoursite.com/og/geo-guide.jpg',
  ogLocale: 'en_US',
  articlePublishedTime: publishedTime,
  articleModifiedTime: publishedTime,
  articleAuthor: 'https://yoursite.com/author/my-company',
  articleSection: 'Technical Guides',
  articleTag: ['GEO', 'Nuxt.js'],
  robots: 'index, follow',
})

useHead({
  link: [{ rel: 'canonical', href: url }],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: 'How to Implement GEO in Nuxt.js',
        description,
        author: {
          '@type': 'Organization',
          name: 'My Company',
        },
        publisher: {
          '@type': 'Organization',
          name: 'My Site',
          logo: {
            '@type': 'ImageObject',
            url: 'https://yoursite.com/logo.png',
          },
        },
        datePublished: publishedTime,
        dateModified: publishedTime,
        mainEntityOfPage: {
          '@type': 'WebPage',
          '@id': url,
        },
      }),
    },
  ],
})
</script>

<template>
  <main>
    <article>
      <h1>How to Implement GEO in Nuxt.js</h1>
      <!-- Inverted pyramid: direct answer first -->
      <p>
        GEO in Nuxt.js is implemented via useSeoMeta() for all meta tags and
        useHead() for JSON-LD injection. SSR is enabled by default.
      </p>
    </article>
  </main>
</template>

Dynamic Pages with useAsyncData

For CMS-driven content, combine with useAsyncData:

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: post } = await useAsyncData('post', () =>
  $fetch(`/api/posts/${route.params.slug}`)
)

if (post.value) {
  useSeoMeta({
    title: `${post.value.title} | My Site`,
    description: post.value.excerpt,
    ogType: 'article',
    ogTitle: post.value.title,
    ogDescription: post.value.excerpt,
    ogUrl: `https://yoursite.com/blog/${route.params.slug}`,
    articlePublishedTime: post.value.publishedAt,
    articleModifiedTime: post.value.updatedAt,
    articleAuthor: post.value.authorUrl,
  })

  useHead({
    link: [{ rel: 'canonical', href: `https://yoursite.com/blog/${route.params.slug}` }],
    script: [{
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: post.value.title,
        datePublished: post.value.publishedAt,
        dateModified: post.value.updatedAt,
        author: { '@type': 'Person', name: post.value.author.name },
      }),
    }],
  })
}
</script>

App-Level Defaults in nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { lang: 'en' },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'robots', content: 'index, follow' },
      ],
      link: [
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      ],
    },
  },
  // Enable SSR (required for GEO โ€” default in Nuxt 3)
  ssr: true,
})

robots.txt Configuration

Create public/robots.txt:

User-agent: GPTBot
Allow: /

User-agent: OAI-SearchBot
Allow: /

User-agent: ClaudeBot
Allow: /

User-agent: Claude-User
Allow: /

User-agent: Claude-SearchBot
Allow: /

User-agent: PerplexityBot
Allow: /

User-agent: Google-Extended
Allow: /

User-agent: BingBot
Allow: /

Sitemap: https://yoursite.com/sitemap.xml
Sitemap: https://yoursite.com/llms.txt

llms.txt

Create public/llms.txt:

# My Site Name
> Description of what your site does and who it serves.

## Main Content
- [GEO Guide](https://yoursite.com/geo-guide): Complete GEO implementation guide
- [Technical Docs](https://yoursite.com/technical): Implementation details

## About
- [About](https://yoursite.com/about): Team and credentials

XML Sitemap with @nuxtjs/sitemap

Install and configure the sitemap module:

npm install -D @nuxtjs/sitemap
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://yoursite.com',
    // Dynamic routes are auto-discovered
  },
})

The module automatically generates sitemap.xml with <lastmod> dates from your page modification times.

Static Generation for AI Crawlers

For maximum AI crawler compatibility, use static generation:

# Generate fully static site
npx nuxt generate

This outputs pure HTML files that AI crawlers can read without JavaScript execution. Preferable when content is primarily static.

GEO Checklist for Nuxt.js

  • SSR enabled in nuxt.config.ts (ssr: true โ€” default)
  • useSeoMeta: title, description, og:*, article:published_time, article:modified_time
  • useHead: canonical link and JSON-LD script
  • JSON-LD with Article type, publisher, and dates
  • public/robots.txt with all 8 AI crawlers
  • public/llms.txt with site description and page listing
  • @nuxtjs/sitemap with lastmod dates
  • Inverted pyramid content structure in templates
  • Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1

Nuxt 4: Native llms.txt Support

Nuxt 4 includes official documentation and a dedicated module for llms.txt:

npx nuxi module add nuxt-llms

Configure in nuxt.config.ts:

export default defineNuxtConfig({
  llms: {
    domain: 'https://your-domain.com',
    title: 'Your Site Name',
    description: 'Brief description for AI models',
    full: true, // generates /llms-full.txt with complete content
    sections: [
      {
        title: 'Documentation',
        contentCollection: 'docs',
      },
    ],
  },
})

This generates /llms.txt as a prerendered static file โ€” no runtime overhead.

@nuxtjs/seo โ€” The Complete GEO Suite

The @nuxtjs/seo package integrates five modules:

npx nuxi module add @nuxtjs/seo

Installs: nuxt-schema-org (v6+), @nuxtjs/sitemap (v8+), @nuxtjs/robots (v6+), nuxt-og-image, nuxt-seo-utils.

Schema-org composables

// In your page component
useSchemaOrg([
  defineArticle({
    headline: 'Your Article Title',
    datePublished: '2026-05-13',
    dateModified: '2026-05-13',
    author: [{ name: 'Author Name', url: 'https://author-site.com' }],
  }),
])

AI Crawler robots configuration

// nuxt.config.ts
export default defineNuxtConfig({
  robots: {
    groups: [
      {
        userAgent: ['GPTBot', 'OAI-SearchBot', 'PerplexityBot', 'ClaudeBot', 'Google-Extended'],
        allow: ['/'],
      },
    ],
  },
})