---
title: "Meta Descriptions in Vue"
description: "Google rewrites most meta descriptions anyway. Set yours with useHead or useSeoMeta in Vue 3, then put the real effort into content that earns the click."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions"
last_updated: "2026-07-16"
---

<key-takeaways>

- Use `useSeoMeta()` for type-safe descriptions with autocomplete
- Google rewrites most meta descriptions regardless of what you write, so content quality matters more than the tag itself
- Target roughly 150-160 characters and front-load the value, since Google truncates the snippet to fit the device width

</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**: [Ahrefs](https://ahrefs.com) found a 62.78% rewrite rate across 192,656 pages ([study](https://ahrefs.com/blog/meta-description-study/)); Search Engine Journal found 68% on desktop and 71% on mobile across 30,000 keywords ([study](https://www.searchenginejournal.com/google-rewrites-meta-descriptions-over-70-of-the-time/382140/)). Good page content matters more than the tag.
2. **Length isn't fixed**: Google truncates the snippet to fit the device width rather than a set character count ([official guidance](https://developers.google.com/search/docs/appearance/snippet)). Aim for roughly 150-160 characters and front-load the value, since mobile truncates sooner.
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>

AI Overviews and chat answer engines favor direct summaries over teasers. Write your description as the actual answer to the query, not an invitation to click; it doubles as text these systems quote back to users.

</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. Fetch during setup so the value exists before the server sends its response, not in `onMounted()`: that runs after SSR, so Google sees no description at all.

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

const post = ref<{ description: string } | null>(null)
post.value = await fetchPost()

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

## Writing for AI & LLMs

Search engines aren't the only ones reading your descriptions anymore. LLMs (like [ChatGPT](https://chatgpt.com), [Gemini](https://gemini.google.com), and Claude) use them to understand your page context.

- **Be accurate**: AI models may use your description as a direct answer or summary. Misleading descriptions can lead to hallucinations or being ignored.
- **Answer the user**: instead of just "click here to learn X", try "X is a Y that helps you Z." This increases the chance of being cited as a source.

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

## Checklist

<checklist id="vue-descriptions">

- Use `useSeoMeta()` instead of hardcoded meta tags
- Write a unique description per page, not a template
- Keep to roughly 150-160 characters and front-load the value
- Set `og:description` for social sharing
- Fetch data before mount so descriptions render in the initial HTML
- Accept that Google may rewrite it: focus on content quality first

</checklist>

[Nuxt SEO](/docs/nuxt-seo/getting-started/introduction) handles most of this automatically. [Learn more about Meta Descriptions in Nuxt →](/learn-seo/nuxt/mastering-meta/descriptions)