Nuxt is "The Intuitive Vue Framework," a full-stack framework that abstracts away the complexities of server configuration and routing in a vanilla Vue project. It extends Vue with a robust server-side environment, making it inherently SEO-friendly.

Solving Vue's SEO Problem by Default

Nuxt provides SSR and SSG as default, core features. It is built around universal rendering, ensuring crawlers receive complete, indexable content on the first request. It also allows for hybrid rendering, mixing SSR and SSG routes in the same application.

Powerful SEO Modules

Nuxt provides a powerful system for managing head tags via composables like useHead and the specialized, type-safe useSeoMeta.

Rich Module Ecosystem

Nuxt's greatest strength is its module ecosystem. The @nuxtjs/seo module is an all-in-one package that handles sitemaps, robots.txt, structured data, and even dynamic Open Graph image generation with minimal configuration.

• For any new Vue project where SEO is a consideration, start with Nuxt.
• Leverage the useSeoMeta composable for all standard on-page metadata.
• Install the @nuxtjs/seo module for a comprehensive technical SEO setup.
• Use Nuxt's built-in data fetching composables (useAsyncData, useFetch) to ensure data is loaded efficiently on the server.

International SEO Fundamentals

When targeting multiple countries or languages, proper international SEO ensures search engines serve the right content to the right audience. This involves URL structure, hreflang tags, and language detection.

• URL Structure Options: Choose between subdirectories (/en/, /fr/), subdomains (en.site.com), or parameters (?lang=en). Subdirectories are typically recommended for most sites.
• Hreflang Tags: HTML attributes that tell search engines about language and regional variations of your pages. Format: <link rel="alternate" hreflang="en-US" href="..." />
• Language vs Locale: Use language codes (en) for language targeting, or locale codes (en-US, en-GB) for region-specific content.

Implementing International SEO in Nuxt

Nuxt has exceptional i18n support through the @nuxtjs/i18n module, which is purpose-built for Nuxt and handles routing, SEO, and translations seamlessly.

• Routing Strategy: The @nuxtjs/i18n module automatically generates localized routes with prefixes (e.g., /en/about, /fr/about) and handles language detection.
• Adding Hreflang: The i18n module automatically generates hreflang tags for all pages when properly configured. No manual implementation needed!
• Recommended Tools: @nuxtjs/i18n (official, comprehensive), useSeoMeta composable (for metadata), @nuxtjs/seo (for additional SEO features).
• Code Example:

  // nuxt.config.ts
  export default defineNuxtConfig({
    modules: ['@nuxtjs/i18n'],
    i18n: {
      locales: [
        { code: 'en', iso: 'en-US', file: 'en.json' },
        { code: 'fr', iso: 'fr-FR', file: 'fr.json' }
      ],
      defaultLocale: 'en',
      strategy: 'prefix_except_default', // or 'prefix' for all languages
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        redirectOn: 'root'
      }
    }
  })
  
  // In a Vue component (pages/about.vue)
  <script setup>
  const { t, locale } = useI18n();
  
  useSeoMeta({
    title: t('about.title'),
    description: t('about.description')
  });
  
  // Hreflang tags are automatically added by @nuxtjs/i18n
  </script>
  
  <template>
    <div>
      <h1>{{ t('about.heading') }}</h1>
    </div>
  </template>