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