Avoid trailing slashes in Gatsby site URLs

I just realized that Google was having a hard time indexing my site. That may sound too dramatic, yeah, it’s not that big of a deal but, I was having a hard time understanding what was indexed and what was not.

So half of the indexing queue had an issue with the heading “Page is not indexed: Alternate page with proper canonical tag”

I am glad that there was a canonical tag on each of my pages. So the only issue is the index queue is filled with those URLs that are never going to be indexed.

So looking closely at the referring pages, it turns out the links in my sites are adding trailing slashes to URLs. Also checking the sitemap, the URLs had trailing slashes.

I went and checked the source to find that I had hrefs without trailing slashes, but seemed that gatsby-link was adding the trailing slashes. As well as the sitemap generated also had trailing slashes, while canonical URLs did not.

So here comes the dilemma, do I have trailing slashes or not? The decision was trivial in my case, as all the pages that were indexed in Google were without trailing slashes as that was how I set the canonical URLs. That is why my solution would be to remove the trailing slashes everywhere.

It turns out that as of v4.7 Gatsby rolled out a config option to handle trailing slashes. I had nothing set in my gatsby-config file, and as of Gatsby v5 the default was changed to trailingslash: 'always'and I was on Gatsby v5. So now everything started making sense.

v4.7 Release Notes | Gatsby (gatsbyjs.com)

All I had to do to fix this mess was to go and update my gatsby-config with

const config: GatsbyConfig = {
  //...
  trailingSlash: "never",
  //...
};

This immediately fixed the links after restarting the dev environment. BUT, the sitemap did not change.

I looked at the sitemap implementation, it was using gatsby-plugin-sitemap

 {
      resolve: "gatsby-plugin-sitemap",
      options: {
        query:'...',
        resolveSiteUrl: () => siteConfig.siteUrl,
        resolvePages: () => {
          const pages = allPages.reduce((acc: any, node: any) => {
            const { uri } = node;
            acc[uri + "/"] = node;
            return acc;
          }, {});
        }
      }
  }

It turned out I was forcing trailing slashes for each URL manually here, so I just had to update it by removing the addition of the slash

diff --git a/gatsby-config.ts b/gatsby-config.ts
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -9,6 +9,7 @@ const config: GatsbyConfig = {
    //
+  trailingSlash: "never",
   //
   //
@@ -119,7 +120,7 @@ 
    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        query:'...',
        resolveSiteUrl: () => siteConfig.siteUrl,
        resolvePages: () => {
          const pages = allPages.reduce((acc: any, node: any) => {
             const { uri } = node;
-            acc[uri + "/"] = node;
+            acc[uri] = node;
             return acc;
           }, {});
 

This finally updated all the URLs in my sitemap and removed slashes from them. I will update this post with the result in my Google search console once Google catches up with my changes. I hope we will see a clean green list.