Skip to content

Hide file extensions, add trailing slash with .htaccess

G3rd July 2011

C9 Comments

TApache

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”

  • Written by Tobi on 29 March 2012:

    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?

  • Written by Adam Dimech on 29 March 2012:

    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.

  • Written by Rachel on 5 June 2013:

    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?

  • Written by Daviesh on 26 September 2014:

    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

    • Written by Adam Dimech on 26 September 2014:

      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.

      • Written by Daviesh on 27 September 2014:

        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

  • Written by Laurent on 25 January 2016:

    Hi !

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

    Thanks !

  • Written by Paulo on 25 April 2018:

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

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.