Modernize Your URLs: Step-by-Step Guide to Removing .html Extensions

Introduction

Removing the .html extension from website URLs can enhance the user experience and improve SEO by making URLs cleaner and more readable. This can be achieved through various methods, depending on the server environment or web framework you are using. Below, we’ll explore how to remove the .html extension using Apache, & Nginx.

What is extension in URL?

In a URL, the “extension” refers to the suffix at the end of a file name that indicates the file type. Extensions are commonly used to specify the type of document or resource being accessed. For example, in the URL http://example.com/about.html, the .html extension indicates that the file is an HTML document. Here are some common file extensions:

• .html or .htm: HyperText Markup Language file
• .php: PHP script file
• .asp: Active Server Pages file
• .jsp: JavaServer Pages file
• .css: Cascading Style Sheets file
• .js: JavaScript file
• .jpg or .jpeg: JPEG image file
• .png: Portable Network Graphics image file
• .gif: Graphics Interchange Format image file

Purpose of Extensions in URLs

1. File Type Identification: Extensions help servers and browsers identify and handle the file appropriately. For example, an .html file is rendered as a web page, while a .jpg file is displayed as an image.
2. Server-Side Processing: Some extensions trigger specific server-side processing. For instance, a .php file is processed by a PHP interpreter before being sent to the client’s browser.
3. SEO and User Experience: Clean and readable URLs without extensions can improve the user experience and are often considered better for search engine optimization (SEO).

Removing Extensions

Removing file extensions from URLs can make them cleaner and more user-friendly. This is typically achieved using server configurations, URL rewriting rules, or web application frameworks. By hiding the file extensions, URLs appear more professional and are easier for users to remember and share.

how to remove .html extension from website URL

Removing the .html extension from a website URL can be achieved through server configuration, URL rewriting, or through web frameworks. Here are the common methods for different server environments:

1. Apache (using .htaccess)

For websites running on Apache servers, you can use the .htaccess file to rewrite URLs. Here’s how:

1. Enable mod_rewrite: Make sure the mod_rewrite module is enabled on your Apache server.
2. Create or edit the .htaccess file: Place the following code in your .htaccess file in the root directory of your website:

# Rewrite rule to remove .html extension
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html [L]

This configuration checks if a file with the .html extension exists and rewrites the URL to serve the file without the extension.

2. Nginx

For websites running on Nginx, you can modify the server configuration file:

Edit the Nginx configuration file: Add the following code to your server block:

location / {
    try_files $uri $uri.html $uri/ =404;
}

This configuration tries to serve the requested URI, then the URI with a .html extension, and finally a directory index if available.

If you are using Control Panel (cPanel, DirectAdmin, Plesk, etc)

1) Login into Control Panel.
2) Go to file manager
3) Settings and check on “show hidden files(dotted)” (Skip this step if you are not using cPanel)
4) Edit .htaccess and enter the code mentioned below depending upon your file extension
5) Save the file and you have successfully removed extension from URL.

#Remove .html extension
RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [NC,L]

Once you have added the code in your .htaccess, your extension will be remove and your website will be SEO friendly and also it will be easy for users to remember links.

Conclusion

Achieving clean, extensionless URLs can significantly enhance the aesthetics and usability of your website. Whether you are using Apache, Nginx, Node.js with Express, or modern JavaScript techniques, there are various methods to effectively remove the .html extension from your URLs. Implementing these techniques can lead to better SEO performance and a more professional web presence.