Vue SEO Guide
Vue SPAs don't work with search engines by default. The <head> renders empty, crawlers see a blank page, and your content never gets indexed.
This guide covers everything you need for Vue SEO—from basic meta tags to SSR framework selection to production monitoring. All examples use Unhead, the Vue 3 head manager that replaced vue-meta.
Start Here
New to Vue SEO? Start with Mastering Meta. It covers the fundamentals: titles, descriptions, and social sharing tags with working code examples.
Need a quick audit? Use the Vue SEO Checklist—a pre-launch, post-launch, and ongoing monitoring checklist with links to detailed guides for every item.
Already know the basics? Jump to the section that matches your current problem.
Content Sections
Mastering Meta
Meta tags control how your pages appear in search results and social shares. Learn to set titles, descriptions, Open Graph tags, Twitter Cards, and structured data with Unhead.
| Guide | What You'll Learn |
|---|---|
| Titles | Page titles, title templates, character limits |
| Descriptions | Meta descriptions, CTR optimization |
| Social Sharing | Open Graph, Twitter Cards, preview images |
| Schema.org | Structured data, JSON-LD, eligibility |
| Rich Results | Testing tools, what still works after 2023 changes |
| Migrating from vue-meta | Side-by-side syntax, breaking changes |
Controlling Crawlers
Manage how search engines discover and index your pages. Configure robots.txt, sitemaps, canonical URLs, and handle redirects properly.
| Guide | What You'll Learn |
|---|---|
| robots.txt | Allow/block crawlers, AI bot blocking |
| Sitemaps | XML sitemap generation, submission |
| Meta Tags | noindex, nofollow, per-page control |
| Canonical URLs | Duplicate content, parameter handling |
| Redirects | 301 vs 302, redirect chains |
| Duplicate Content | Detection, causes, fixes |
SPA SEO
Single page applications have unique SEO challenges. Google can render JavaScript, but other crawlers can't. Learn when SSR is required and what alternatives exist.
| Guide | What You'll Learn |
|---|---|
| Prerendering | Build-time HTML generation, vite-ssg |
| Dynamic Rendering | Serve different content to bots (deprecated but functional) |
| Hydration | Mismatch debugging, SEO implications |
SSR Frameworks
Compare Vue server-side rendering options. Each framework has different strengths for SEO, performance, and developer experience.
| Guide | What You'll Learn |
|---|---|
| Nuxt vs Quasar | Feature comparison, when to use each |
| Vite SSR | Custom SSR setup, manual control |
| VitePress | Static sites, documentation, blogs |
Routes & Rendering
URL structure affects rankings. Rendering mode affects indexing. This section covers both.
| Guide | What You'll Learn |
|---|---|
| URL Structure | Slugs, hyphens, length, keywords |
| Pagination | Self-referencing canonicals, infinite scroll |
| Trailing Slashes | Consistency, redirect configuration |
| Query Parameters | Filter params, tracking params, canonicals |
| i18n | Hreflang, x-default, bidirectional links |
| 404 Pages | Soft 404s, proper status codes |
| Dynamic Routes | Route params, per-route meta tags |
| Rendering Modes | SSR vs SSG vs SPA comparison |
Launch & Listen
Deploy your site and monitor its search performance. Set up tracking, debug indexing issues, and handle site migrations.
| Guide | What You'll Learn |
|---|---|
| Going Live | First deployment, SSR verification |
| Search Console | Verification, reports, URL inspection |
| Core Web Vitals | LCP, INP, CLS optimization for Vue |
| Indexing Issues | "Crawled not indexed" fixes |
| SEO Monitoring | Analytics, rank tracking, alerts |
| Site Migration | Domain moves, redirects, recovery |
| IndexNow | Instant indexing for Bing/Yandex |
| Debugging | Common Vue SEO issues, hydration errors |
Quick Reference: SEO Checklist
The Vue SEO Checklist provides a structured audit path:
- Pre-launch — SSR configured, meta tags set, URLs structured, crawlers controlled
- Post-launch — Search Console verified, indexing confirmed, performance passing
- Ongoing — Weekly GSC reviews, monthly monitoring, quarterly audits
Vue vs Nuxt
This guide covers plain Vue applications using Vue Router and Unhead. If you're using Nuxt, much of this is handled automatically.
Nuxt provides:
- SSR by default
- File-based routing with automatic meta tag handling
- Nuxt SEO module for sitemaps, robots.txt, OG images
- Built-in canonical URLs and sitemap generation
Why Vue SPAs Fail SEO
Vue SPAs render content client-side. The initial HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<!-- Empty - no meta tags -->
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
Search engines need meta tags and content in the initial HTML. Google can execute JavaScript to render your page, but:
- Rendering is queued separately from crawling
- Other crawlers (Bing, social platforms) don't render JavaScript
- Social preview cards (Twitter, Facebook, Slack) read initial HTML only
- Performance suffers—users wait for JavaScript before seeing content
Solutions:
- SSR frameworks render HTML on the server
- Prerendering generates HTML at build time
- Dynamic rendering serves pre-rendered HTML to bots (deprecated but functional)
Common Mistakes
Using vue-meta in Vue 3 — vue-meta never shipped Vue 3 support. Use Unhead instead. Migration guide.
Skipping SSR verification — View Page Source on your deployed site. If meta tags are missing, crawlers see nothing.
Relative OG image URLs — Social platforms need absolute URLs (https://site.com/og.png), not relative paths (/og.png).
Template meta descriptions — "Welcome to {page}" descriptions hurt click-through rates. Write unique descriptions per page.
Ignoring Search Console — GSC shows exactly what Google sees. Check the Page Indexing report for excluded pages.