How to Redirect index.html to index.php

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Just this past week I finished up with a redesign project for a client and took the project live. Later on in the afternoon the day of the launch, the client called me:

Client: I just clicked on our site and it’s not working!!
Me: Really? That’s strange. The site seems to be up and working just fine for me. Let’s see if we can track down the problem.
Client: I just clicked on our site and it’s not working!!
Me: OK, I hear you. What do you mean “clicked on our site”?
Client: I have a button on my desktop that I click to go to our site and when I click it I get an error page not our site.
Me: Hmmm… Can you tell me exactly what it says in your web browser, in the place where the web address goes?
Client: http://clients-website.com/index.html
Me: Ah ha! I see, your bookmark isn’t working because it specifically points to an HTML file that doesn’t exist anymore, the new homepage is technically index.php not index.html. Don’t fix your bookmark though, some of your visitors might be experiencing the same problem, so I’ll get it fixed so that your bookmark will work.
Client: I just clicked on our site and it’s not working!!
Me: OK. Seriously, take a few deep breaths and give me 10 minutes.

Redirecting index.html to index.php

If users have their browsers set to default to showing full URL’s, their bookmarks will reflect this full URL. That means if you change file extensions on them, like in this case of moving from html to php, it will break their bookmark. Not good. Fortunately we can fix this.

My first though was “too bad this isn’t PHP already”, because redirects in PHP are very easy:

<?php
  header( 'Location: http://www.redirect-location.com' );
  exit();
?>

That is literally all you need to put in the the PHP file to make the redirect work. No matter though, redirects with HTML are similarly easy, but you do need to create a regular HTML structured file, and then put this meta statement into the head:

<meta http-equiv="refresh" content="1;url=http://www.redirect-location.com">

The “1” stands for “one second delay”, which you can make any integer. This is an acceptable solution and works just fine, but I would argue it’s not the best solution. For one thing, you need to keep that HTML file around, muddying up your directory and staring you in the face every time you FTP in. There is a better way…

.htaccess ReWrite

Just add this rule to the .htaccess file and the redirect will happen server-side real quick and easy like.

RewriteEngine on
RewriteRule index\.html index.php [NC,R]

UPDATE: from Malcolm New – apparently the above will match any filename like whateverindex.html, and this code below prevents that.

RewriteRule ^index\.htm$ index.php [NC,R]

ANOTHER UPDATE: from Jessi Hance –

I had to add the L flag to tell the server to stop processing rewrite rules. I also found that I needed to put the rule at the top of my .htaccess file, above the WordPress-generated rules.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html?$ / [NC,R,L]

 

Me: OK, everything is fixed now and your bookmark should be working just fine.
Client: Great. Now just give me a day or two to find something to be freaked out about again and call you in an irrational frenzy.
Me: Sounds good.