---
title: "Nuxt Routing and SEO"
description: "Structure Nuxt routes and pick per-path rendering so public content is available to crawlers."
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering"
last_updated: "2026-10-05"
---

> Index of every page on this site: [llms.txt](https://nuxtseo.com/llms.txt)

::key-takeaways
- Use stable, descriptive URLs. Both path segments and query parameters can identify indexable content
- 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
::

Choose stable paths or query URLs that identify the page, 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](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/url-structure)       | Slugs, hyphens, and keyword placement                      |
| [Pagination](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination)             | Self-referencing canonicals and paginated content indexing |
| [Trailing Slashes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/trailing-slashes) | Consistent URL formats and redirect configuration          |
| [Query Parameters](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/query-parameters) | Filters, tracking params, and canonical handling           |
| [Hreflang & i18n](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/i18n)              | Multilingual sites, x-default, and return links            |
| [404 Pages](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/404-pages)               | Soft 404s, proper status codes, and crawl budget           |
| [Dynamic Routes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/dynamic-routes)     | Route params and Nuxt 4 SSR patterns                       |
| [Internal Linking](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/internal-linking) | Hub and spoke architecture, link equity flow, orphan pages |
| [Programmatic SEO](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/programmatic-seo) | Feature pages, comparison pages, alternatives at scale     |
| [Rendering Modes](https://nuxtseo.com/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) used by its ranking systems, alongside other signals. Match your rendering strategy to what each route needs:

| Strategy          | Benefit                                            | Best For                           |
| ----------------- | -------------------------------------------------- | ---------------------------------- |
| Nuxt Islands      | Minimal client JS                                  | Static components (header, footer) |
| Edge Rendering    | Can reduce network distance; measure response time | Global audiences                   |
| SWR / ISR         | Static speed with freshness                        | Product catalogs, news feeds       |
| Partial Hydration | Can reduce client work; measure 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 }, // Requires a supported deployment preset
    '/products/**': { swr: 3600 }, // Stale-While-Revalidate
    '/dashboard/**': { ssr: false }, // Client-only (SPA)
    '/api/**': { cors: true }
  }
})
```

## URL Structure Quick Reference

**Both formats can identify indexable content:**

```
✅ /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](https://nuxtseo.com/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](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/trailing-slashes)              |
| Pagination without canonicals | [Self-referencing canonicals](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/pagination)            |
| Infinite filter combinations  | [Noindex or block in robots.txt](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/query-parameters)   |
| Soft 404s returning 200       | [Proper status codes](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/404-pages)                     |
| Orphan pages with no links    | [Build internal linking structure](https://nuxtseo.com/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`.

This initial-load example requires your `/api/posts/:slug` endpoint returning title and excerpt, or404 for an absent post. Add route-change handling if the same component remains mounted:

```vue
<script setup lang="ts">
const route = useRoute()
const { data: post, error } = await useFetch<{ title: string, excerpt: string }>(`/api/posts/${encodeURIComponent(String(route.params.slug))}`)
if (error.value)
  throw error.value
if (!post.value)
  throw createError({ statusCode: 404, statusMessage: 'Post not found' })

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

Read [Dynamic Routes](https://nuxtseo.com/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' }
  ]
})
```

Configure language metadata and `baseUrl`, then apply [`useLocaleHead()`{lang="ts"}](https://i18n.nuxtjs.org/docs/guide/seo). Installing the module alone does not add the complete head tags:

Follow the module's current SEO setup for language tags, canonical URLs, and alternate links.

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

## Sitemap

See the full [sitemap](https://nuxtseo.com/sitemap.md) for all pages.