Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

Hide file extensions, add trailing slash with .htaccess

Instructions on how to use the .htaccess file to remove file extensions from web page URLs, add a trailing slash and keep your CSS and JavaScript files working.

For many website developers, creating “friendly URLs” (ie hiding file extensions) is a priority. Not only does it look better in the broswer, friendly URLs can also provide an advantage with search engine rankings when combined with other technologies. By masking the technology behind your website, you also add a layer of security.

This article is about transforming a URL like http://foo.com/foo/foo.php into something like http://foo.com/foo/foo/, with a trailing slash.

Whilst there are many sites available which explain how the .htaccess file can be used to modify URLs, few deal with the problem of a missing trailing slash. The trailing slash is actually important, because its correct use can ease server load, as is explained here.

I recently updated my Plant Evolution website, which consists of a collection of static pages. In doing so, I wanted to (1) Seamlessly redirect all existing ‘unfriendly’ URLs to new ‘friendly’ URLs (ie. hide the .php file extension); (2) Include a Permanent Redirect 301, so search engines would catalogue the new URLs and not consider them duplicate content; and (3) Add a trailing slash ‘/’ to the end of each URL.

Points 1 and 2 were relatively easy, as there’s plenty of code for each available online, but point 3 proved to be a real challenge. The solution requires the Apache mod_rewrite function, a modified .htaccess file and a change to your website code too.

Part 1: Hide File Extensions

Using a text editor, open your .htaccess file and insert the following code at the top.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^([^/]+)/$ $1.php

If you have a .htm or another extension instead of .php, alter the third and fourth lines to accomodate the extension type you wish to conceal. The code shown here hides the .php file extension if it is linked-to or directly accessed, but the old file names will still work as before.

2. Add 301 redirects to new extensionless file

The aim here is to tell crawling search engines that the old URL has been replaced with a new one (via 301 Redirect) and to actually redirect your visitors to the new URL.

It’s very important to note that you will need to make an explicit reference to your target directory in the code. This means that a custom .htaccess file will need to be added in each directory for this to work properly.

RewriteCond %{THE_REQUEST} ^[A-Z]+\ /([^/]+/)*[^.]+\.php(\?[^\ ]*)?\ HTTP/
RewriteRule ^(([^/]+/)*[^.]+)\.php$ http://www.example.com/yourdirectory/$1 [R=301,L]

Without the second line, http://www.example.com/yourdirectory/file.php would redirect to http://www.example.com/file/ (ie the root) which would likely give you an Error 404. You also need to update the file extension if you’re not redirecting .php files.

3. Add the trailing slash

This piece of code adds the much-coveted trailing slash. In a similar manner to the example above, you will need to explicity reference your target directory for this to work properly.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ http://www.example.com/yourdirectory/$1/ [R=301,L]

Once complete, save your new .htaccess file and upload to the server for testing.

4. Add a base href to your page code

Whilst the above three code snippets should redirect your URLs, you’ll notice that your CSS and JavaScript will stop working if they are referenced via relative links.

This is easily fixed by adding the following code to the <head> of your pages:

<base target="_self" />

Now your ugly URLs should automatically redirect to “friendly” URLs without file extensions but with a trailing slash added.

   

Comments

9 responses to “Hide file extensions, add trailing slash with .htaccess”

On 29 March 2012, Tobi wrote: Hyperlink chain icon

Hi thanks your .htaccess file extension. It works very well but only on pages which are located in the root diretory for example http://www.mydomain.com/portfolio/

but on ex. http://www.mydomain.com/portfolio/work1/ it doesn’t work, can you
help?

Reply

On 29 March 2012, Adam Dimech wrote: Hyperlink chain icon

The techniques do work on secondary directories, as I am using it here: http://www.adonline.id.au/plantevol/tour/

You will need a separate .htaccess file for the subdirectory. Therefore, using the example above, you will need a different .htaccess for:
1. http://www.adonline.id.au/plantevol/
2. http://www.adonline.id.au/plantevol/tour/

You will need to review the .htaccess code in 2. so that it make a reference to the subdirectory.

Then, you will need to ensure the base href reference is changed for files in that subdirectory.

Reply

On 5 June 2013, Rachel wrote: Hyperlink chain icon

Although my .htm file extensions have been successfully removed, I am getting 404 Error File Not Found when accessing any pages other than the index.htm file. Any advice?

Reply

On 26 September 2014, Daviesh wrote: Hyperlink chain icon

Hi ,
I tried to add trailing slash to my website renovationsplus.net.au which is CMS website but all I get is nothing. Can you please help me on this ?

Thanks

Reply

    On 26 September 2014, Adam Dimech wrote: Hyperlink chain icon

    What CMS are you using, and what code have you tried? What do you mean when you say that you get “nothing”?

    Your CMS may have particular settings or options that would make this approach inappropriate.

    Reply

      On 27 September 2014, Daviesh wrote: Hyperlink chain icon

      I just retried and everything worked except the last part..I mean my css has stoped working along with java-script even when I used (). Thanks

      Reply

On 25 January 2016, Laurent wrote: Hyperlink chain icon

Hi !

Your .htaccess file extension work like a charm. Now, how is possible to hide a folder or subfolder whith your example ?

Thanks !

Reply

On 25 April 2018, Paulo wrote: Hyperlink chain icon

I want htaccess rewrite /book.php?id=1234 to /book/1234, how can I do this using your code?

Reply

Have Your Say

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.