When it comes to trailing slashes, some are for them, and some are against them.
A trailing slash is the slash on the end of of the URL.
No trailing slash: https://www.sammyseo.com/trailing-slash-verse-no-trailing-slash
Trailing slash: https://www.sammyseo.com/trailing-slash-verse-no-trailing-slash/
Negative effects of trailing slashes
But, it’s just an extra character on the end of the URL?
Surely they can’t harm a site?
Well, that little character creates an entire duplicate copy of a page that’s accessible, and indexable, by Google.
You need to pick one or the other.
With or without the slash.
You can’t let both stay crawlable & indexable.
Should you enforce a trailing slash?
Personally, I prefer trailing slashes. I mostly work with enterprise/larger scale clients, that tend to be using programmatic SEO.
This style of SEO leads to heavy folder usage, to ensure a good, clean hierarchy for the site structure.
In the early days of websites, well, 10+ years ago anyway, a trailing slash used to dictate that a URL was a folder, and no trailing slash would be a page, with more commonly a .html or similar extension.
So you’d have;
domain.com/folder/
domain.com/page.html
With pretty URLs, that then changed to;
domain.com/folder/
domain.com/page
Nowadays it really doesn’t matter as much, but I go back to folders and being able to pass the value around the hierarchy in the structure.
It’s also the WordPress default. WordPress powers 34% of the internet, and has a 60% CMS share. Maybe they got it right?
Because of this, I prefer everything just to have trailing slashes.
Many others though prefer no trailing slashes.
If it’s an existing site, pick the one that has the most rankings and redirect the other.
If it’s a new site, pick whatever you want. Maybe the one that would lead to fewer fights with developers.
You must 301 redirect one to other
No matter whether you choose trailing slashes or no trailing slashes, you must redirect the one you don’t choose, to the one you do choose. This is non-negotiable.
Whilst a canonical tag should strip, or add, the trailing slash, this is not enough to ensure proper and clean indexation and crawling.
You must redirect the secondary option, to the option you chose, with a server-side 301 redirect.
No clientside JS redirecting, as this won’t avoid indexation.
Force trailing slash with htaccess
You can force a trailing slash with a 301 redirect via htaccess, with the below code;
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)([^/])$ /$1$2/ [L,R=301]
However, this will also redirect file extensions.
If you don’t want them redirected, you will need to use;
RewriteCond %{REQUEST_URI} !\.(php|html?|jpg|gif)$
RewriteRule ^(.*)([^/])$ http://%{HTTP_HOST}/$1$2/ [L,R=301]
Both of those are added below the following line in the htaccess file;
RewriteEngine On
Strip trailing slash with htaccess
You can strip the trailing slash, and enforce a no trailing slash policy, with the following code;
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
Just like adding a slash, this code is added under;
RewriteEngine On
Force a trailing slash in cloudflare
Unfortunately, this is not possible :(
If it becomes possible, please let me know. I need this.
Strip a trailing slash in Cloudflare
You can strip it with two redirects, with the first to ensure parameters remain, and then the second to strip the trailing slash.
No query string: https://foo.com/*/ -> https://foo.com/$1
Yes query string: https://foo.com/*/?* -> https://foo.com/$1?$2
Provided you are not actively linking, or using/have used, the trailing slash version, then this 2 redirect setup will work okay.
If however, you have actively used the trailing slash version, then it would be recommended to instead seek a way to do this redirect in a single step to assist cleanup.
NextJS 308 Trailing Slash Redirect
NextJs now has built in trailing slash redirect, that you can either enforce trailing slash, or enforce no trailing slash with.
Rather than a 301 though, they’ve built it to do a 308 redirect.
Whyyyyy developersssss whyyyyyy.
“But a 308 is like a 301”. Urgh.
You’ll get responses like this all day, but how does Google actually handle this redirect?
Well, I was lucky (or unlucky enough?) to get some data about this via a URL migration that was happening, where I was able to see the specific redirects in crawl stats.
Even though the URLs correctly report as a 308 redirect via HTTPstatus (bottom of screenshot), Google search console is reporting these as 302 redirects.
Luckily though, these redirects weren’t vital to what was happening, it was just a little over indexation.
However, based on GSC reporting, these redirects are being treated like 302s, which we definitely wouldn’t be wanting.
John Mueller commented on 308s back in 2018;
If you use it like a 301 we'll treat it as such.
— 🐝 johnmu.csv (personal) 🐝 (@JohnMu) May 10, 2018
But hey, he’s been wrong before!
Tried to ask him about it, but alas, I’m not famous enough to get a response.
.@JohnMu NextJS recently integrated trailing slash redirects as 308 redirects. GSC is flagging these as possible 302s in GSC, with none flagged as 301s. Only 6 from ~300 redirects show in sample though. Should 308s flag as 301s under crawl stats? They're 100% 308s to Googlebot. pic.twitter.com/OFtuTE1BqC
— Sam Partland (@sam_partland) February 18, 2021
That or I don’t know how to use twitter. Maybe both?
Why has NextJS done 308 redirects then?
Something something security.
From here.
So something to do with modifying the request, assumably to stop some sort of hack of the data/privacy related.
The good news though, is that you can override their default function to make it a 301.
Unfortunately, I can’t help you with the how as it was done by a dev team. But, guaranteed 100% can be overwritten, so you can stop stressing and grab a beer to celebrate!
To slash, or not to slash
That is the question.
A question that only you and your circumstances can answer.
2 Replies to “Trailing Slash vs No Trailing Slash – Whats Better for SEO?”
Hi Sam,
Thanks for the article. Regarding the nextjs 308 issue. The official Google documentation on https://developers.google.com/search/docs/advanced/crawling/http-network-errors?hl=en#:~:text=308%20(moved%20permanently) mentions it’s equivalent to a 301 for Gbot
That document seems recent as it was last updated 2 days ago
Regards,
Roger
Thanks for jumping in Roger, and for the link.
Correct, that is what Google says. We were seeing search console reporting it as a different redirect, so were going off that. If anything has changed since then, then yeah there should be no issue with the 308s at all.
When it comes to a site migration that requires that redirect to be clean, I will stick with what I know rather than testing something new and risking it haha
Cheers,
Sam.