Meta Descriptions in Vue & Nuxt

Introduction

Meta descriptions don't directly impact rankings, however, they can influence click-through rates by giving users context about your page's content.

<meta name="description" content="Learn how to implement meta descriptions in Vue & 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 Tips

1. They're not essential: Google often rewrites them ~70% of the time, pulling from your page content instead.
2. Length Is Dynamic: Google's display length changes based on device and query. Focus on clarity over arbitrary character count.
3. Templates Are Bad: Using templates for descriptions like "Buy {product} at great prices" is lazy and will hurt click-through rates, summarize using AI tools, if you're short on time.

Implementation in Vue / Nuxt

In Vue, we use the built-in head package called Unhead.

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

Or with useHead() if you prefer:

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

Reactive Descriptions

Use async data with refs for dynamic descriptions:

<script setup lang="ts">
const { data: post } = await useAsyncData(() => fetchPost())

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

Open Graph Description 'og:description'

The following social sites are known to use the og:description tag for descriptions: Facebook, LinkedIn, Discord, Slack.

Twitter (X) no longer uses the twitter:description tag, so it's not worth setting.

useSeoMeta({
  description: 'Technical description for search',
  ogDescription: 'More casual description for social sharing',
  // Don't bother with Twitter description, it won't be shown
})

If you're too lazy to generate two descriptions, you can use the same description field for both. Nuxt SEO Utils can handle this for you.

You can verify your social og descriptions using the following tools:

• Facebook: Sharing Debugger
• Twitter: Card Validator
• LinkedIn: Post Inspector