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.
![](https://res.cloudinary.com/anilmaharjan-com-np/image/upload/f_avif/q_auto/c_scale,w_589/v1/Blog/search.google.com_search-console_index_resource_id_sc-domain_anilmaharjan.com.np_pages_SITEMAP_sitemap_https__2F_2Fanilmaharjan.com.np_2Fsitemap-index.xml.png?_a=DATAdtDeZAA0)
![](https://res.cloudinary.com/anilmaharjan-com-np/image/upload/f_avif/q_auto/c_scale,w_440/v1/Blog/f5bfc7fc-c837-48c4-908d-730fdbe985ba.png?_a=DATAdtDeZAA0)
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.