Explain Codes LogoExplain Codes Logo

How to remove .html from URL?

web-development
301-redirects
seo
htaccess
Anton ShumikhinbyAnton Shumikhin·Dec 17, 2024
TLDR

Remove .html from URL in Apache using .htaccess and mod_rewrite:

RewriteEngine On RewriteRule ^([^\.]+)$ $1.html [NC,L]

RewriteEngine On activates the rewrite module, and RewriteRule directs requests sans extension to their .html equivalents. Verify that the mod_rewrite module is enabled on your Apache server.

Prior to proceeding, bear in mind to:

  • Test redirects temporarily with 302 before implementing 301, preventing unwelcome caching issues.
  • Incorporate RewriteCond %{REQUEST_FILENAME}.html -f to check for .html versions of incoming requests, preventing bad redirects.
  • Ensure Options -MultiViews is in your .htaccess to stop Apache's internal mechanisms from muddling your rewrites.
  • Update internal links so they're missing the .html, maintaining consistency, and boosting SEO.

Expanding on the basics :hammer_and_wrench:

Make 301 redirects work for you

As you set up redirection to do away with .html extensions, always remember to preserve user experience. Avoid annoying 404 errors and broken links, not cool. Have a firm grip on 301 permanent redirects: they inform search engines of a permanent page move, thus keep your SEO ranking intact and user experience smooth.

Be mindful of SEO and performance

Before you dive in, think about its impact on SEO. Badly-set redirects can give search engines mixed signals, denting your site's indexing. Also, your .htaccess configurations must be performant. Overly-complex rules can slow your site - no one likes waiting. Use specific redirect rules, use wildcards and complex regex sparingly.

Using regex in rewrite rules

Our friend RewriteRule uses regex (regular expressions) to match URLs. Regex is versatile for handling complex URL scenarios. Yeah, regex can seem scary at first, having a regex cheat sheet handy will help you construct those patterns. Nifty, right?

Cross-browser verification

It's like you're a detective, verify those redirects across all devices and browsers to ensure full compatibility. Success on one browser isn't a win, it should work everywhere. To avoid rewrite issues with existing directories or files, use RewriteCond %{REQUEST_FILENAME} !-d and RewriteCond %{REQUEST_FILENAME} !-f.

Understand server-side logic

By learning more htaccess rewrite techniques from extra resources, you bring more understanding to server-side redirect logic. The knowledge gained will not only help with this scenario but will equip you to deal with URL rewriting and redirection tasks that you may face in the future.

.htaccess configurations: Up-close and personal

Leave some directories alone

Need to exclude certain directories from the rewrite? No problem. Use:

RewriteCond %{REQUEST_URI} !^/excluded-directory/

Here, excluded-directory will retain its structure, effectively bypassing your rewrite rule.

Handling URLs with style

When processing URLs with query strings, you need a special rule. Here's how to keep the parameters when you remove the .html:

RewriteCond %{REQUEST_FILENAME}.html -f RewriteRule ^([^\.]+)$ $1.html [QSA,L]

Oh, you're wondering about [QSA]? It stands for Query String Append, and it ensures the parameters stick around during the rewrite.

Customize for special needs

Tailor your rule to fit other file types or paths. For example, .php instead of .html? You bet. Just like this:

RewriteRule ^([^\.]+)$ $1.php [NC,L]

Isn't .htaccess marvellous?

Keep an eye out

Post-implementation, watch for 404 errors using tools like Google Search Console. This way you'll catch any links that slipped through the net. Periodic reviews of your .htaccess file will keep your configuration lean and mean.