SEO-Friendly URLs in Nuxt

URLs appear in search results before users click. /blog/vue-seo-guide tells users what to expect. /p?id=847 doesn't. Search engines use URLs to understand page hierarchy and relevance. Well-structured URLs improve click-through rates by up to 15%.

Nuxt's file-based routing generates SEO-friendly URLs automatically from your pages/ directory structure.

Quick Setup

File-based routing in pages/:

pages/
  blog/
    [slug].vue          → /blog/vue-seo-guide
  products/
    [category]/
      [slug].vue        → /products/phones/iphone-15

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

// Set canonical URL
useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/blog/${slug}`
  }]
})
</script>

URL Formatting Rules

Hyphens Over Underscores

Google treats hyphens as word separators. Underscores connect words into single terms.

✅ /performance-optimization    → "performance" + "optimization"
❌ /performance_optimization    → "performanceoptimization"

Nuxt file structure:

pages/
  learn-vue-router.vue     ✅ Good
  learn_vue_router.vue     ❌ Bad

Lowercase Only

URLs are case-sensitive. /About, /about, and /ABOUT are different pages. This creates duplicate content issues.

✅ /about
✅ /products/phones
❌ /About
❌ /products/Phones

Use kebabCase from scule to generate lowercase slugs automatically.

Keep URLs Short

URLs under 60 characters perform better in search results. Longer URLs get truncated with ellipsis.

Length comparison:

When longer URLs make sense:

✅ /docs/getting-started/installation-guide    (clear hierarchy)
✅ /blog/2025/fixing-vue-hydration-mismatch   (date + topic)
❌ /the-ultimate-comprehensive-complete-guide  (keyword stuffing)

Keywords Near the Start

Including keywords in URLs provides a lightweight ranking boost. Front-load important terms.

✅ /vue-router-seo-guide
✅ /seo/vue-best-practices
❌ /guides-and-tutorials-for-seo-in-vue-router

But don't sacrifice readability:

pages/
  vue-seo/
    [topic].vue          ✅ Natural keyword placement
  vue-seo-guide-vue-router-seo-tutorial.vue  ❌ Keyword stuffing

Avoid Dates (Usually)

Dates in URLs prevent content updates. /blog/2024/vue-guide becomes outdated when you refresh it in 2025.

❌ /blog/2024/vue-router-guide      (looks stale)
❌ /blog/2024/12/17/post-title      (prevents evergreen updates)
✅ /blog/vue-router-guide           (can be updated anytime)

Exception: Time-sensitive content like news, events, changelogs:

pages/
  changelog/
    [year]/
      [month]/
        [slug].vue       → /changelog/2025/12/new-feature
  events/
    2025/
      [slug].vue         → /events/2025/nuxt-conf
  blog/
    [slug].vue           → /blog/vue-router-guide (evergreen)

Removing dates allows republishing old posts with new content without changing URLs. a strong SEO strategy.

Path Segments vs Query Parameters

Search engines prefer path segments over query parameters. Path segments are indexed and ranked. Query parameters often cause duplicate content.

Comparison:

Problems with query parameters:

/products
/products?sort=price
/products?sort=date
/products?page=2
/products?sort=price&page=2

Five URLs, same content. Google sees duplicate content and wastes crawl budget.

Nuxt Dynamic Routes

Use dynamic segments for content that should be indexed:

pages/
  products/
    [category]/
      [slug].vue        → /products/phones/iphone-15
  blog/
    [year]/
      [month]/
        [slug].vue      → /blog/2025/12/nuxt-seo-guide
  docs/
    [section]/
      [page].vue        → /docs/getting-started/installation

Query Parameters for Filters

Use query parameters for sorting, filtering, pagination. features that modify display without changing core content:

<script setup lang="ts">
const route = useRoute()
const category = route.params.category
const sort = route.query.sort || 'popular'
const page = route.query.page || '1'

// Canonical URL excludes query params
useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/products/${category}`
  }]
})
</script>

<template>
  <div>
    <!-- URL: /products/phones?sort=price&page=2 -->
    <!-- Canonical: /products/phones -->
  </div>
</template>

Set canonical URLs to consolidate ranking signals:

// Filter/sort variations point to base URL
useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/products/${category}`
  }]
})

Dynamic Routes

Nuxt's file-based routing creates SEO-friendly URLs automatically. Use descriptive slugs rather than database IDs—/products/laptop-pro-15 ranks better than /products/84792.

Basic Dynamic Segments

pages/
  blog/
    [slug].vue          → /blog/:slug

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

// Fetch content based on slug
const { data: post } = await useFetch(`/api/posts/${slug}`)

// Set meta tags
useSeoMeta({
  title: post.value.title,
  description: post.value.excerpt,
  ogUrl: `https://mysite.com/blog/${slug}`
})

useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/blog/${slug}`
  }]
})
</script>

Nested Dynamic Routes

pages/
  products/
    [category]/
      [slug].vue        → /products/:category/:slug

Generates hierarchical URLs:

• /products/electronics/laptop
• /products/clothing/jacket

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

const { data: product } = await useFetch(
  `/api/products/${category}/${slug}`
)

useSeoMeta({
  title: `${product.value.name} - ${category}`,
  description: product.value.description
})
</script>

Catch-All Routes

pages/
  search/
    [...params].vue     → /search/:params*

Matches:

• /search/vue-router
• /search/vue-router/recent
• /search/vue-router/recent/2025

Important: Catch-all routes create multiple URLs for similar content. Use canonical tags:

<script setup lang="ts">
const route = useRoute()
const query = Array.isArray(route.params.params)
  ? route.params.params[0]
  : route.params.params

useHead({
  link: [{
    rel: 'canonical',
    href: `https://mysite.com/search/${query}`
  }]
})
</script>

Slug Generation

Use kebabCase from scule (already a Nuxt dependency):

import { kebabCase } from 'scule'

kebabCase('Vue Router Guide') // "vue-router-guide"
kebabCase('50% Off Sale!')    // "50-off-sale"

For international content, Google supports UTF-8 URLs but they must be percent-encoded when sent over HTTP. Consider whether your audience expects localized slugs or ASCII-only.

Testing URL Structure

View in search results:

# Test how Google displays your URLs
site:yoursite.com "vue router"

Check canonicalization:

Use Google Search Console URL Inspection to verify:

• User-declared canonical matches your intent
• Google-selected canonical agrees with your preference
• No conflicting signals from redirects or alternates