---
title: "Meta Descriptions in Vue · Nuxt SEO"
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions"
last_updated: "2026-07-16T12:00:00.000Z"
meta:
  author: "Harlan Wilton"
  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."
  "og: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."
  "og:title": "Meta Descriptions in Vue · Nuxt SEO"
---

Nuxt SEO on GitHub

# **Meta Descriptions in Vue**

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.

[Harlan Wilton](https://x.com/harlan-zw)7 mins read Published **Nov 5, 2024** Updated **Jul 16, 2026**

**What you'll learn**

- 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

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~~**](https://nuxtseo.com/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 at great prices" won't differentiate you. Summarize using AI tools if you're short on time.

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.

## 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~~**](https://nuxtseo.com/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**

- 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

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

[**The 2026 SEO Checklist for Nuxt & Vue ** Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the **Pre-Launch Warmup**](https://nuxtseo.com/learn-seo/pre-launch-warmup)

---

### **Related **

[**Page Titles in Vue**](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)

[**Social Sharing Tags**](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)

[**Meta Robots Tags**](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/meta-tags)

### **Open Source **

[**unjs/unhead**** Public **](https://github.com/unjs/unhead)

[**Titles** Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly.](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles) [**Social Sharing** Set Open Graph and Twitter Card tags in Vue so links preview correctly on Facebook, X, LinkedIn, Slack, and Discord instead of plain text.](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)

**On this page**

- [Quick Facts](#quick-facts)
- [Setting Meta Descriptions in Vue](#setting-meta-descriptions-in-vue)
- [Dynamic Meta Descriptions](#dynamic-meta-descriptions)
- [Writing for AI & LLMs](#writing-for-ai-llms)
- [Open Graph Description 'og:description'](#open-graph-description-ogdescription)
- [Checklist](#checklist)