Nuxt 3 SEO Best Practices

This skill provides comprehensive guidance for implementing SEO best practices in Nuxt 3 applications, following recommendations from nuxtseo.com.

When to use this skill

Use this skill whenever the user wants to:

• Implement SEO in Nuxt 3 applications
• Add sitemap to their Nuxt project
• Configure robots.txt
• Implement Schema Org structured data
• Add Open Graph meta tags
• Improve search engine visibility
• Follow nuxtseo.com best practices
• Configure @nuxtjs/sitemap module
• Configure @nuxtjs/robots module
• Use nuxt-schema-org module

Core Concepts

1. Sitemap

• XML sitemap for search engines
• Automatically generated from routes
• Configurable via @nuxtjs/sitemap module

2. Robots.txt

• Controls search engine crawling
• Configurable via @nuxtjs/robots module
• Allows/disallows specific paths

3. Schema Org

• Structured data for search engines
• JSON-LD format
• Improves rich snippets in search results
• Configurable via nuxt-schema-org module

4. Open Graph

• Social media sharing optimization
• Facebook, Twitter, LinkedIn support
• Improves link previews
• Configurable via useSeoMeta composable

Installation

Required Modules

Install the following modules:

npm install @nuxtjs/sitemap @nuxtjs/robots nuxt-schema-org

Nuxt Config

Add to nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/sitemap',
    '@nuxtjs/robots',
    'nuxt-schema-org'
  ]
})

Sitemap Configuration

Basic Setup

Create sitemap.config.ts:

export default defineSitemapOptions({
  siteUrl: 'https://www.example.com',
  exclude: ['/admin/**'],
  defaults: {
    changefreq: 'daily',
    priority: 0.7
  }
})

Advanced Configuration

export default defineSitemapOptions({
  siteUrl: 'https://www.example.com',
  exclude: ['/admin/**', '/api/**'],
  routes: async () => {
    const routes = []
    routes.push({
      url: '/custom-page',
      changefreq: 'weekly',
      priority: 0.8
    })
    return routes
  },
  defaults: {
    changefreq: 'daily',
    priority: 0.7,
    lastmod: new Date()
  }
})

Access Sitemap

Sitemap will be available at: /sitemap.xml

Robots.txt Configuration

Basic Setup

Create robots.config.ts:

export default defineRobotsOptions({
  sitemap: 'https://www.example.com/sitemap.xml',
  UserAgent: '*',
  Disallow: ['/admin', '/api']
})

Advanced Configuration

export default defineRobotsOptions({
  sitemap: 'https://www.example.com/sitemap.xml',
  UserAgent: '*',
  Disallow: ['/admin', '/api', '/private'],
  Allow: ['/public'],
  CrawlDelay: 1000
})

Multiple User Agents

export default defineRobotsOptions({
  UserAgent: [
    {
      name: 'Googlebot',
      Disallow: ['/private']
    },
    {
      name: '*',
      Disallow: ['/admin']
    }
  ]
})

Access Robots.txt

Robots.txt will be available at: /robots.txt

Schema Org Configuration

Basic Setup

In nuxt.config.ts:

export default defineNuxtConfig({
  schemaOrg: {
    identity: {
      '@type': 'Organization',
      name: 'Company Name',
      url: 'https://www.example.com',
      logo: 'https://www.example.com/logo.png',
      sameAs: [
        'https://www.facebook.com/company',
        'https://www.linkedin.com/company'
      ]
    }
  }
})

WebPage Schema

export default defineNuxtConfig({
  schemaOrg: {
    webPage: true,
    defaults: {
      '@type': 'WebPage',
      name: 'Default Page Name',
      description: 'Default description'
    }
  }
})

Article Schema

For blog posts or articles:

export default defineNuxtConfig({
  schemaOrg: {
    article: {
      '@type': 'Article',
      headline: 'Article Title',
      author: {
        '@type': 'Person',
        name: 'Author Name'
      },
      datePublished: '2024-01-01',
      dateModified: '2024-01-01'
    }
  }
})

