Nuxt · · 6 min read

The Nuxt SEO checklist: meta tags, sitemaps and structured data

A practical checklist for making a Nuxt app rank: useSeoMeta, canonical URLs, sitemaps, robots.txt, structured data and choosing the right rendering mode per route.

By Mukesh Pensia, Vue.js & Nuxt developer

Nuxt gives you server-side rendering out of the box, which already puts you ahead of a plain single-page Vue app: crawlers get real HTML instead of an empty <div id="app">. But rendering is only the start. This is the checklist we run through on every Nuxt project before launch.

1. Give every page its own title and description

Use useSeoMeta in each page. It is typed, so a typo like ogTitel fails at build time instead of silently shipping.

<script setup lang="ts">
useSeoMeta({
  title: 'Services',
  description: 'Fixed-price Vue and Nuxt development for startups and agencies.',
  ogTitle: 'Services',
  ogDescription: 'Fixed-price Vue and Nuxt development for startups and agencies.',
  ogImage: 'https://example.com/og/services.png',
  twitterCard: 'summary_large_image',
})
</script>

Set a title template once in app.vue so every page gets your brand suffix:

useHead({
  titleTemplate: (title) => (title ? `${title} | My Site` : 'My Site'),
})

2. Add canonical URLs

Query strings, trailing slashes and tracking parameters create duplicate URLs. A canonical link tells search engines which version to index:

const route = useRoute()
useHead({
  link: [{ rel: 'canonical', href: `https://example.com${route.path}` }],
})

3. Generate a sitemap and robots.txt

The Nuxt SEO module bundles sitemap, robots, Open Graph image and schema.org support behind one config key:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],
  site: {
    url: 'https://example.com',
    name: 'My Site',
  },
})

You get /sitemap.xml and /robots.txt generated from your routes, and staging environments can be kept out of the index from the same place.

4. Pick a rendering mode per route

Not every page needs the same strategy. routeRules lets you mix them, and the choice affects both speed and how fresh crawlers see your content:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // static HTML at build time
    '/blog/**': { isr: 3600 },         // regenerate at most once an hour
    '/dashboard/**': { ssr: false },   // private app, no SEO needed
  },
})

Marketing pages and articles should be prerendered or cached. Logged-in areas can skip SSR entirely and should be excluded from the sitemap.

5. Add structured data

Structured data helps search engines understand who wrote a page and what it is about. With Nuxt SEO installed, useSchemaOrg handles the JSON-LD for you:

useSchemaOrg([
  definePerson({ name: 'Your Name', url: 'https://example.com' }),
  defineWebPage(),
])

6. Don't forget the basics

  • Exactly one <h1> per page, and headings in order.
  • Real links with <NuxtLink> or <a href>, never click handlers on a div.
  • Descriptive alt text on content images, and width and height on all of them.
  • Return a real 404 status for missing pages: throw createError({ statusCode: 404 }).
  • Check Core Web Vitals, because page experience is part of ranking.

None of this is complicated, but skipping any one item is a common reason a well-built Nuxt site doesn't show up in search.

Need a hand with your Nuxt app?

More notes