Vue Routing and SEO

Search engines read URLs before content. /products/shoes ranks better than /products?category=shoes. /about and /about/ are different pages unless you configure otherwise.

Rendering mode determines whether crawlers see your content immediately (SSR/SSG) or must execute JavaScript first (SPA). Google can render JavaScript, but it's slower and less reliable than serving HTML directly.

Section Overview

Rendering Mode Quick Reference

SPAs require prerendering or SSR for SEO. Google's JavaScript rendering has a second wave of indexing that delays content discovery.

URL Structure Quick Reference

Path segments over query parameters:

✅ /products/electronics/laptop
❌ /products?category=electronics&item=laptop

Hyphens over underscores:

✅ /vue-router-guide
❌ /vue_router_guide

Lowercase, short URLs:

✅ /blog/vue-seo
❌ /Blog/The-Complete-Guide-To-Vue-SEO-Optimization-2025

Read URL Structure for implementation details.

Crawl Budget

Google allocates limited time to crawl your site. Poor URL structure wastes budget on duplicate or low-value pages.

Common crawl budget problems:

Sites under 10,000 pages rarely need to worry about crawl budget. Large sites should monitor Google Search Console crawl stats.

Dynamic Routes in Vue Router

Vue Router's dynamic segments create clean URLs:

const routes = [
  { path: '/blog/:slug', component: BlogPost },
  { path: '/products/:category/:id', component: Product }
]

Generates /blog/vue-seo-guide and /products/electronics/123.

Each dynamic route needs unique meta tags. Set them with Unhead:

<script setup lang="ts">
const route = useRoute()
const post = await fetchPost(route.params.slug)

useSeoMeta({
  title: post.title,
  description: post.excerpt
})
</script>

Read Dynamic Routes for SSR patterns, optional params, and common SEO issues.

Multilingual Sites

Use hreflang tags to tell search engines which language version to show users:

useHead({
  link: [
    { rel: 'alternate', hreflang: 'en', href: 'https://example.com/en' },
    { rel: 'alternate', hreflang: 'fr', href: 'https://example.com/fr' },
    { rel: 'alternate', hreflang: 'x-default', href: 'https://example.com/en' }
  ]
})

Read Hreflang & i18n for vue-i18n integration, bidirectional links, and common mistakes.

Using Nuxt?

Nuxt handles most of this automatically—file-based routing, SSR by default, automatic canonical URLs. The Nuxt SEO module adds sitemaps, OG images, and structured data.

Learn more in Nuxt →