RankpediaA plain-English encyclopedia of search

Vue JS SEO

Makes Vue-powered pages crawlable, indexable, and fast enough for search engines to understand their content and metadata reliably.

If you have ever assumed client-side rendering alone is enough for Google to index your Vue app, you already know the gap between visible and indexed content.

Key points

  • Use Vue Router history mode so URLs look like /about-us not /#/about-us.
  • Manage titles and meta tags per route with vue-meta or Nuxt’s built-in head tools.
  • Ensure critical content appears in the initial HTML or server-rendered response.
  • Add JSON-LD structured data to help search engines qualify pages for rich results.
  • Test for JavaScript errors because rendering failures can block entire pages from indexing.

A product page that never appeared in search

A Vue-based e-commerce site used hash routing for all product pages. Google crawled the homepage but never indexed individual products because the URLs were /#/product/123. After switching to history mode and adding server-side rendering for the top 50 products, those pages appeared in search results within two weeks. The rest used prerendering and still indexed, but took longer. The team also fixed ajax seo issues where content loaded dynamically was missing titles, and applied standard react seo techniques adapted for Vue, along with javascript seo practices, to improve metadata.

Three ways it goes wrong

  • Hash-based routing Search engines treat hash fragments as anchors, not unique URLs. Pages at /#/about are often ignored or merged with the root, losing indexable routes.
  • Static metadata everywhere Leaving titles, descriptions, and canonical tags identical for every route tells search engines the pages are duplicates. Each route needs its own head content.
  • Client-only rendering Content inserted only after JavaScript executes can be missed or delayed by crawlers. Google can index some client-rendered pages, but reliability drops for non-Google bots.

Three checks before launch

  • URL structure Verify Vue Router uses history mode and every meaningful route has a clean, unique URL. No hash fragments for pages that should rank.
  • Metadata per route Confirm each page generates its own title, meta description, canonical tag, and Open Graph tags. Use vue-meta or Nuxt’s head() to automate this.
  • Initial HTML content Check that critical text and links appear in the server-rendered or prerendered HTML. Content added only after client-side interactions may not be indexed.

Common questions

Is SSR mandatory for Vue SEO?

No, but it is safer. Google can index client-rendered pages, but SSR or prerendering improves reliability and speed for important content.

Does hash-based routing hurt indexing?

Yes. Search engines treat hash fragments as anchors, not separate URLs, so pages at /#/about may not be indexed as unique routes.

What is the easiest way to add SSR to Vue?

Use Nuxt.js, which provides built-in server-side rendering and SEO tools, or prerender static pages with a tool like prerender-spa-plugin.

Sources

  1. Google Search Central: JavaScript SEO basics Covers how Google processes JavaScript and rendering
  2. Vue.js Documentation Official Vue guide on routing and SSR options
  3. Nuxt Documentation Nuxt’s SSR and SEO features for Vue apps
↑