Gatsby doesn’t tell you whether to use or omit trailing slashes. The choice to place a forward slash at the end of a URL is up to you.
Nonetheless, Gatsby’s default behavior implies that you should use them. This is further backed up by services such as Netlify where Pretty URLs are enabled by default. Jon Sullivan has written an excellent blog post about this topic — Trailing Slashes and Gatsby. You should read the post if you are interested to learn more.
But, how does this relate to redirect issues? Omitting the trailing slash can actually create loops in redirects.
If you are having circular redirects, you are most likely missing a
/ at the end of your page
Although you can omit them, you will have to do some extra work, which I won’t talk about in this post.
Instead, why not just do it the intended way? Go over the following list and see if you have forgotten to place a trailing slash somewhere.
Make sure you add a trailing slash to all internal links.
Whenever you use the
Linkcomponent, add a trailing slash in the
toprop. Don’t forget to use a trailing slash whenever you use
navigatefunction as well.
When you create pages by hand in
gatsby-node.js, ensure that you pass paths with a trailing slash to
createPage()function. You can also use gatsby-plugin-force-trailing-slashes plugin to do the job for you.
If you have SEO set up for social media, make sure that canonical URLs in meta tags include a trailing slash.
If a canonical URL lacks a trailing slash, crawlers get stuck in a loop. They open a page, find and fetch the canonical URL, which redirects to the same page but with a trailing slash. In this page they see the canonical URL without a trailing slash and repeat the same cycle.
Make sure your
gatsby-config.jsmatches your primary domain and not a secondary/alias domain.
If you redirect your
siteUrl. Otherwise, you create the same cycle as above, in this list’s item 3.
If you have a sitemap, ensure all URLs contain a trailing slash.
Doing so prevents search engines from indexing links which are redirects to the actual content. You want to have your real content displayed in search results and not redirect URLs.
To check if your page paths include a trailing slash, open http://localhost:8000/___graphql while running
gatsby develop in a terminal. Then, run the following query.
You should see all of your site’s pages and their corresponding paths.