--- title: "Vue SEO Meta Tags Guide" description: "Set titles, descriptions, Open Graph, and Schema.org in Vue 3 with @unhead/vue, since Vue needs manual setup Nuxt gives you for free." canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta" last_updated: "2026-07-16" --- - 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, and [LinkedIn](https://linkedin.com) all use Open Graph tags, so you only need to set `twitterCard` separately A client-rendered Vue SPA ships an empty `` in its initial HTML response; meta tags only exist once JavaScript runs, and AI crawlers like GPTBot never run it. 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 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 ~63% )
< 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 ones it keeps as-is. - [**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? It 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. A blocked main thread delays Interaction to Next Paint (INP), a Core Web Vital Google's ranking systems use as a tiebreaker between similarly relevant pages. Use Unhead's [`useScript()`](https://unhead.unjs.io/docs/head/api/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 instead of plain Vue? [Nuxt SEO](/docs/nuxt-seo/getting-started/introduction) handles meta tags automatically. See the [Nuxt meta tags guide](/learn-seo/nuxt/mastering-meta) for the framework-specific setup.