Meta Descriptions in Vue

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 page 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.
2. Length isn't fixed: Google truncates the snippet to fit the device width rather than a set character count (official guidance). 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.

Setting Meta Descriptions in Vue

Unhead 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

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 the description is absent from the initial response. Google may see it after rendering JavaScript.

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

The Open Graph protocol defines og:description as optional preview metadata. Check its use in your target platforms' link previews. Set twitter:description explicitly when you need a specific X description. Test the current preview.

<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
• LinkedIn Post Inspector
• 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 do not predict when Google will use your description.

Checklist

Nuxt SEO handles most of this automatically. Learn more about Meta Descriptions in Nuxt →