Vue SEO Meta Tags Guide

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 in your main.ts. This guide covers SSR-compatible patterns using Unhead.

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

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

Search Engine Tags

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

• Page Titles: Describe the page clearly. Google may truncate or generate a different title link.
• Meta Descriptions: Summarize each page. Google may use the description or relevant page content for a query.
• Image 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: 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: 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 for side-by-side syntax and migration steps.

Quick Setup

First install the head plugin. Then add these app-component defaults inside <script setup lang="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() 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 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 →

Using Nuxt instead of plain Vue? Nuxt SEO integrates Unhead. You still supply page titles, descriptions, and sharing data. See the Nuxt meta tags guide for the framework-specific setup.