SEO Best Practices

Making Your Nuxt App Discoverable

SEO is critical for content-driven websites. Nuxt makes it easy with built-in meta management.

useHead Composable

Set page metadata dynamically:

<script setup>
useHead({
  title: 'My Page Title',
  meta: [
    { name: 'description', content: 'Page description' },
    { property: 'og:title', content: 'My Page Title' },
    { property: 'og:description', content: 'Page description' },
    { property: 'og:image', content: 'https://example.com/image.jpg' }
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ]
})
</script>

useSeoMeta Composable

Simplified SEO meta tags:

<script setup>
useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

Structured Data

Add JSON-LD structured data:

<script setup>
useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        'headline': 'Article Title',
        'author': {
          '@type': 'Person',
          'name': 'John Doe'
        },
        'datePublished': '2024-01-01'
      })
    }
  ]
})
</script>

Sitemap

Generate sitemap with @nuxtjs/sitemap:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    routes: async () => {
      const posts = await fetchPosts()
      return posts.map(post => `/blog/${post.slug}`)
    }
  }
})

Robots.txt

Configure robots.txt:

// nuxt.config.ts
export default defineNuxtConfig({
  robots: {
    UserAgent: '*',
    Disallow: '/admin',
    Allow: '/',
    Sitemap: 'https://example.com/sitemap.xml'
  }
})

SEO Checklist

✅ Unique title and description for each page
✅ Open Graph tags for social sharing
✅ Twitter Card tags
✅ Canonical URLs
✅ Structured data (JSON-LD)
✅ XML sitemap
✅ robots.txt file
✅ Alt text for images
✅ Semantic HTML
✅ Fast page load speed
✅ Mobile-friendly design
✅ HTTPS enabled

SEO is not just about meta tags. It's about creating quality content, ensuring fast load times, and providing a great user experience. Nuxt gives you the tools - use them wisely!

Performance Optimization

Testing Nuxt Applications