Issues with trailing slash on Netlify

[am-on]

Issue with Netlify Pretty URL option enabled

Hosting elm-pages site on Netlify with Asset optimization -> Pretty URL option turned on results in a redirect to trailing slash:

• No trailing slash when navigating between pages on the website:
  1. Visit https://elm-pages.com.
  2. Click Showcase link.
  3. URL has no trailing slash: https://elm-pages.com/showcase.

• Redirected to trailing slash when visiting Showcase page directly:

  > curl -I https://elm-pages.com/showcase
  
  HTTP/2 301 
  location: /showcase/
  content-type: text/html; charset=UTF-8
  server: Netlify

With this configuration Ahrefs reports errors:

Issue with Netlify Pretty URL option disabled

If Pretty URL option is disabled, both versions are loading:

• https://elm-pages.com/showcase
• https://elm-pages.com/showcase/

With Pretty URL disabled, Google Search Console was reporting some issue related to both pages being available.

---

Why should this be fixed?

• Potential SEO penalty.
• Worse performance - users sharing links with no slash, Netlify redirects to add slash.

I found some related discussion about this on Gatsby https://github.com/gatsbyjs/gatsby/issues/9207. They mention the above points in more detail:

The performance cost is the synchronous delay for the first byte of useful data caused by the redirect.

Using the Hopper example above, visiting https://www.hopper.com/company takes 150-300ms for the redirect, before any page data is received. On cellular connections with high latency it can add up to 1s. https://github.com/gatsbyjs/gatsby/issues/9207#issuecomment-431008517

I know this issue lapsed and got closed but I really think it's important to recap on a couple of things here. The impetus for this issue is that a) there's a disconnect between Gatsby's routing defaults and Netlify's routing configurations, and b) there are serious SEO penalties in play if a Gatsby site doesn't have the trailing-slash / no-trailing-slash issue solved, since a site serving the same content on both URLs (duplicate content) gets knocked on SEO pretty hard. Technically this isn't Gatsby's fault, but as it pertains to all Gatsby users hosting on Netlify, it does seem like a major issue.. or a major risk at the very least. ... https://github.com/gatsbyjs/gatsby/issues/9207#issuecomment-751994260

How to fix - redirect from trailing slash to non-slash URL

1. Disable Netlify Pretty URL option.
2. Use Netlify Edge to redirect from trailing slash. Use strip-slash function from https://github.com/ascorbic/slash-edge.

Improvements

Add an option to include trailing slash on pages/links by default. With this Netlify Pretty URL option could be enabled.

Discussion on Slack: https://elmlang.slack.com/archives/CNSNETV37/p1667897311175049

[dillonkearns]

Hi @am-on, thanks so much for providing this context here. This is a surprising result to me, I wasn't aware that Netlify was doing redirects when going to URLs with no trailing slash, but I was able to see that behavior easily using your cURL command so thanks a lot for the reproducible steps.

I found a note in this article about directories:

Choose one URL as the preferred version. If your site has a directory structure, it's more conventional to use a trailing slash with your directory URLs (for example, example.com/directory/ rather than example.com/directory), but you can choose whichever you like.

https://developers.google.com/search/blog/2010/04/to-slash-or-not-to-slash

So it looks like this is just standard web behavior that showcase/index.html will be served as /showcase/ (with a trailing slash) as the standard format. It's kind of unfortunate because I find that URL format less clean so I prefer without the trailing slash (and I would never type that into the URL bar as a user, nor would I share a link that includes the trailing slash). So it's counter-intuitive to me in that way, and I suppose the way that I share URLs will naturally cause 301's because that's just the standard convention for web hosts.

The Ahrefs warning is definitely important as SEO is a primary concern of elm-pages, and often the user will be navigating around the site through URLs on the page, so given that it probably does make sense for the default behavior to use trailing slashes.

One thing I'm curious about is how this will work with server-rendered routes in elm-pages v3. Maybe the way I setup the Netlify redirect routes will need to take this into account (or perhaps I already do), I'll need to look into that.

If anyone reading this has any concerns about making trailing slashes the default for links in elm-pages, let me know. From the material here it sounds like that's the best practice, but if there's any reason to consider not making trailing slashes the default then I would like to hear about it.

Thanks again for the discussion and context!

[dillonkearns]

Looking at this a bit more, it seems that there is no standard approach on how to handle this on different hosting platforms:

https://github.com/slorber/trailing-slash-guide

But for the platforms listed there, there are 200 statuses for every platform's default configuration for the trailing-slash version (see the ✅'s in the /folder/ column). So that would support the idea of trailing slashes being the standard.

Another good article with some good links as well here, I'll include it for reference for anyone wanting more context: https://pixelpoint.io/blog/gatsby-to-slash-or-not-to-slash/.

I do see different opinions out there, though. For example, the Vercel blog seems to use Vercel's "trailingSlash": false option:

https://vercel.com/docs/project-configuration#project-configuration/trailing-slash

curl -I https://vercel.com/blog/using-vercel-comments-to-improve-the-next-js-13-documentation
HTTP/2 200

curl -I https://vercel.com/blog/using-vercel-comments-to-improve-the-next-js-13-documentation/
HTTP/2 308

One reason I can think that this would be desirable is because users will typically type in the non-trailing-slash form. So I'm wondering if it's worth including an option in elm-pages to toggle trailing slashes on or off, and perhaps make trailing slashes the default.