SEO Setup Command

Quickly set up comprehensive SEO for a Nuxt project using @nuxtjs/seo.

Arguments

• site-url: Your production URL (required)
• site-name: Your site name (required)

Setup Steps

Step 1: Install @nuxtjs/seo

bunx nuxi module add @nuxtjs/seo
# or: npx nuxi module add @nuxtjs/seo

Step 2: Configure nuxt.config.ts

Add site configuration:

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],

  site: {
    url: '${site-url}',
    name: '${site-name}',
    description: 'Your site description here',
    defaultLocale: 'en'
  },

  // Optional: Organization identity for Schema.org
  schemaOrg: {
    identity: {
      type: 'Organization',
      name: '${site-name}',
      url: '${site-url}',
      logo: '${site-url}/logo.png'
    }
  },

  // Optional: Route-specific SEO rules
  routeRules: {
    '/admin/**': { robots: 'noindex, nofollow' },
    '/api/**': { robots: 'noindex' }
  }
})

Step 3: Add Default OG Image

Create a default OG image template in components/OgImage/:

<!-- components/OgImage/Default.vue -->
<template>
  <div class="w-full h-full flex flex-col justify-center items-center bg-gradient-to-br from-green-500 to-blue-600 p-16">
    <h1 class="text-6xl font-bold text-white text-center">
      {{ title }}
    </h1>
    <p v-if="description" class="text-2xl text-white/80 text-center mt-4">
      {{ description }}
    </p>
  </div>
</template>

<script setup>
defineProps<{
  title: string
  description?: string
}>()
</script>

Step 4: Set Up app.vue Meta Defaults

<!-- app.vue -->
<script setup>
useSeoMeta({
  titleTemplate: '%s | ${site-name}',
  ogSiteName: '${site-name}',
  twitterCard: 'summary_large_image'
})
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Step 5: Verify Setup

After setup, verify:

1. Visit http://localhost:3000/robots.txt
2. Visit http://localhost:3000/sitemap.xml
3. Check page source for meta tags
4. Use browser dev tools to verify OG tags

Post-Setup Checklist

• Restart dev server after config changes
• Add page-specific meta using useSeoMeta()
• Create OG images for key pages with defineOgImage()
• Add structured data with useSchemaOrg()
• Test with Google Rich Results Test
• Submit sitemap to Google Search Console

Quick Reference

<!-- Example page SEO -->
<script setup>
useSeoMeta({
  title: 'Page Title',
  description: 'Page description for search results',
  ogImage: '/images/og-page.jpg'
})

defineOgImage({
  component: 'Default',
  title: 'Page Title',
  description: 'For social sharing'
})

useSchemaOrg([
  defineWebPage({
    name: 'Page Title'
  })
])
</script>