Open Graph Configuration

Using useSeoMeta

<script setup>
const { t, locale } = useI18n()

const pageTitle = computed(() =>
  locale.value === 'zh'
    ? '页面标题'
    : 'Page Title'
)

const pageDescription = computed(() =>
  locale.value === 'zh'
    ? '页面描述'
    : 'Page description'
)

const pageImage = computed(() =>
  'https://www.example.com/og-image.jpg'
)

useSeoMeta({
  title: pageTitle.value,
  description: pageDescription.value,
  ogTitle: pageTitle.value,
  ogDescription: pageDescription.value,
  ogImage: pageImage.value,
  ogType: 'website',
  twitterCard: 'summary_large_image'
})
</script>

Using useSchemaOrg

<script setup>
import { useSchemaOrg } from 'nuxt-schema-org/vue'

const { graph } = useSchemaOrg({
  '@type': 'WebPage',
  name: 'Page Title',
  description: 'Page Description',
  image: 'https://www.example.com/image.jpg'
})

useHead({
  script: [
    {
      type: 'application/ld+json',
      children: graph
    }
  ]
})
</script>

Best Practices

1. Sitemap

• Keep sitemap under 50,000 URLs
• Use appropriate changefreq values
• Set priority based on page importance
• Exclude admin and private pages
• Update sitemap regularly

2. Robots.txt

• Block sensitive directories
• Allow public content
• Specify crawl delay if needed
• Test with Google Search Console
• Keep it simple and clear

3. Schema Org

• Use appropriate schema types
• Include all required properties
• Validate with Google Rich Results Test
• Use JSON-LD format
• Keep schema up to date

4. Open Graph

• Use high-quality images (1200x630px)
• Write compelling titles and descriptions
• Test with Facebook Sharing Debugger
• Include all required meta tags
• Support multiple platforms (Facebook, Twitter, LinkedIn)

5. General SEO

• Use semantic HTML
• Optimize page load speed
• Ensure mobile responsiveness
• Use descriptive URLs
• Implement proper heading hierarchy
• Add alt text to images
• Use internal linking
• Create quality content

Testing and Validation

Sitemap Validation

• Google Search Console: https://search.google.com/search-console
• XML Sitemap Validator: https://www.xml-sitemaps.com/validate-xml-sitemap

Robots.txt Validation

• Google Robots Testing Tool: https://developers.google.com/search-console/robots

Schema Org Validation

• Google Rich Results Test: https://search.google.com/test/rich-results
• Schema.org Validator: https://validator.schema.org/

Open Graph Validation

• Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
• Twitter Card Validator: https://cards-dev.twitter.com/validator

Common Issues and Solutions

Sitemap Not Found

• Check module is installed
• Verify sitemap.config.ts exists
• Check siteUrl in config
• Restart development server

Robots.txt Not Working

• Verify @nuxtjs/robots module
• Check robots.config.ts syntax
• Test at /robots.txt endpoint
• Check for conflicting files

Schema Org Not Appearing

• Validate JSON-LD syntax
• Check useHead implementation
• Verify schema.org types
• Test with validation tools
• Check for JavaScript errors

Open Graph Not Working

• Verify meta tags in head
• Check image URLs are accessible
• Validate image dimensions
• Test with sharing tools
• Check for caching issues

Resources

• Nuxt SEO: https://nuxtseo.com
• @nuxtjs/sitemap: https://sitemap.nuxtjs.org
• @nuxtjs/robots: https://robots.nuxtjs.org
• nuxt-schema-org: https://nuxtseo.com/schema-org
• Schema.org: https://schema.org/
• Open Graph Protocol: https://ogp.me/
• Google Search Console: https://search.google.com/search-console

Keywords

Nuxt 3, Nuxt3, SEO, search engine optimization, sitemap, robots.txt, Schema Org, Open Graph, meta tags, nuxtseo, Google Search Console, structured data, JSON-LD, social media sharing, Facebook, Twitter, LinkedIn