Trailing Slashes in Nuxt

A trailing slash is the "/" at the end of a URL:

• With trailing slash: /about/
• Without trailing slash: /about

While trailing slashes don't directly impact SEO rankings, they can create technical challenges:

1. Duplicate Content: When both /about and /about/ serve the same content without proper canonicalization, search engines have to choose which version to index. While Google is generally good at figuring this out, it's better to be explicit.
2. Crawl Budget: On large sites, having multiple URLs for the same content can waste your crawl budget.
3. Analytics Accuracy: Different URL formats can split your analytics data, making it harder to track page performance.

The solution is simple: pick one format and stick to it by redirecting the other and set canonical URLs.

Nuxt Configuration

Nuxt handles trailing slashes through the trailingSlash option in nuxt.config.ts:

Removing Trailing Slashes (Default)

export default defineNuxtConfig({
  // Default behavior - trailing slashes are removed
})

By default, Nuxt removes trailing slashes from URLs.

Adding Trailing Slashes

export default defineNuxtConfig({
  site: {
    trailingSlash: true
  }
})

This will automatically add trailing slashes to your sitemap, canonical URLs, and internal links generated by Nuxt SEO modules.

Nuxt SEO Utils

If you're using Nuxt SEO Utils, the trailingSlash configuration is handled automatically:

export default defineNuxtConfig({
  site: {
    trailingSlash: true, // or false
  }
})

Nuxt SEO will:

• Apply trailing slashes consistently across sitemap URLs
• Set canonical URLs with the correct format
• Handle OG image URLs properly

<SiteLink> Component

For internal links, use the <SiteLink> component instead of <NuxtLink>. It automatically applies the correct trailing slash format:

<template>
  <!-- Will be /about/ if trailingSlash is enabled -->
  <!-- Will be /about if trailingSlash is disabled -->
  <SiteLink to="/about">
    About
  </SiteLink>
</template>

Props

• withBase - Adds the app.baseURL to the link
• absolute - Renders the link as an absolute path

Route Rules for Redirects

Use routeRules to enforce redirects for inconsistent URLs:

Remove Trailing Slashes

export default defineNuxtConfig({
  routeRules: {
    // Redirect trailing slash URLs
    '/**/**/': { redirect: { to: path => path.slice(0, -1), statusCode: 301 } }
  }
})

Add Trailing Slashes

export default defineNuxtConfig({
  routeRules: {
    // Redirect non-trailing slash URLs
    '/**/': { redirect: { to: path => `${path}/`, statusCode: 301 } }
  }
})

Canonical URLs

Set canonical URLs to indicate your preferred URL format:

<script setup>
useHead({
  link: [
    {
      rel: 'canonical',
      href: 'https://example.com/about' // or /about/
    }
  ]
})
</script>

Or use useSeoMeta:

<script setup>
useSeoMeta({
  canonicalUrl: 'https://example.com/about'
})
</script>

Best Practices

1. Choose One Format: Pick with or without trailing slashes and stick to it site-wide
2. Use Site Config: Configure trailingSlash in nuxt.config.ts for consistency
3. Use <SiteLink>: Replace <NuxtLink> with <SiteLink> for automatic trailing slash handling
4. Set Route Rules: Use routeRules for 301 redirects of inconsistent URLs
5. Canonical Tags: Always set canonical URLs to your preferred format
6. Internal Links: Be consistent in your internal linking
7. Sitemap: Use consistent URLs in your sitemap

What NOT to Do

❌ Don't mix URL formats across your site ❌ Don't rely only on client-side redirects for SEO ❌ Don't ignore the issue on large sites ❌ Don't change your format without proper redirects