NuxtSEO

Meta Descriptions in Nuxt

Meta descriptions get rewritten by Google 70% of the time anyway. Here's how to implement them properly in Nuxt using composables and let your content do the heavy lifting.
Harlan WiltonHarlan Wilton7 mins read Published Updated
What you'll learn
  • Use useSeoMeta() for type-safe descriptions with autocomplete
  • Google rewrites 62-70% of descriptions—focus on content quality
  • Target ~155 characters for desktop, front-load value for mobile truncation

Meta descriptions don't directly impact rankings. They affect click-through rates by giving users context about your page.

<meta name="description" content="Learn how to implement meta descriptions in Nuxt. Includes reactive content, SEO best practices, and social sharing tips.">

Unlike page titles, descriptions have more flexibility but require careful crafting to be effective.

Quick Facts

  1. Google rewrites most of them: Studies show 62-70% get rewritten (Ahrefs, Search Engine Journal). Good page content matters more.
  2. Length varies by device: Desktop shows ~155-160 characters, mobile ~120. Focus on front-loading value rather than hitting a character count.
  3. Template descriptions are lazy: "Buy {product} at great prices" won't differentiate you. Summarize using AI tools if you're short on time.

Setting Meta Descriptions in Nuxt

Nuxt includes Unhead by default. Use useSeoMeta for type-safe descriptions:

useSeoMeta({
  description: 'Your description here'
})

Alternatively, useHead() gives you more control:

useHead({
  meta: [
    { name: 'description', content: 'Your description here' }
  ]
})

Dynamic Meta Descriptions

Use Nuxt's data fetching composables for reactive descriptions:

<script setup lang="ts">
const { data: post } = await useFetch('/api/post')

useSeoMeta({
  // computed getter syntax
  description: () => post.value?.description
})
</script>

Open Graph Description 'og:description'

Facebook, LinkedIn, Discord, Slack, and WhatsApp all use og:description for link previews. X (Twitter) falls back to og:description when twitter:description isn't set—so you can skip the Twitter-specific tag.

useSeoMeta({
  description: 'Technical description for search',
  ogDescription: 'More casual description for social sharing',
  // X falls back to ogDescription, no need for twitterDescription
})

Testing tools:

Titles

Set dynamic page titles in Nuxt with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly.

Social Sharing

Configure Open Graph and Twitter Card meta tags for rich link previews on Facebook, X/Twitter, LinkedIn, Slack, and Discord.