Vue SEO Meta Tags Guide · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[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

[SEO Checklist](https://nuxtseo.com/learn-seo/checklist) [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

[Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)

- [Titles](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions)
- [Social Sharing](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)
- [Schema.org](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org)
- [Migrating vue-meta](https://nuxtseo.com/learn-seo/vue/mastering-meta/migrating-vue-meta)
- [Rich Results](https://nuxtseo.com/learn-seo/vue/mastering-meta/rich-results)
- [Image Alt Text](https://nuxtseo.com/learn-seo/vue/mastering-meta/alt-text)

[ Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)

- [Robots.txt](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/robots-txt)
- [Sitemaps](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/sitemaps)
- [Robot Meta Tag](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/meta-tags)
- [Canonical Link Tag](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/canonical-urls)
- [HTTP Redirects](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/redirects)
- [Duplicate Content](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/duplicate-content)
- [llms.txt](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/llms-txt)

[ SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)

- [Prerendering](https://nuxtseo.com/learn-seo/vue/spa/prerendering)
- [Dynamic Rendering](https://nuxtseo.com/learn-seo/vue/spa/dynamic-rendering)
- [Hydration & SEO](https://nuxtseo.com/learn-seo/vue/spa/hydration)

[ Routes & Rendering](https://nuxtseo.com/learn-seo/vue/routes-and-rendering)

- [URL Structure](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/url-structure)
- [Pagination](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/pagination)
- [Trailing Slashes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/trailing-slashes)
- [Query Parameters](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/query-parameters)
- [Hreflang & i18n](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/i18n)
- [404 Pages](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/404-pages)
- [Dynamic Routes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/dynamic-routes)
- [Internal Linking](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/internal-linking)
- [Rendering Modes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering)
- [Programmatic SEO](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/programmatic-seo)
- [Security](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/security)

[ SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)

- [Nuxt vs Quasar](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/nuxt-vs-quasar)
- [Custom Vite SSR](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vite-ssr)
- [VitePress SEO](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vitepress)

[ Launch & Listen](https://nuxtseo.com/learn-seo/vue/launch-and-listen)

- [Getting Indexed](https://nuxtseo.com/learn-seo/vue/launch-and-listen/going-live)
- [Google Search Console](https://nuxtseo.com/learn-seo/vue/launch-and-listen/search-console)
- [Core Web Vitals](https://nuxtseo.com/learn-seo/vue/launch-and-listen/core-web-vitals)
- [Indexing Issues](https://nuxtseo.com/learn-seo/vue/launch-and-listen/indexing-issues)
- [SEO Monitoring](https://nuxtseo.com/learn-seo/vue/launch-and-listen/seo-monitoring)
- [Site Migration](https://nuxtseo.com/learn-seo/vue/launch-and-listen/site-migration)
- [IndexNow](https://nuxtseo.com/learn-seo/vue/launch-and-listen/indexnow)
- [Debugging](https://nuxtseo.com/learn-seo/vue/launch-and-listen/debugging)
- [AI Search Optimization](https://nuxtseo.com/learn-seo/vue/launch-and-listen/ai-optimized-content)

1. [Learn SEO for Vue](https://nuxtseo.com/learn-seo)
2.
3. [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)

# Vue SEO Meta Tags Guide

Set up meta tags in Vue 3 with Unhead. Covers titles, descriptions, Open Graph, Twitter Cards, and Schema.org with SSR patterns.

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

What you'll learn

- Install `@unhead/vue` manually in Vue (Nuxt includes it automatically)
- Use `useSeoMeta()` from @unhead/vue for type-safe meta tag management
- Meta tags must render server-side; client only SPAs show empty `<head>` to crawlers
- Twitter, Slack, [LinkedIn](https://linkedin.com) all use Open Graph tags. only set `twitterCard` separately

Vue SPAs are invisible to search engines by default. Meta tags only work when rendered server-side; client only apps show empty `<head>` tags to crawlers. Unlike Nuxt, which integrates Unhead automatically, Vue requires you to [install and configure @unhead/vue manually](https://unhead.unjs.io/guide/getting-started/installation) in your `main.ts`. This guide covers SSR-compatible patterns using [Unhead](https://unhead.unjs.io/).

```
<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()` or `useHead()` from @unhead/vue:

```
useSeoMeta({
  title: 'My Page',
  description: 'What this page is about',
  ogImage: 'https://mysite.com/og.png'
})
```

## [What Meta Tags Control](#what-meta-tags-control)

| Meta Tag | Used By | Purpose |
| --- | --- | --- |
| [`<title>`](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles) | Search engines, browsers | Page title in search results and browser tab |
| [`<meta name="description">`](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions) | Search engines | Snippet text in search results (Google rewrites ~70%) |
| [`<meta property="og:*">`](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing) | Facebook, LinkedIn, Discord, Slack | Link preview cards |
| [`<meta name="twitter:*">`](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing) | Twitter/X | Tweet cards (falls back to OG tags) |
| [`<script type="application/ld+json">`](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org) | Search engines | Rich results (stars, recipes, products) |

### [Search Engine Tags](#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) - Your main call-to-action in search results. Keep under 60 characters.
- [**Meta Descriptions**](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions) - The snippet below your title. Google rewrites most of them, but write them anyway for the 30% that stick.
- [**Image Alt Text**](https://nuxtseo.com/learn-seo/vue/mastering-meta/alt-text) - Alt text for accessibility, Google Images ranking, and AI understanding. The #1 accessibility failure on the web.

### [Social Sharing Tags](#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 `og:title`, `og:description`, `og:image`, and `twitterCard`.

### [Structured Data](#structured-data)

- [**Schema.org**](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org) - JSON-LD markup for rich results. Overkill for most sites, but useful for recipes, products, events.

### [Migrating from vue-meta?](#migrating-from-vue-meta)

vue-meta was the Vue 2 standard but never shipped Vue 3 support. 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](#quick-setup)

Most sites need this:

```
// app.vue or main component
useHead({
  title: 'My Site',
  titleTemplate: '%s · 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](#priority-order)

When tags conflict, here's what wins:

1. **Component-level** `useSeoMeta()` in your component
2. **Parent component** `useSeoMeta()` in your parent
3. **App-level** setup in main.ts or app.vue

Unhead merges these automatically. Child component tags override parent tags.

## [Performance & Scripts](#performance-scripts)

Meta tags are fast, but third-party scripts (Analytics, Ads) hurt performance. In 2026, **Interaction to Next Paint (INP)** is a critical metric.

Use Unhead's [`useScript()`](https://unhead.unjs.io/usage/composables/use-script) to load third-party scripts without blocking the main thread:

```
import { useScript } from '@unhead/vue'

// Loads Google Analytics lazily, improving initial load
useScript({
  src: 'https://www.googletagmanager.com/gtag/js?id=G-cwv',
  async: true,
  defer: true,
})
```

## [Common Mistakes](#common-mistakes)

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

**Setting the same description everywhere**

Each page needs a unique description. Template descriptions like "Welcome to {page}" are lazy and hurt click-through rates.

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

[Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) handles meta tags automatically. [See the Nuxt guide →](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)

[The 2026 SEO Checklist for Nuxt & Vue Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)

---

[Vue SEO The complete 2026 guide to Vue.js SEO. Master AI-first optimization, Core Web Vitals, Vapor Mode performance, and meta tags with Unhead.](https://nuxtseo.com/learn-seo/vue) [Titles Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly.](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)

On this page

- [What Meta Tags Control](#what-meta-tags-control)
- [Quick Setup](#quick-setup)
- [Priority Order](#priority-order)
- [Performance & Scripts](#performance-scripts)
- [Common Mistakes](#common-mistakes)
- [Using Nuxt?](#using-nuxt)

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

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Home")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings)

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