Trailing Slash Redirect Rule not working?

[CalebOWolf]

I’ve read the doc for how to use redirects and rewrites for a netlify site but when I use it for my website, it just says that this page cannot be reached or isn’t available.

1. I know its up and running because the status page for netlify says all good/clear
2. My code for my website shouldn’t affect how it loads because it validated successfully and I checked it for any errors that might occur during the page load and cache

For example when I use this in my _redirects or netlify.toml file

https://example.netlify.com https://example.netlify.com/ 301

[[redirects]]
from = “https://example.netlify.com”
to = “https://example.netlify.com/”
status = 301
force = false

It should have the trailing slash added to the end of the address, but instead gives me an error in my browser that this site can’t be reached or isn’t available.

Basically all i’m trying to accomplish is to make my site have the trailing slash at the end of the URL like this
https://example.netlify.com/

(The main reason for this post is because I’m using a SEO checker for my website and its saying that
https://example.netlify.com
isn’t equal to the canonical URL.
My code would be setup like this

I don't know if its a code error for me or if I'm not understanding canonical or redirects/rewrites)

[perry]

hi there, did you give this a read through? is it applicable to your situation at all?

Bug in non-trailing slash rewrite

I have successfully implemented the instructions in this guide about deploying multiple repos to a single, custom domain-enabled, site. However, I am experiencing a bug that contradicts the docs on a trailing slash in redirect rules. normal condition: When a url is entered into a browser that contains the trailing slash, the rewrite is successful and the sub directory is rendered as expected. [with trailing slash] irregular condition: When a url is entered into a browser that does not contai…

[CalebOWolf]

This is relevant to my issue but I do not understand what the solution for it is. I have tried multiple methods in which the trailing slash can be removed but ends with the page not being found at all, the solution is to revert back to no redirects at all. But that still dosent answer my question that I asked about having the trailing slash being added to the url and not without the trailing slash

[fool]

You can’t usefully affect the trailing slash on the domain name, Caleb - that’s a browser-specific detail as to what is shown and essentially https://example.netlify.com is the same as https://example.netlify.com/ - so it’s not something you can redirect between. They are just different ways of saying the same thing.

If you’re talking about trailing slashes on files like https://example.netlify.com/file versus https://example.netlify.com/directory/ that’s a different story. Still hard to affect with redirects, but at least there is some room for change there.

[CalebOWolf]

Neither of those are my issues, its an issue with some sites using a non trailing slash instead of a slash (which is what I would prefer)

[luke]

@CalebOWolf, this is interesting as it is technically impossible not to have a trailing slash after the domain name. Many browsers do not display the trailing slash but it is a required part of a URL.

Please see the second answer here: https://webmasters.stackexchange.com/questions/73985/why-do-some-domains-have-a-at-the-end-of-the-home-page-url

For example, when I use curl to request https://example.netlify.com/ the headers look like this:

> GET / HTTP/2
> Host: example.netlify.com
> User-Agent: curl/7.54.0
> Accept: */*

This is an GET request for the path / using HTTP/2 at the host example.netlify.com.

Here is an attempt to use curl to request https://example.netlify.com (note the missing trailing slash).

> GET / HTTP/2
> Host: example.netlify.com
> User-Agent: curl/7.54.0
> Accept: */*

The request headers are identical. So, why are they the same?

There is a line logged by curl earlier which says this:

* Rebuilt URL to: https://example.netlify.com/

The request is the same because curl is refusing to request an empty path (no slash at all). It forced the slash to be included because a missing slash will (or should) always result in an error.

Again, it is impossible not to have a slash after the domain name. However, some web browsers simply hide it. If you look at the actual HTTP request the browser sends, though, it is always includes at least the / path if it would otherwise be empty.

Is it possible that the SEO checker error not talking about where the site is served? Could the error instead be about a link in the HTML somewhere and the HTML link is missing the slash?

[CalebOWolf]

It may be that because I have the homepage set to index.html for my code, but I have enabled the netlify pretty assets optimization which then in the source code shows a slash for the home link so I don’t know if something’s up with what I’m doing or if its a code error that i’m not seeing here.
(Left is source code and right is coding program)
(Below those two are the Netlify Settings for the pretty assets optimization for my site)

[luke]

@CalebOWolf, I do see that "index.html" was converted to '/' in the HTML. This HTML change wouldn’t change whether or not the URL contained a slash at the end or not because the URL must always include a slash after the domain name; it is impossible not to.

There is an important detail I’m missing. Where are you seeing the missing slash? Is it in the browser address bar?

We cannot control what these web browsers are doing to change the URL in the address bar. Browsers don’t always show the real URL and this happens in the browser itself.

Let’s take the following example URL: https://example.netlify.com/

Chrome will show this URL as only example.netlify.com (currently as I write this - this has changed over the years).

Here is a screenshot:

While Firefox shows this as https://example.netlify.com:

In both cases, though, the real URL is https://example.netlify.com/ - with the trailing slash.

Both Chrome and Firefox are hiding the trailing slash - but it is there! Chrome hides the https:// too but it is also there. The web browser is not showing the real URL.

One final note, Chrome now hides the www, whether it is there or not too. Here is how Chrome displays the URL https://www.example.com/.

Chrome is taking a twenty-four character URL and hiding thirteen characters of it. Chrome displays less than half (eleven of twenty-four) of the characters in the URL. There is reality and there is what the browser displays.

Personally, I strongly disagree with the design decision to have browsers modify the display URL in anyway (I want it to show the real URL) but that is what browsers do - modify the real URL in the address bar.

If you are seeing the missing slash in the address bar, you will need to contact the maker of the web browser about that as they are doing this - not Netlify.

[CalebOWolf]

I just had a solution for the assets optimizations. I could just redirect https://example.netlify.com/index.html to https://example.netlify.com/ and it would still work but it wouldn’t have the index.html on the end of the URL, or would it end up being an infinite loop?
Also one other thing that I had another question about, what about the www version of a netlify site because I would want it to be https://example.netlify.com/ not https://www.example.netlify.com/

[fool]

Not sure how that would work or if it should based on relevant standards. What happens when you try, preferably on a test site or with a 302 redirect code so you can “undo” it easily (unlike a 301)?

I might do something in client side javascript if you can’t do it successfully using our redirects. psuedocode:

if window.location.pathname == /index.html
  then client side redirect to /

To answer your second question, we do not intend to support any sitenames with a “.” in them (www.example.netlify.com in your example); our SSL certificate doesn’t cover them and you can’t set them in the UI anyway