---
title: "Vue SEO Guide"
description: "Meta tags, crawler control, rendering strategy, and Core Web Vitals for Vue apps, with a dedicated guide for each piece and where to start."
canonical_url: "https://nuxtseo.com/learn-seo/vue"
last_updated: "2026-07-16"
---

<key-takeaways>

- Vue SEO now covers both classic search rankings and citations in AI answer engines like [ChatGPT](https://chatgpt.com) and [Perplexity](https://perplexity.ai), not just links in a results page.
- Good INP is under 200ms and good LCP is under 2.5s; Google treats Core Web Vitals as a page experience signal, a tiebreaker rather than a hard ranking requirement.
- Unhead handles head management across SSR, SPAs, and static builds; Vue's experimental Vapor Mode, stable-track for Vue 3.6, will cut hydration cost further once it ships.

</key-takeaways>

Vue SEO used to mean one thing: get Google to render your JavaScript. That's still true, but AI crawlers that never execute JS raise the bar further. Your app needs to be fast, semantic, and readable from the initial HTML response, not just the hydrated page.

This guide covers meta tags, crawler control, rendering strategy, and monitoring for Vue applications: framework-agnostic where the fix is framework-agnostic, Vue-specific where it isn't.

## Content Sections

**New to Vue SEO?** Start with [Mastering Meta](/learn-seo/vue/mastering-meta). It covers titles, descriptions, and the entity graph with Unhead.

**Need a quick audit?** Use the [SEO Checklist](/learn-seo/checklist) to check INP, AI bot access, and schema validation.

### [Mastering Meta](/learn-seo/vue/mastering-meta)

Control how your application appears in search results and AI Overviews.

<table>
<thead>
  <tr>
    <th>
      Guide
    </th>
    
    <th>
      What You'll Learn
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/learn-seo/vue/mastering-meta/titles">
        Titles
      </a>
    </td>
    
    <td>
      Brand patterns and title templates
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/mastering-meta/descriptions">
        Descriptions
      </a>
    </td>
    
    <td>
      Writing descriptions that earn the click
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/mastering-meta/social-sharing">
        Social Sharing
      </a>
    </td>
    
    <td>
      OG image generation and Twitter Cards
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/mastering-meta/schema-org">
        Schema.org
      </a>
    </td>
    
    <td>
      Structured data for entities and rich results
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/mastering-meta/rich-results">
        Rich Results
      </a>
    </td>
    
    <td>
      Merchant listings and article snippets
    </td>
  </tr>
</tbody>
</table>

### [Controlling Crawlers](/learn-seo/vue/controlling-crawlers)

Manage how search engines and LLMs discover and access your content.

<table>
<thead>
  <tr>
    <th>
      Guide
    </th>
    
    <th>
      What You'll Learn
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/learn-seo/vue/controlling-crawlers/robots-txt">
        robots.txt
      </a>
    </td>
    
    <td>
      Managing <code>
        User-agent: GPTBot
      </code>
      
       and standard crawlers
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/controlling-crawlers/sitemaps">
        Sitemaps
      </a>
    </td>
    
    <td>
      XML sitemaps for dynamic content
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/controlling-crawlers/meta-tags">
        Meta Tags
      </a>
    </td>
    
    <td>
      <code>
        noindex
      </code>
      
       strategies for thin content
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/controlling-crawlers/canonical-urls">
        Canonical URLs
      </a>
    </td>
    
    <td>
      Preventing duplicate content issues
    </td>
  </tr>
</tbody>
</table>

### [SPA SEO](/learn-seo/vue/spa)

Single page apps are viable for SEO, but need specific handling for crawlers and rendering.

<table>
<thead>
  <tr>
    <th>
      Guide
    </th>
    
    <th>
      What You'll Learn
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/learn-seo/vue/spa/prerendering">
        Prerendering
      </a>
    </td>
    
    <td>
      Generating static HTML at build time
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/spa/dynamic-rendering">
        Dynamic Rendering
      </a>
    </td>
    
    <td>
      Why it's a workaround, not a fix
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/spa/hydration">
        Hydration
      </a>
    </td>
    
    <td>
      Fixing hydration mismatches that hurt INP
    </td>
  </tr>
</tbody>
</table>

### [SSR Frameworks](/learn-seo/vue/ssr-frameworks)

Server-side rendering is the reliable default for public-facing Vue apps.

<table>
<thead>
  <tr>
    <th>
      Guide
    </th>
    
    <th>
      What You'll Learn
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/learn-seo/vue/ssr-frameworks/nuxt-vs-quasar">
        Nuxt
      </a>
    </td>
    
    <td>
      The default choice for SEO-first Vue
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/ssr-frameworks/vite-ssr">
        Vite SSR
      </a>
    </td>
    
    <td>
      Custom SSR implementations
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/ssr-frameworks/vitepress">
        VitePress
      </a>
    </td>
    
    <td>
      Built for documentation and blogs
    </td>
  </tr>
</tbody>
</table>

### [Routes & Rendering](/learn-seo/vue/routes-and-rendering)

Architecture decisions that affect your crawl budget and ranking potential.

<table>
<thead>
  <tr>
    <th>
      Guide
    </th>
    
    <th>
      What You'll Learn
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/learn-seo/vue/routes-and-rendering/url-structure">
        URL Structure
      </a>
    </td>
    
    <td>
      Clean, semantic URL patterns
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/routes-and-rendering/pagination">
        Pagination
      </a>
    </td>
    
    <td>
      Handling deep paginated content
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/routes-and-rendering/i18n">
        i18n
      </a>
    </td>
    
    <td>
      <code>
        hreflang
      </code>
      
       implementation for global reach
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/routes-and-rendering/rendering">
        Rendering Modes
      </a>
    </td>
    
    <td>
      ISR vs SSR vs SSG trade-offs
    </td>
  </tr>
</tbody>
</table>

### [Launch & Listen](/learn-seo/vue/launch-and-listen)

Deploy, verify, and monitor your search performance.

<table>
<thead>
  <tr>
    <th>
      Guide
    </th>
    
    <th>
      What You'll Learn
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="/learn-seo/vue/launch-and-listen/core-web-vitals">
        Core Web Vitals
      </a>
    </td>
    
    <td>
      Optimizing INP and LCP
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/launch-and-listen/search-console">
        Search Console
      </a>
    </td>
    
    <td>
      Monitoring indexing and clicks
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="/learn-seo/vue/launch-and-listen/indexing-issues">
        Indexing Issues
      </a>
    </td>
    
    <td>
      Debugging "Crawled - currently not indexed"
    </td>
  </tr>
</tbody>
</table>

## A Vue SEO Setup

Unhead is the standard head-management library for Vue: framework-agnostic, typesafe, and SSR-aware. A typical page sets its meta tags with `useSeoMeta()`:

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

useSeoMeta({
  title: 'Vue SEO Guide',
  description: 'Meta tags, crawler control, rendering strategy, and Core Web Vitals for Vue apps.',
  ogTitle: 'Vue SEO Guide',
  ogImage: 'https://nuxtseo.com/og/vue-seo.png',
  twitterCard: 'summary_large_image',
})
</script>
```

Nuxt builds on the same foundation and adds sitemap, robots, Schema.org, and OG image generation with zero config. See the [Nuxt SEO guide](/learn-seo/nuxt) if you're starting a new project.

## Common Mistakes to Avoid

- **Blocking CSS/JS in robots.txt**: Google renders your page with headless Chrome and needs those assets to do it.
- **Ignoring layout shift**: dynamic content loading without placeholders causes CLS. Use `<Suspense>` or skeleton loaders.
- **Lazy-loading the LCP image**: the main above-the-fold image should use `fetchpriority="high"` and never `loading="lazy"`.
- **Forgetting canonical URLs**: every page needs a self-referencing canonical tag to prevent duplicate content issues from query parameters.

## 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/)
- [web.dev: Interaction to Next Paint](https://web.dev/articles/inp)