Vue SEO 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)

# Vue SEO Guide

The complete 2026 guide to Vue.js SEO. Master AI-first optimization, Core Web Vitals, Vapor Mode performance, and meta tags with Unhead.

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

What you'll learn

- **AI-First SEO**: Optimization is now about feeding LLMs and AI Overviews, not just ranking links.
- **Performance is Mandatory**: INP < 200ms and LCP < 2.5s are requirements for indexing eligibility in competitive niches.
- **Vue 3.5+ Power**: Vapor Mode and Unhead provide a "batteries-included" SEO foundation that rivals static sites.

In 2026, Vue SEO has shifted from "making Google render JavaScript" to "structuring content for the AI era." While Google can render your Vue SPA, the goal post has moved.

To succeed today, your Vue application must be performant (Core Web Vitals), semantic (Schema.org), and governed (AI bot control). This guide covers the end-to-end strategy for modern Vue SEO.

## [2026 Strategy: The 3 Pillars](#_2026-strategy-the-3-pillars)

To rank in the era of AI Overviews and Chat Search, you need to master three pillars:

### [1. Technical Foundation](#_1-technical-foundation)

Speed is a gatekeeper, full stop.

- **Interaction to Next Paint (INP)** must be under 200ms. Vue 3.5's **Vapor Mode** is your best tool here, bypassing the Virtual DOM to reduce hydration cost.
- **Hybrid Rendering**: Combining SSG for marketing pages and CSR for dashboards is the standard pattern.

### [2. Semantic Clarity](#_2-semantic-clarity)

AI models don't "read" pages; they ingest entities.

- **Structured Data**: Your JSON-LD graph must connect your content to known entities (Brand, Product, Article).
- **HTML Semantics**: Proper `<article>`, `<aside>`, and heading hierarchies help LLMs parse relevance.

### [3. AI Governance](#_3-ai-governance)

You decide who trains on your data.

- **Robots.txt 2.0**: Explicitly allow/disallow `GPTBot`, `CCBot`, and other AI scrapers based on your data strategy.
- **Context Windows**: Optimize content density to fit within the context windows of search generated answers.

---

## [Start Here](#start-here)

**New to Vue SEO?** Start with [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta). It covers the fundamentals: titles, descriptions, and the crucial Schema Graph using Unhead.

