Vue Routing and SEO · 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)
2.
3. [Routes & Rendering](https://nuxtseo.com/learn-seo/vue/routes-and-rendering)

# Vue Routing and SEO

URL structure and rendering mode determine whether search engines can crawl, index, and rank your Vue application.

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

What you'll learn

- Use path segments over query parameters: `/products/shoes` beats `/products?item=shoes`
- SSR/SSG delivers HTML immediately; SPA requires JavaScript execution first
- Inconsistent trailing slashes create duplicate content. pick one and redirect the other

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](#section-overview)

| Topic | What You'll Learn |
| --- | --- |
| [URL Structure](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/url-structure) | Slugs, hyphens vs underscores, URL length, keyword placement |
| [Pagination](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/pagination) | Self-referencing canonicals, infinite scroll vs pagination, crawlable links |
| [Trailing Slashes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/trailing-slashes) | Consistent URL formats, redirect configuration |
| [Query Parameters](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/query-parameters) | Filters, tracking params, canonical handling |
| [Hreflang & i18n](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/i18n) | Multilingual sites, x-default, return links |
| [404 Pages](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/404-pages) | Soft 404s, proper status codes, crawl budget |
| [Dynamic Routes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/dynamic-routes) | Route params, per-route meta tags, SSR patterns |
| [Rendering Modes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering) | Hybrid, SSR, SSG & Edge - mixing strategies per route |
| [Internal Linking](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/internal-linking) | Hub and spoke architecture, PageRank flow, orphan pages |
| [Programmatic SEO](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/programmatic-seo) | Feature pages, comparison pages, alternatives at scale |

## [Rendering Mode Quick Reference](#rendering-mode-quick-reference)

| Mode | Crawler Sees HTML | Best For |
| --- | --- | --- |
| **Hybrid** | Immediately (Mixed) | **The Standard.** Optimization per route |
| **SSR** | Immediately | Dynamic content, personalization |
| **SSG** | Immediately | Blogs, docs, marketing pages |
| **SPA** | After JavaScript | Admin panels, authenticated apps |

Modern apps use **Hybrid Rendering** (via Route Rules) to mix these strategies. SPAs still require [prerendering](https://nuxtseo.com/learn-seo/vue/spa/prerendering) or SSR for SEO. Google's JavaScript rendering has a [second wave of indexing](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) that delays content discovery.

## [URL Structure Quick Reference](#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](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/url-structure) for implementation details.

## [Crawl Budget](#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:**

| Problem | Solution |
| --- | --- |
| Inconsistent trailing slashes | [Configure redirects](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/trailing-slashes) |
| Pagination without canonicals | [Self-referencing canonicals](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/pagination) |
| Infinite filter combinations | [Noindex or block in robots.txt](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/query-parameters) |
| Soft 404s returning 200 | [Proper status codes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/404-pages) |
| Orphan pages with no links | [Build internal linking structure](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/internal-linking) |

Sites under 10,000 pages rarely need to worry about crawl budget. Large sites should monitor [Google Search Console](https://search.google.com/search-console) crawl stats.

## [Dynamic Routes in Vue Router](#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](https://unhead.unjs.io/):

```
<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](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/dynamic-routes) for SSR patterns, optional params, and common SEO issues.

## [Multilingual Sites](#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](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/i18n) for vue-i18n integration, bidirectional links, and common mistakes.

## [Using Nuxt?](#using-nuxt)

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

[Learn more in Nuxt →](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)

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

---

[Hydration & SEO How hydration failures cause Google to index broken versions of your site. Debug mismatches, fix common causes, optimize with partial hydration.](https://nuxtseo.com/learn-seo/vue/spa/hydration) [URL Structure Create search-optimized URLs using Vue Router. Learn slug formatting, parameter handling, and route patterns that improve rankings.](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/url-structure)

On this page

- [Section Overview](#section-overview)
- [Rendering Mode Quick Reference](#rendering-mode-quick-reference)
- [URL Structure Quick Reference](#url-structure-quick-reference)
- [Crawl Budget](#crawl-budget)
- [Dynamic Routes in Vue Router](#dynamic-routes-in-vue-router)
- [Multilingual Sites](#multilingual-sites)
- [Using Nuxt?](#using-nuxt)

[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 Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](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)