---
title: "Meta Descriptions in Vue"
description: "Set page-specific meta descriptions with useHead or useSeoMeta in Vue 3. Understand server rendering, reactive updates, and Google snippets."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions"
last_updated: "2026-10-08"
---

> Index of every page on this site: [llms.txt](https://nuxtseo.com/llms.txt)

::key-takeaways
- Use `useSeoMeta()`{lang="ts"} for type-safe descriptions with autocomplete
- Google builds snippets from page content and may use your meta description when it fits the query
- 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 give you more room to describe the page. Choose the words carefully.

## Quick Facts

1. **Google chooses the snippet**: It primarily uses page content. It may use your meta description when that summary fits the search. [See Google's snippet guidance](https://developers.google.com/search/docs/appearance/snippet).
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.

::tip
Write a clear summary of the page. Google may use it as a search snippet. No description format guarantees inclusion in AI answers.
::

## Setting Meta Descriptions in Vue

[Unhead](https://unhead.unjs.io/) provides type-safe composables for managing head tags. The `useSeoMeta`{lang="ts"} 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()`{lang="ts"} 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()`{lang="ts"}: that runs after SSR, so the description is absent from the initial response. Google may see it after rendering JavaScript.

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

A clear description helps readers understand the page. Treat AI citation advice as provider-specific. Google requires no special description format for its AI features.

- **Be accurate**: Describe the content readers will find on the page. Avoid claims the page cannot support.
- **Answer the user**: instead of just "click here to learn X", try "X is a Y that helps you Z." This makes the page purpose clearer to readers.

## Open Graph Description `'og:description'`{lang="ts"}

The Open Graph protocol defines [`og:description`](https://ogp.me/#optional) as optional preview metadata. Check its use in your target platforms' [link previews](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing). Set `twitter:description` explicitly when you need a specific X description. Test the current preview.

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

useSeoMeta({
  description: 'Technical description for search',
  ogDescription: 'More casual description for social sharing',
  twitterDescription: 'More casual description for social sharing',
})
</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)

A deployed description does not immediately replace a Google snippet. Google must recrawl and process the page, and it may select another passage.

Record the edit date and check the displayed result before comparing complete CTR periods. The [reported serving timings](https://nuxtseo.com/learn-seo/google-search-timelines) do not predict when Google will use your description.

## Checklist

::checklist{#vue-descriptions}
- Use `useSeoMeta()`{lang="ts"} 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)

## Sitemap

See the full [sitemap](https://nuxtseo.com/sitemap.md) for all pages.