Meta Descriptions in Vue

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

Unhead provides type-safe composables for managing head tags. The useSeoMeta composable is the cleanest way to set descriptions:

<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  description: 'Your description here'
})
</script>

Alternatively, useHead() gives you more control:

<script setup lang="ts">
import { useHead } from '@unhead/vue'

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

Dynamic Meta Descriptions

Use refs for reactive descriptions that update when data changes:

<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'
import { onMounted, ref } from 'vue'

const post = ref(null)

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

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.

<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

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

Testing tools:

• Facebook Sharing Debugger
• LinkedIn Post Inspector
• OpenGraph.xyz (tests Facebook, LinkedIn, Discord, X)

Using Nuxt?

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

Learn more about Meta Descriptions in Nuxt →