Vue Js SEO

Vue.js SEO is the practice of making Vue-powered pages crawlable, indexable, and fast enough for search engines to understand their content and metadata reliably.

Beginner3 min readUpdated 2026-07-26Reviewed by Lucía Marín

Key takeaways

Vue SEO is about rendering, URLs, metadata, and performance — not just content.
History mode in Vue Router is the minimum fix for crawlable URLs.
SSR or prerendering ensures bots see your content without executing JavaScript.
Dynamic meta tags per route are essential for search snippets.
Performance optimization directly impacts indexing and ranking.

Here’s how to approach it step by step.

Example: Fixing a Vue blog that wasn't indexed

Problem: A Vue blog with hash-based routing (/#/blog/post-1) and client-side rendering. Google indexed only the homepage.
Step 1: Switch Vue Router to history mode (createWebHistory()). URLs become /blog/post-1.
Step 2: Add vue-meta to set unique <title> and <meta name="description"> per route.
Step 3: Pre-render the blog pages using Nuxt generate or prerender-spa-plugin.
Step 4: Submit the new sitemap.xml to Google Search Console.
Result: Within weeks, all blog posts appeared in search results.

Quick Start: Make a Vue site SEO-ready

Enable history mode in Vue Router: const router = createRouter({ history: createWebHistory(), routes }).
Install vue-meta and set dynamic titles/descriptions per route.
Choose a rendering strategy: SSR (Nuxt), prerendering (static generation), or hybrid.
Optimize performance: lazy-load routes, code-split, compress images.
Add structured data (JSON-LD) for key page types (articles, products, etc.).
Generate and submit a sitemap.xml and robots.txt.

How to judge if your Vue SEO is working

Crawlability: Use the URL Inspection tool in Google Search Console. Does Google see the rendered HTML with your content?
Indexability: Check if your pages appear in search results for relevant queries.
Meta tags: Use a browser extension or curl to verify unique titles and descriptions per page.
Performance: Core Web Vitals pass? Use Lighthouse or PageSpeed Insights.
Structured data: Test with Google’s Rich Results Test.

Common mistakes

Hash routing: URLs like /#/about are not crawlable. Always use history mode.
Static meta tags: Every page shows the same title and description. Use vue-meta or Nuxt head.
Client-side only rendering: Content appears only after JavaScript executes. Bots may not wait. Use SSR or prerendering.
Ignoring performance: Large bundles, unoptimized images, and slow hydration hurt both UX and crawl budget.
No sitemap: Without a sitemap, crawlers may miss pages, especially in large SPAs.

Next step

Server Side Rendering SEOLearn how SSR works across frameworks and how to implement it for Vue with Nuxt.

FAQ

Is Vue.js bad for SEO?

No, but client-side rendered Vue apps can be harder for search engines to index. Using SSR, prerendering, or hybrid rendering solves this.

Do I need Nuxt for Vue SEO?

Not strictly, but Nuxt simplifies SSR, prerendering, and meta tag management. It's the most common approach for production Vue SEO.

Can I use Vue with a headless CMS for SEO?

Yes. A headless CMS + Nuxt (or Vue with SSR) works well. The CMS provides content, and the Vue app renders it server-side.

Sources

Google Search Central — Primary documentation for Google’s crawling, rendering, indexing, structured data, and JavaScript SEO guidance.
Google Search Central: JavaScript SEO basics — Best source for how Google handles client-side rendering, dynamic content, and rendering pitfalls.
Vue.js Documentation — Official framework reference for routing, rendering patterns, and app architecture.
Nuxt Documentation — Official Vue meta-framework docs for SSR, prerendering, and metadata management.
web.dev — Google-backed performance guidance for Core Web Vitals, rendering, and page experience.

Reviewed by Lucía Marín, Founding editor.