The default 404 error page shown by Apache is not at all helpful for a user. Fortunately, apache allows us to use our own custom 404 error pages. Some people use this feature to redirect 404 errors to their site's homepage. But this is also not useful for a user or a search engine. Some provide custom error pages that are useful for their users, but does not provide the required 404 header which can make the search engines penalize you for duplicate content. Here is a 404 custom 404 error page that will satisfy both your users and search engines. It also includes Google's custom 404 search box code.
Save the following as 404.php in your document root
<?php
// Change this to your site url
$homeUrl = 'http://www.weberdev.com/';
// Add the 404 header to not confuse search engines
header("HTTP/1.0 404 Not Found");
$arPath = explode('/', $_SERVER['REQUEST_URI']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>404 Error - Page not found</title>
<meta http-equiv="refresh" content="10;url=<?php echo $homeUrl;?>" />
<style type="text/css">
*{margin:0px;padding:0px;}
body{background-color:#F9F9F9;color:#111;font: normal 95%/130% "Trebuchet MS", Verdana, Arial, sans-serif;margin:0px;padding:20px 0px;}
a {color:#6699CC;text-decoration:none;border-bottom: 1px solid #EEE;}
h1{color:#333;font:normal 1.7em Georgia, "Times New Roman", Times, serif;margin:0px;padding:0px;}
h2,h3{color: #6699cc;font: normal 1.25em Georgia, "Times New Roman", Times, serif;margin: 20px 0px;padding: 0px;}
ul{margin:10px 20px;}
li{list-style:disc;}
#wrapper{background-color:#FFFFFF;border:1px solid #DDDDDD;margin:auto;width:40em;}
#header {background:#D5D5D5;border-bottom:1px solid #DDD;color:#888;font-size:85%;margin:0px;padding:3px 10px;}
#body{padding:10px;}
#goog-wm { }
#goog-wm h3.closest-match { }
#goog-wm h3.closest-match a { }
#goog-wm h3.other-things { }
#goog-wm ul li { }
#goog-wm li.search-goog { display: block; }
.comment{color:#999;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<a style="text-transform:uppercase;" href="<?php echo $homeUrl;?>"><?php echo str_replace(array('http://', 'www.', '/'), '', $homeUrl);?></a> → Page not found</div>
<div id="body">
<h1>[404] Page not found</h1>
<p> </p>
<p>Sorry, the file <code class="comment"><?php echo $_SERVER['REQUEST_URI'];?></code> was not found on this server.</p>
<p>Please ensure that you have entered the url correctly. If you did so, then probably the file was removed from the server.</p>
<p>Please choose one of the actions from below, or you will be redirected to our homepage in 10 seconds.</p>
<ul>
<li><a href="<?php echo $homeUrl;?>">Click here to go to the homepage.</a></li>
<li><a href="javascript:history.back();">Click here to go back.</a></li>
<li><a href="<?php echo $homeUrl;?>/contact.php">Click here to contact us.</a></li>
</ul>
<div id="leftContent">
<script type="text/javascript">
var GOOG_FIXURL_LANG = 'en';
var GOOG_FIXURL_SITE = '<?php echo $homeUrl;?>';
</script>
<script type="text/javascript"
src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</div>
</div>
</div>
</body>
</html>
Create a file .htaccess in your document root (if one does not already exist). Add the following line to the end of the file
ErrorDocument 404 /404.php
That is it. Now you have a search engine friendly and at the same time user friendly 404 error page.
