Last reviewed by Netlify Support: April 2024
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?
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 thecreatePages()API - meaning that pages can be built both from Gatsby’s automatic page-detection and your theme’s implementation ofcreatePages(). 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 yourpluginsarray), but you’ll want to take special care to ensure that any pages created by thecreatePages()API are converted toindex.htmls nested within directories. Remember that you can always rungatsby buildlocally 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 our UI shows the below settings):
With a file at /blog.html
- Navigating to
/blog.htmlwill serve/blog.html - Navigating to
/blogwill 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.htmlwill 301 redirect and serve/blog/ - Navigating to
/blogwill 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
- With a file at
/blog.html/blog.htmlwill HTTP 301 redirect to/blog- also, any
blog.htmlreferences in 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 turned off
- As you can see here and here, we’ll resolve content across any specified URL (
/blog.htmlAND/blog); this will duplicate your content and likely negatively affect your SEO.
In summary, you’re probably not going to want to untick pretty URLs in our UI.
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.