SEO

Nuxt be uses Nuxt SEO to optimize your website for search engines. This powerful collection of modules handles all technical aspects needed to grow your site's organic traffic.

Overview

The SEO module collection provides comprehensive tools for:

Meta Tags: Automated meta tag management for enhanced search visibility
Sitemaps: Dynamic XML sitemap generation
Robots.txt: Search engine crawling control
Social Media Tags: Open Graph and Twitter Card optimization
Schema.org: Structured data markup for rich snippets

Configuration

Global SEO Settings

Configure site-wide SEO settings in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'Example',
    description: 'Example description',
  },
})

Those values will be used to automatically by the SEO modules to generate relevant meta tags, sitemaps, and more.

App-Level SEO Configuration

The app.vue file contains base SEO configuration:

app.vue

// Define Open Graph image component
defineOgImageComponent('Nuxtbe', {
  headline: '',
  title: 'Nuxtbe',
  description: 'Nuxtbe: The ultimate Nuxt SaaS Starter Kit',
})

// Configure basic head elements
useHead({
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' },
  ],
  htmlAttrs: {
    lang: 'en',
  },
})

const { name: siteName } = useSiteConfig()

// Set up global SEO meta tags
useSeoMeta({
  ogSiteName: siteName,
  twitterCard: 'summary_large_image',
})

Page-Specific SEO

For individual pages, use useSeoMeta in your component's setup:

<script setup lang="ts">
useSeoMeta({
  title: 'Page Title',
  description: 'Page description',
  ogImage: '/path/to/image.jpg', // if needed
})
</script>

Docs SEO

All the pages in the docs are automatically optimized for SEO.

docs/...slug.vue

<script setup lang="ts">
useSeoMeta({
  title: `${page.value?.title ?? '404'}`,
  ogTitle: page.value?.title,
  description: page.value?.description,
  ogDescription: page.value?.description,
  twitterCard: 'summary_large_image',
});
</script>

Also docs pages supports automatic generation of Open Graph images.

docs/...slug.vue

<script setup lang="ts">
defineOgImageComponent('Nuxtbe', {
  title: page.value.title,
  description: page.value.description,
});
</script>