Netlify Redirects Not Working for Forcing .html URLs

Support
, , ,
1

Hey Netlify Community,

I’m running into an issue with my static site, and I could really use some help. Here’s the situation:

Project Structure:

My project is a simple HTML, CSS, and JS site with the following structure:

/my-site/
├── dist1/
│ └── about-us.html
├── dist2/
│ └── contact.html
├── dist3/
│ └── services.html
├── _redirects
├── netlify.toml
└── index.html

Goal:

I want to force all non-.html URLs to redirect to their .html counterparts, like this:

  • /dist1/about-us ➔ /dist1/about-us.html (301 Redirect)

What I Tried:

  1. Disabled Pretty URLs:
  • I have unchecked the Pretty URLs setting in my Netlify dashboard.
  1. Added _redirects File:
  • My _redirects file (located in the project root) contains:

/* /:splat.html 301

Added netlify.toml:

  • I also tried using a netlify.toml file with this configuration:

[[redirects]]
from = “/*”
to = “/:splat.html”
status = 301
force = true

Cleared Cache:

Cleared the build cache in Netlify.

Cleared my Cloudflare cache (I’m using Cloudflare as my DNS provider).

The Problem:

Despite all this, my non-.html URLs are still not redirecting. Both of these URLs are returning a 200 OK:

  • https://example.com/dist1/about-us
  • https://example.com/dist1/about-us.html

**What I Checked:

  • The _redirects and netlify.toml files are in the project root.
  • The build logs don’t show any errors related to the redirects.
  • I’ve cleared both Netlify and Cloudflare caches multiple times.
  • There are no conflicting page rules in Cloudflare.

What I Need Help With:

  • Why is Netlify ignoring my _redirects file and netlify.toml configuration?
  • How can I force the .html redirects to work consistently across my site?

Any guidance would be greatly appreciated!

Thanks in advance for your help!

2

@mahadi This is effectively the opposite of what people usually want, (usually they DO NOT want the .html extension to appear).

You cannot use _redirects to push from non-.html to .html, you must use Edge Functions.

See:

3

Thanks for the quick response, Nathan!

I understand that my use case is a bit uncommon, but since my site is built using HTML, CSS, and JS, every file I create naturally ends with .html. This makes it a bit confusing when trying to use Pretty URLs.

My Main Concern:

If I use Pretty URLs, I have a few questions:

File Naming:

    Should I name my files without the .html extension (e.g., about-us instead of about-us.html)?

    If so, how will my code editor handle these files, since most expect .html for syntax highlighting and file type detection?

Internal Linking:

    Should my internal links use /about-us instead of /about-us.html even though the actual file is about-us.html?

    Will this impact SEO or cause broken links if I’m not careful?

Sitemap and Canonical Tags:

    Should I include the .html versions in my sitemap and canonical tags, or should they also be stripped of the .html extension?

I’d appreciate a bit of guidance here, as I want to make sure I’m following best practices for both SEO and site structure.

Thanks in advance!

4

This isn’t uncommon, it’s how it always works for static sites, even those built with a ‘static site generator’.

No, the files should have a .html extension, e.g. about-us.html

This is a non issue.

Yes, your link in this case would be /about-us

Perhaps, but with web development you always “need to be careful”
For example a worse situation would be just having a broken link.
If you’re really concerned add a canonical tag as mentioned in the thread I linked:

The links without .html extension would be considered the canonical urls.
So you would use them in all places.