--- title: "Vue SEO Meta Tags Guide" description: "Set up meta tags in Vue 3 with Unhead. Covers titles, descriptions, Open Graph, Twitter Cards, and Schema.org with SSR patterns." canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta" last_updated: "2026-01-29" --- - 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 `` 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 `` 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/). ```html My Page · My Site ``` In Vue, you manage these with `useSeoMeta()` or `useHead()` from @unhead/vue: ```ts 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 > Search engines, browsers Page title in search results and browser tab
< meta name = " description " > Search engines Snippet text in search results (Google rewrites ~70%)
< meta property = " og:* " > Facebook, LinkedIn, Discord, Slack Link preview cards
< meta name = " twitter:* " > Twitter/X Tweet cards (falls back to OG tags)
< script type = " application/ld+json " > Search engines Rich results (stars, recipes, products)
### Search Engine Tags These affect how your pages appear in Google, Bing, and other search results. - [**Page Titles**](/learn-seo/vue/mastering-meta/titles) - Your main call-to-action in search results. Keep under 60 characters. - [**Meta Descriptions**](/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**](/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 These control link previews when someone shares your URL. - [**Social Sharing**](/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 - [**Schema.org**](/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? vue-meta was the Vue 2 standard but never shipped Vue 3 support. See [Migrating from vue-meta](/learn-seo/vue/mastering-meta/migrating-vue-meta) for side-by-side syntax and migration steps. ## Quick Setup Most sites need this: ```ts // 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 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 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: ```ts 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 **Forgetting absolute URLs for images**: OG images require absolute URLs. See [Social Sharing](/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 →](/learn-seo/vue/mastering-meta/titles) ## Using Nuxt? [Nuxt SEO](/docs/nuxt-seo/getting-started/introduction) handles meta tags automatically. [See the Nuxt guide →](/learn-seo/nuxt/mastering-meta)