---
title: "Vue SEO Meta Tags Guide"
description: "Set titles, descriptions, Open Graph, and Schema.org in Vue 3 with @unhead/vue, with explicit head installation and initial HTML checks."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta"
last_updated: "2026-10-05"
---

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

::key-takeaways
- Install `@unhead/vue` manually in Vue (Nuxt includes it automatically)
- Use `useSeoMeta()`{lang="ts"} from @unhead/vue for type-safe meta tag management
- SSR or prerendering can place route-specific tags in initial HTML; client-rendered tags depend on JavaScript processing
- Set Open Graph and X card properties explicitly, then test previews with each provider
::

A client-rendered Vue SPA can include static tags in its initial HTML. Tags added by Vue appear after JavaScript runs. Google can render JavaScript, but rendering failures can hide those tags. SSR or prerendering makes route-specific tags available in the response itself. Unlike Nuxt, which integrates Unhead automatically, Vue requires you to [install and configure @unhead/vue manually](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) in your `main.ts`. This guide covers SSR-compatible patterns using [Unhead](https://unhead.unjs.io/).

```html
<head>
  <title>My Page · My Site</title>
  <meta name="description" content="What this page is about">
  <meta property="og:image" content="https://mysite.com/og.png">
</head>
```

In Vue, you manage these with `useSeoMeta()`{lang="ts"} or `useHead()`{lang="ts"} from @unhead/vue:

```ts
import { useSeoMeta } from '@unhead/vue'

// Component setup excerpt after installing the head plugin
useSeoMeta({
  title: 'My Page',
  description: 'What this page is about',
  ogImage: 'https://mysite.com/og.png'
})
```

## What Meta Tags Control

| Meta Tag                                                                                       | Used By                            | Purpose                                                                    |
| ---------------------------------------------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------- |
| [`<title>`{lang="html"}](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)                                 | Search engines, browsers           | Page title in search results and browser tab                               |
| [`<meta name="description">`{lang="html"}](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions)         | Search engines                     | A possible source for search snippets; Google may use page content instead |
| [`<meta property="og:*">`{lang="html"}](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)          | Facebook, LinkedIn, Discord, Slack | Link preview cards                                                         |
| [`<meta name="twitter:*">`{lang="html"}](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)         | Twitter/X                          | X link preview cards                                                       |
| [`<script type="application/ld+json">`{lang="html"}](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org) | Search engines                     | Eligibility for supported rich results, subject to feature policies        |

### Search Engine Tags

These affect how your pages appear in Google, Bing, and other search results.

- [**Page Titles**](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles): Describe the page clearly. Google may truncate or generate a different title link.
- [**Meta Descriptions**](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions): Summarize each page. Google may use the description or relevant page content for a query.
- [**Image Alt Text**](https://nuxtseo.com/learn-seo/vue/mastering-meta/alt-text): Text alternatives for images, with decorative images handled separately.

### Social Sharing Tags

These control link previews when someone shares your URL.

- [**Social Sharing**](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing): Open Graph (Facebook, LinkedIn, Discord, Slack) and Twitter Cards in one guide. Set Open Graph and X card properties for the preview you need, then inspect provider output.

### Structured Data

- [**Schema.org**](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org): JSON-LD describing page entities. Choose supported types that match visible content; markup does not guarantee a rich result.

Migrating from vue-meta? It was the Vue 2 standard but never shipped a stable Vue 3 release. See [Migrating from vue-meta](https://nuxtseo.com/learn-seo/vue/mastering-meta/migrating-vue-meta) for side-by-side syntax and migration steps.

## Quick Setup

First [install the head plugin](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation). Then add these app-component defaults inside `<script setup lang="ts">`{lang="html"}:

```ts
import { useHead, useSeoMeta } from '@unhead/vue'

useHead({
  title: 'My Site',
  titleTemplate: title => title && title !== 'My Site'
    ? `${title} · My Site`
    : 'My Site',
})
useSeoMeta({
  ogSiteName: 'My Site',
  twitterCard: 'summary_large_image'
})
```

Then set per-page meta using the patterns described in each guide below.

## Priority Order

Unhead deduplicates tags such as titles and descriptions. Later entries normally replace earlier matching entries. Explicit priorities and duplicate strategies can change resolution, so component nesting alone does not define a universal priority order. Check the final tags after route changes.

## Performance & Scripts

Third-party scripts can occupy the main thread and delay interactions. INP measures responsiveness; Core Web Vitals contribute to Google's ranking systems without guaranteeing a position.

Unhead's [`useScript()`{lang="ts"}](https://unhead.unjs.io/docs/head/api/composables/use-script) manages script loading. Async loading does not prevent a script from consuming main-thread time when it executes. Configure analytics initialization and pageviews separately, and measure the result.

## Common Mistakes

**Forgetting absolute URLs for images**: Use public absolute URLs for social preview images. See [Social Sharing](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing) for details.

**Setting the same description everywhere**

Write descriptions that distinguish pages. A repeated greeting does not explain what the reader will find. Check query and page data before attributing a click-through change to the wording.

**Ignoring the preview**

Test your meta tags with the tools listed in each guide below.

[Start with Page Titles →](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)

Using Nuxt instead of plain Vue? [Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) integrates Unhead. You still supply page titles, descriptions, and sharing data. See the [Nuxt meta tags guide](https://nuxtseo.com/learn-seo/nuxt/mastering-meta) for the framework-specific setup.

## Sitemap

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