**Need a quick audit?** Use the [SEO Checklist](https://nuxtseo.com/learn-seo/checklist). Updated for 2026 with checks for INP, AI bot blocking, and Schema validation.

## [Content Sections](#content-sections)

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

Control how your application appears in Search (SERPs) and AI Overviews.

| Guide | What You'll Learn |
| --- | --- |
| [Titles](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles) | Brand patterns & title templates |
| [Descriptions](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions) | Optimizing for CTR in a zero-click world |
| [Social Sharing](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing) | OG Image generation & Twitter Cards |
| [Schema.org](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org) | **Critical**: Building the Knowledge Graph |
| [Rich Results](https://nuxtseo.com/learn-seo/vue/mastering-meta/rich-results) | Merchant listings & Article snippets |

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

Manage how Search Engines and LLMs discover and ingest your content.

| Guide | What You'll Learn |
| --- | --- |
| [robots.txt](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/robots-txt) | Managing `User-agent: GPTBot` & standard crawlers |
| [Sitemaps](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/sitemaps) | XML sitemaps for dynamic content |
| [Meta Tags](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/meta-tags) | `noindex` strategies for thin content |
| [Canonical URLs](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/canonical-urls) | Preventing duplicate content issues |

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

Single Page Applications (SPAs) are viable in 2026, but require specific care for visibility.

| Guide | What You'll Learn |
| --- | --- |
| [Prerendering](https://nuxtseo.com/learn-seo/vue/spa/prerendering) | Generating static HTML at build time |
| [Dynamic Rendering](https://nuxtseo.com/learn-seo/vue/spa/dynamic-rendering) | (Legacy) When to still use it |
| [Hydration](https://nuxtseo.com/learn-seo/vue/spa/hydration) | Fixing hydration mismatches for INP scores |

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

Server-Side Rendering is the gold standard for public-facing Vue apps.

| Guide | What You'll Learn |
| --- | --- |
| [Nuxt](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/nuxt-vs-quasar) | The default choice for SEO-first Vue |
| [Vite SSR](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vite-ssr) | Custom implementations |
| [VitePress](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vitepress) | Perfect for documentation & blogs |

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

Architecture decisions that impact your crawl budget and ranking potential.

| Guide | What You'll Learn |
| --- | --- |
| [URL Structure](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/url-structure) | Clean, semantic URL patterns |
| [Pagination](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/pagination) | Handling deep paginated content |
| [i18n](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/i18n) | `hreflang` implementation for global reach |
| [Rendering Modes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering) | ISR vs SSR vs SSG trade-offs |

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

Deploy, verify, and monitor your search performance.

| Guide | What You'll Learn |
| --- | --- |
| [Core Web Vitals](https://nuxtseo.com/learn-seo/vue/launch-and-listen/core-web-vitals) | **New**: Mastering INP & LCP |
| [Search Console](https://nuxtseo.com/learn-seo/vue/launch-and-listen/search-console) | Monitoring indexing & clicks |
| [Indexing Issues](https://nuxtseo.com/learn-seo/vue/launch-and-listen/indexing-issues) | Debugging "Crawled - currently not indexed" |

## [Why Vue for SEO?](#why-vue-for-seo)

Historically, SPAs were considered "bad for SEO." In 2026, this is a myth. Vue.js is an excellent choice for SEO-heavy applications when configured correctly.

1. **Performance**: Vue 3.5+ with Vapor Mode offers low overhead, helping you hit Green Core Web Vitals scores easier than heavier frameworks.
2. **Tooling**: [Unhead](https://unhead.unjs.io/) is the standard-bearer for head management. It's framework-agnostic, typesafe, and handles side-effects automatically.
3. **Ecosystem**: Nuxt 4/5 provides "SEO by default" with built-in best practices for module preloading, image optimization, and meta tag management.

### [Modern Vue SEO Setup](#modern-vue-seo-setup)

Here is what a modern, SEO-ready Vue component looks like using Composition API:

```
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

// Define meta tags flatly - no complex objects
useSeoMeta({
  title: 'Vue SEO Guide 2026',
  description: 'Master Vue.js SEO with our comprehensive guide covering AI, Core Web Vitals, and Nuxt.',
  // Open Graph
  ogTitle: 'Vue SEO Guide 2026',
  ogDescription: 'Master Vue.js SEO with our comprehensive guide.',
  ogImage: 'https://nuxtseo.com/og/vue-seo.png',
  // Twitter
  twitterCard: 'summary_large_image',
})
</script>
```

## [Common Mistakes to Avoid](#common-mistakes-to-avoid)

- **Blocking CSS/JS in robots.txt**: Google needs to render your page. Don't block your assets.
- **Ignoring Layout Shifts (CLS)**: Dynamic content loading without placeholders causes shifts. Use `<Suspense>` or skeleton loaders.
- **Lazy Loading LCP Images**: The main image above the fold should use `fetchpriority="high"` and never be lazy-loaded.
- **Forgetting Canonical URLs**: Every page needs a self-referencing canonical tag to prevent duplicate content issues from query parameters.

## [External Resources](#external-resources)

- [Google Search Central: JavaScript SEO](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)
- [Unhead Documentation](https://unhead.unjs.io/)
- [Core Web Vitals: INP](https://web.dev/articles/inp)
- [Vue.js Vapor Mode](https://github.com/vuejs/core-vapor)

[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)

---

  [Mastering Meta Set up meta tags in Vue 3 with Unhead. Covers titles, descriptions, Open Graph, Twitter Cards, and Schema.org with SSR patterns.](https://nuxtseo.com/learn-seo/vue/mastering-meta)

On this page

- [2026 Strategy: The 3 Pillars](#_2026-strategy-the-3-pillars)
- [Start Here](#start-here)
- [Content Sections](#content-sections)
- [Why Vue for SEO?](#why-vue-for-seo)
- [Common Mistakes to Avoid](#common-mistakes-to-avoid)
- [External Resources](#external-resources)

[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)