---
title: "Nuxt Routing and SEO"
description: "Structure Nuxt routes and pick per-path rendering so search engines can crawl, index, and rank every page."
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering"
last_updated: "2026-07-16"
---

::key-takeaways
- Use path segments (`/products/shoes`) instead of query parameters; they're easier for Google to crawl and rank
- Rendering mode determines whether crawlers see your content immediately (SSR/SSG) or need to execute JavaScript first (SPA)
- Nuxt route rules let you mix SSR, SSG, ISR, and SWR per path instead of picking one mode for the whole app
- Inconsistent trailing slashes and unbounded query parameters create duplicate content that wastes crawl budget
::

Use path segments (`/products/shoes`) instead of query parameters (`/products?id=123`), and match rendering mode to what each route needs: static pages as SSG, dynamic pages as SSR, admin-only pages as SPA. Nuxt route rules let you mix all three per path instead of picking one mode for the whole app.

## Section Overview

| Topic                                                                     | What You'll Learn                                          |
| ------------------------------------------------------------------------- | ---------------------------------------------------------- |
| [URL Structure](/learn-seo/nuxt/routes-and-rendering/url-structure)       | Slugs, hyphens, and keyword placement                      |
| [Pagination](/learn-seo/nuxt/routes-and-rendering/pagination)             | Self-referencing canonicals and paginated content indexing |
| [Trailing Slashes](/learn-seo/nuxt/routes-and-rendering/trailing-slashes) | Consistent URL formats and redirect configuration          |
| [Query Parameters](/learn-seo/nuxt/routes-and-rendering/query-parameters) | Filters, tracking params, and canonical handling           |
| [Hreflang & i18n](/learn-seo/nuxt/routes-and-rendering/i18n)              | Multilingual sites, x-default, and return links            |
| [404 Pages](/learn-seo/nuxt/routes-and-rendering/404-pages)               | Soft 404s, proper status codes, and crawl budget           |
| [Dynamic Routes](/learn-seo/nuxt/routes-and-rendering/dynamic-routes)     | Route params and Nuxt 4 SSR patterns                       |
| [Internal Linking](/learn-seo/nuxt/routes-and-rendering/internal-linking) | Hub and spoke architecture, link equity flow, orphan pages |
| [Programmatic SEO](/learn-seo/nuxt/routes-and-rendering/programmatic-seo) | Feature pages, comparison pages, alternatives at scale     |
| [Rendering Modes](/learn-seo/nuxt/routes-and-rendering/rendering)         | SSR, SSG, ISR, and Nuxt Islands compared                   |

## Rendering Strategy

Interaction to Next Paint (INP) is one of Google's Core Web Vitals: a [page experience signal](https://developers.google.com/search/docs/appearance/core-web-vitals) that its ranking systems reward, mainly as a tiebreaker between similarly relevant pages. Match your rendering strategy to what each route needs:

| Strategy          | Benefit                     | Best For                           |
| ----------------- | --------------------------- | ---------------------------------- |
| Nuxt Islands      | Minimal client JS           | Static components (header, footer) |
| Edge Rendering    | Low TTFB                    | Global audiences                   |
| SWR / ISR         | Static speed with freshness | Product catalogs, news feeds       |
| Partial Hydration | Better INP                  | Content-heavy pages with widgets   |

Nuxt uses SSR by default. Mix strategies per route with route rules:

```ts
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { isr: true }, // Incremental Regeneration
    '/products/**': { swr: 3600 }, // Stale-While-Revalidate
    '/dashboard/**': { ssr: false }, // Client-only (SPA)
    '/api/**': { cors: true }
  }
})
```

## URL Structure Quick Reference

**Path segments over query parameters:**

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

**Hyphens over underscores:**

```
✅ /nuxt-routing-guide
❌ /nuxt_routing_guide
```

**Lowercase, short URLs:**

```
✅ /blog/nuxt-seo
❌ /Blog/The-Complete-Guide-To-Nuxt-SEO-Optimization-2025
```

Read [URL Structure](/learn-seo/nuxt/routes-and-rendering/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:**

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

Google's own guidance treats crawl budget as a concern mainly for sites with 10,000+ pages that update daily, or a million-plus pages that update weekly: see [managing crawl budget for large sites](https://developers.google.com/search/docs/crawling-indexing/large-site-managing-crawl-budget). Smaller sites should keep sitemaps current and monitor index coverage in [Google Search Console](https://search.google.com/search-console).

## File-Based Routing

Nuxt creates routes automatically from the `/pages` directory:

```
pages/
  blog/
    [slug].vue       → /blog/:slug
  products/
    [category]/
      [id].vue       → /products/:category/:id
```

Generates `/blog/nuxt-seo-guide` and `/products/electronics/123`.

Each dynamic route needs unique meta tags:

```vue
<script setup lang="ts">
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`)

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

Read [Dynamic Routes](/learn-seo/nuxt/routes-and-rendering/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:

```ts
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' }
  ]
})
```

The `@nuxtjs/i18n` module handles this automatically:

```ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    strategy: 'prefix_except_default'
  }
})
```

Read [Hreflang & i18n](/learn-seo/nuxt/routes-and-rendering/i18n) for configuration, bidirectional links, and common mistakes.