Home
Support Forums

[Support Guide] How can I alter trailing slash behaviour in my URLs? Will enabling Pretty URLs help?

Last reviewed by Netlify Support in Oct 2021

First Steps

Depending on how you configure your site, you may be served either www.example.com/about or www.example.com/about/ – so, what’s easiest? What’s best? What’s the way to make this behaviour match what you want it to do?

One source notes:

Theoretically a URL with a trailing slash implies a directory and a URL without a trailing slash is a file, but this isn’t really important anymore.

Although it may not be important, it’s a good rule of thumb. In addition to this, and the aesthetics of a trailing slash, there may be SEO implications if you don’t harmonise.

How and where do I configure trailing slashes?

I’m using a SSG with dynamic routing

For most use cases, the driver for trailing slash behaviour will be your static site generator (SSG). If you’re developing a single-page app (SPA) or progressive web app (PWA) using Gatsby, Next.js, et cetera, you may have already stumbled across topics of varying complexity, like this (Gatsby) and this (Next.js).

Some SSGs with dynamic routing like the slash, some don’t; some offer flexibility and customisability, some don’t. Our good friend Jon Sully wrote a great blog post about this entire topic but this particular paragraph shows just how messy it can get, with Gatsby as an example:

Gatsby generates pages automatically for any file under ./src/pages/ , but Gatsby is also widely built around the createPages() API - meaning that pages can be built both from Gatsby’s automatic page-detection and your theme’s implementation of createPages() . The open-source plugin gatsby-plugin-force-trailing-slashes may provide the functionality for nesting all resulting documents inside of directories (make sure you put it last in your plugins array), but you’ll want to take special care to ensure that any pages created by the createPages() API are converted to index.html s nested within directories. Remember that you can always run gatsby build locally and inspect the resulting ./public/ directory.

A lot of the time, if you’re seeing trailing slash behaviour that you aren’t expecting, it’s down to how your SSG is configured. We would advise you to familiarise with their docs and what customisation is available to you, before reaching out to the SSG maintainers directly for the best advice and guidance.

I’m SSG-less/my SSG uses static routing

For SSGs such as 11ty and Jekyll, or you’re completely static, your trailing slash behaviour will match your file structure. On Netlify, on a new site without any configuration changes (where asset optimisation shows the below settings):

Build___deploy___Site_settings

With a file at /blog.html

  • Navigating to /blog.html will serve /blog.html
  • Navigating to /blog will serve /blog
  • Navigating to /blog/ will 301 redirect and serve /blog

With a file at /blog/index.html (and no file at /blog.html!)

  • Navigating to /blog.html will 301 redirect and serve /blog/
  • Navigating to /blog will 301 redirect and serve /blog/
  • Navigating to /blog/ will serve /blog/

You’ll also want to make sure that any permalinks which you (or your SSG) define match the above pattern, to achieve the trailing slash behaviour that you desire.

What can I configure at Netlify?

To start, redirects cannot be used to alter trailing slash behaviour. We normalise URLs at our CDN nodes to guarantee the highest possible cache hit rate and, therefore, we “will match paths to [redirect] rules regardless of whether or not they contain a trailing slash”.

But, our pretty URLs asset optimisation feature can alter trailing slash behaviour. It’s worth noting that the tick box selection within this part of the UI can have detrimental consequences to your trailing slash behaviour and SEO. Again, our good friend Jon Sully detailed this behaviour in-depth with super handy repros. In short:

With pretty URLs ticked and disable asset optimisation unselected (AO enabled)

  • With a file at /blog.html
    • /blog.html will serve /blog.html but anchors (<a>) in your HTML are re-written to /blog
    • All other behaviour is the same as the behaviour we see with the default config (detailed above)

With pretty URLs unticked and disable asset optimisation either selected or unselected

  • As you can see here and here, we’ll resolve content across any specified URL; this will duplicate your content and hinder SEO

In summary, you’re probably not going to want to untick pretty URLs in our UI, regardless of whether whether asset optimisation is selected or not!

What else could alter my trailing slash behaviour?

There are a couple of other nuances which could be at play. Firstly, if you’re proxying content from another service to Netlify, there’s a whole other host of reasons why we wouldn’t advise this. In addition to these gotchas, the proxied service may also be trying to serve a URL either with or without a trailing slash. Depending on what you desire, you’ll want to observe the vendor’s instructions for altering this behaviour. Here’s how you remove the trailing slash in Fastly, for example.

Additionally, you’ll want to double-check that the resource you’re serving actually comes from your Netlify site! If you’ve navigating to another site, the trailing slash behaviour will be driven by the other host.

Lastly, client-side Javascript such as this could be altering what the navigation bar shows. Code such as this isn’t the most foolproof method of getting the behaviour you want.

Summary

We’ve explored how trailing slashes can impact SEO, looked at how different SSGs may handle trailing slashes and highlighted what pretty URLs can do to alter this behaviour.

If you’re not seeing the behaviour you expect, it’s worth ensuring that your pretty URL config is back to the default settings, your file structure suits the norm for file/directory slash behaviour and, finally, taking a look at what configuration is available to you from your SSG.

If you’re still struggling, please feel free to create a topic here on the forums with your site, SSG, x-nf-request-ids plus any other useful information about your implementation and what you aim to achieve.

3 Likes