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

<key-takeaways>

- Use `useSeoMeta()` for type-safe descriptions with autocomplete
- Google rewrites 62-70% of descriptions. focus on content quality
- Target ~155 characters for desktop, front-load value for mobile truncation

</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 Nuxt. Includes reactive content, SEO best practices, and social sharing tips.">
```

Unlike [page titles](/learn-seo/nuxt/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.

## Setting Meta Descriptions in Nuxt

Nuxt includes [Unhead](https://unhead.unjs.io/) by default. Use `useSeoMeta` for type-safe descriptions:

```ts
useSeoMeta({
  description: 'Your description here'
})
```

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

```ts
useHead({
  meta: [
    { name: 'description', content: 'Your description here' }
  ]
})
```

## Dynamic Meta Descriptions

Use Nuxt's data fetching composables for reactive descriptions:

```vue
<script setup lang="ts">
const { data: post } = await useFetch('/api/post')

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/nuxt/mastering-meta/open-graph). X (Twitter) falls back to `og:description` when `twitter:description` isn't set. so you can skip the Twitter-specific tag.

```ts
useSeoMeta({
  description: 'Technical description for search',
  ogDescription: 'More casual description for social sharing',
  // X falls back to ogDescription, no need for twitterDescription
})
```

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

## Nuxt SEO Module

Automates meta descriptions, titles, and social sharing:

<module-card className="w-1/2" slug="nuxt-seo">



</module-card>