Grow your CSS skills. Land your dream job.

How to Redirect index.html to index.php

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    Time to get your phone number changed :) !

  2. Permalink to comment#

    Why does this sound so familiar? :P

  3. Permalink to comment#

    In the HTML method, you put hhtp instead of http, that was all!

    Good site by the way!

  4. Volkan Görgülü
    Permalink to comment#

    Hi Chris,

    I am experiencing the same problem in a more complex way that is I moved a website of my client to wordpress.

    And the old site had links like “http://www.beyaznokta.org.tr/Common.aspx?Menu=4&Page=NNN.aspx”

    Do you know a way to deal with these kind of links?

  5. @Rich: ah! You are right, I fixed it, thanks!

    @Volkan: It depends on what exactly you want those old links to link to. If you want to just link all of those to one particular location, you could replace that Common.asp file with:

    < %
    Response.Redirect "http://www.w3schools.com"
    %>

    If you need need anything more advanced than that, I’m no expert, but you could probably play with some ASP URL processing and see if you could write some conditional statements to get the directed where they need to go.

  6. As a quick tip, I recommend adding the following after your PHP header redirect:

    exit();

    That exits the script and doesn’t allow any other headers to affect the redirect. I’ve been bitten by this before!

  7. Thanks David, I’ll update the post so if people copy and paste from there they get the best version.

  8. Good useful tip that is required especially when using WordPress or something else…

  9. Dean
    Permalink to comment#

    If you’ve replaced index.html with index.php you should be setting up a 301 redirect in htaccess e.g.

    redirect 301 /index.html http://www.example.com/index.php

    which tells the search bots that this is a permanent move.

    This applies to all pages that have been replaced with different names – very common when moving from static to dynamic.

  10. Thanks, some very useful information redirecting html to php.

  11. Just to add a few things,firstly you should work out your www vs non-www with this

    # sort www v non-www canonical URL issues:
    RewriteCond %{HTTP_HOST} ^example.com
    RewriteRule (.*) http://www.example.com/$1 [R=301,L]

    then you can use this to 301 rewrite ALL .html to a .php

    # pass all .html request to .php equivalent files
    RewriteRule ^(.+)\.html$ http://www.examle.com/$1.php [R=301,L]

  12. melissa
    Permalink to comment#

    Thank you for this tip. You rock.

  13. I like your client say: I just clicked on our site and it’s not working!!, :p

    & really thanks for your tips, :D

  14. Steve
    Permalink to comment#

    A 301 redirect seems to be the recommended option for permanently moving the page, but I’m on a Windows server, which won’t recognize the .htaccess file. How can I achieve this on a Windows server?

  15. Permalink to comment#

    Thanks, i been looking for a 301 redirect code, the ones i made never work right, so thanks.

  16. Permalink to comment#

    Very handy htaccess codes, thanks!

  17. chriss
    Permalink to comment#

    thx – works fine

  18. Permalink to comment#

    Now that was easy, thanks you saved a lot of my time.

  19. Richard
    Permalink to comment#

    This site is awesome, looked everywhere for this 301 redirect info.

  20. Myles

    For a vcalendar install I found putting

    DirectoryIndex index.php index.html index.htm

    in the relevant directory made things work

    i.e. index.php was made the default index (index.html was still needed for the calendar to function)

    I understand this is a specific, and old, use case but perhaps this solution may be useful in other situations.

    Thank you for your site.

  21. shohid

    I am design use in HTML and CSS, but I don’t understand I can run locally my index.html file like as a local based website, basically I want to service local area connected about 300 computer user. Its a library, there is a digital book, list of category-wise book, magazine, annual report, research paper etc.

    Please How can I show now my local website. Its urgent for me

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".