---
title: "Meta Descriptions in Vue"
description: "Meta descriptions get rewritten by Google 70% of the time anyway. Here's how to implement them properly in Vue using composables and let your content do the heavy lifting."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions"
last_updated: "2026-01-29"
---

<key-takeaways>

- Google rewrites 62-70% of descriptions. focus on page content quality
- Keep under 160 characters, front-load value for mobile truncation
- Use `useSeoMeta()` for type-safe description management

</key-takeaways>

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

```html
<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](/learn-seo/vue/mastering-meta/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](https://ahrefs.com/blog/meta-description-study/), [Search Engine Journal](https://www.searchenginejournal.com/google-rewrites-meta-descriptions-over-70-of-the-time/382140/)). Good page content matters more.
2. **Length varies by device**: Desktop shows ~155-160 characters, mobile ~120. [Focus on front-loading value](https://searchengineland.com/seo-meta-descriptions-everything-to-know-447910) 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.

<tip title="AI Overviews Insight (2026)">

AI-driven search (SGE) prioritizes "direct answers." Write your meta description as a concise summary of the answer users are looking for. While the AI reads your whole page, a clear description helps it categorize your content's intent faster.

</tip>

## Setting Meta Descriptions in Vue

[Unhead](https://unhead.unjs.io/) provides type-safe composables for managing head tags. The `useSeoMeta` composable is the cleanest way to set descriptions:

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

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

Alternatively, `useHead()` gives you more control:

```vue
<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:

```vue
<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](https://linkedin.com), Discord, Slack, and WhatsApp all [use `og:description`](https://ogp.me/#optional) for [link previews](/learn-seo/vue/mastering-meta/social-sharing). X (Twitter) falls back to `og:description` when `twitter:description` isn't set. so you can skip the Twitter-specific tag.

```vue
<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](https://developers.facebook.com/tools/debug/)
- [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
- [OpenGraph.xyz](https://www.opengraph.xyz/) (tests Facebook, LinkedIn, Discord, X)

## Using Nuxt?

If you're using Nuxt, check out [Nuxt SEO](/docs/nuxt-seo/getting-started/introduction) which handles much of this automatically.

[Learn more about Meta Descriptions in Nuxt →](/learn-seo/nuxt/mastering-meta/descriptions)