Meta Descriptions in Vue · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

Learn SEO

Master search optimization

Nuxt

 Vue

-
-
-
-
-
-
-

-
-
-
-
-
-
-

-
-
-

-
-
-
-
-
-
-
-
-
-
-

-
-
-

-
-
-
-
-
-
-
-
-

1.
2.
3.
4.
5.

# Meta Descriptions in Vue

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.

[![Harlan Wilton](https://avatars.githubusercontent.com/u/5326365?v=4)Harlan Wilton](https://x.com/harlan-zw)7 mins read Published Nov 5, 2024 Updated Jan 29, 2026

What you'll learn

- 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

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

, descriptions have more flexibility but require careful crafting to be effective.

### [Quick Facts](#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.

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.

## [Setting Meta Descriptions in Vue](#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:

```
<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](#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'`](#open-graph-description-ogdescription)

Facebook, [LinkedIn](https://linkedin.com), Discord, Slack, and WhatsApp all [use `og:description`](https://ogp.me/#optional) for

. 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](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?](#using-nuxt)

If you're using Nuxt, check out

 which handles much of this automatically.

---

On this page

- [Quick Facts](#quick-facts)
- [Setting Meta Descriptions in Vue](#setting-meta-descriptions-in-vue)
- [Dynamic Meta Descriptions](#dynamic-meta-descriptions)
- [Open Graph Description 'og:description'](#open-graph-description-ogdescription)
- [Using Nuxt?](#using-nuxt)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)