Meta Descriptions in Vue

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. 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

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 post = ref(null)

onMounted(async () => {
  const response = await fetch('/api/post')
  post.value = await response.json()
})

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
})

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

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

Using Nuxt?

If you're using Nuxt, check out Nuxt SEO which handles much of this automatically.

Learn more about Meta Descriptions in Nuxt →