URL trailing slash — Gatsby

URL trailing slash can present some problems for Gatsby websites that probably can hurt your SEO. Find out these problems and their solution.

Recently I was updating my website inambe.dev and building my blog, Belog. After doing most of the programming stuff, I relaxed a bit to do Google its job and well rank my website on the first page of Google 😀.

A few days later, I checked my Google Search Console to see how many pages Google has found and indexed from my website and the result was quite disappointing, to say the least. See for yourself:

19 (NINETEEN)! pages were excluded from indexing. Now, that's not necessarily wrong because it serves a purpose. There are times when you do not want a page to be indexed. But, that's never my intention for any page. So how this happened?

Trailing slash

Trailing slash is a forward slash / at the end of a URL. People have a difference of opinion whether it's good or bad. But I really never ever gave it a thought, I just used the choices that Netlify and Gatsby has by default. Now there were some problems.

Problem#1

Netlify redirects redirected all the URLs without trailing slash to the same URL with the trailing slash. So, for example, /contact would be redirected to /contact/. That's a problem because when Google Bot finds the /contact link on my home page and proceeds to index it, Netlify redirects redirected Google Bot to /contact/.

6 of my pages were affected by this problem. You can see that in the screenshot I attached above. (the one titled Page with redirect)

Problem#2

I was using a Gatsby plugin to automatically generate the sitemap for my website. This plugin mentioned all the pages with trailing slashes in them.
The problem with that was, Google Bot identified each page two times; one from links on my website, which were without trailing slashes, and one from sitemap, which had trailing slash.
So Google Bot was like "yeah, I kinda found your pages, but they're not present in the sitemap, and also they redirect me 😔"

Problem#3

The last one, bear with me, please. Since I was setting the canonical URL meta tag on each page, I was setting ... yes, you guessed it, without the trailing slash! which was returning a redirect HTTP response. Essentially canonical URLs weren't working, and Google Bot was having a rough time in the field on that day.

Solution 🎉

The solution was simple, and I did not have a choice either (I'll tell you why). I had to embrace the trailing slash. I changed all the links on my website to add trailing slash in them.

I also needed to add trailing slash on dynamically generated pages. I have this function in my code. Notice the trailing slash:

module.exports.getBlogURL = slug => {
    return `/blog/${slug}/`
}

Why didn't I had a choice to remove the trailing slash all together?

Because that's how Gatsby routing works. If you see a Gatsby build of a website, it has folders named after the slug of the pages and index.html files in them, which loads automatically when we hit the slug on the website. It's just like, well, a regular static site, and that's exactly what Gatsby claims to be; a static site generator.

Why didn't I notice it earlier?

Because when we're surfing a Gatbsy website, it doesn't work as a regular static site. It works like React Router, and we can easily forget how Google Bot would treat the website.