How do I fix a 404 error when trying to redirect from a .html version of a blog post URL to the normal version in Webflow?
TL;DR
- Identify
.htmlURLs causing 404 errors by testing both versions of blog post links. - In Webflow settings, add a 301 redirect from
/blog-post.htmlto/blog-post. - Use a wildcard redirect (
/blog/(.*).html→/blog/%1) for multiple affected blog posts. - Publish the changes and test the redirects, clearing cache if needed.
A 404 error occurs when a requested page cannot be found. If you're trying to redirect from a .html version of a blog post URL to the normal version in Webflow, you need to set up a 301 redirect in your project settings. Here’s how to fix it:
1. Identify the Incorrect URL
- Check if users are accessing blog posts with a
.htmlsuffix (e.g.,/blog-post.htmlinstead of/blog-post). - Try visiting both versions of the link to confirm the 404 error occurs for the
.htmlversion.
2. Add a 301 Redirect in Webflow
- Go to Webflow Project Settings > Click the "Publishing" tab.
- Scroll down to the "301 Redirects" section.
- In the "Old Path" field, enter the incorrect URL with
.html(e.g.,/blog-post.html). - In the "Redirect To" field, enter the correct URL without
.html(e.g.,/blog-post). - Click "Add Redirect", then "Save Changes".
3. Redirect .html for All Blog Posts (Optional)
- If multiple blog posts have the same issue, use a wildcard redirect:
- Old Path:
/blog/(.*).html - Redirect To:
/blog/%1 - This ensures any blog post ending in
.htmlautomatically redirects to its Webflow-friendly URL.
4. Publish and Test
- Click "Publish" to make the changes live.
- Visit a
.htmlblog post URL and confirm it redirects properly to the version without.html. - If issues persist, clear your browser cache or test in an incognito window.
Summary
Add a 301 redirect in Webflow’s settings to redirect .html blog URLs to their correct paths. If multiple blog posts are affected, use a wildcard redirect for efficiency. Finally, publish and test to ensure it works correctly.