How to Useful and Creative 404 Pages with wordpress

How to Seo friendly and Creative 404 Pages with wordpress

Tutto quello che avreste voluto sapere su come creare una pagina 404 bellissima e funzionale e non avete mai osato chiedere, oggi ve lo spieghiamo noi di WebAir!

- come cambiarla

- come perfezzionarla

- come renderla bellissima

-come prepararla per google e molto altro, passo dopo passo…

Open your 404.php from the current theme directory

Default 404 wordpress page

<?php get_header(); ?>

<div id=”content” class=”narrowcolumn”>

<h2 class=”center”><?php _e(’Error 404 – Not Found’, ‘kubrick’); ?></h2>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

SEO Change > H2 in H3 (H2 it’s used as the website description, H3 for the paragraph title)

<?php get_header(); ?>

<div id=”content” class=”narrowcolumn”>

<h3>Error 404 – Not Found</h3>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Creative Image in 404 wordpress page

<?php get_header(); ?>

<div id=”content” class=”narrowcolumn”>

<h3>Error 404 – Not Found</h3>
<div style=”float: left;”>
<img src=”/images/assenza-del-web.jpg” alt=”404 Not Found” title=”404 Not Found” name=”404-Not-Found” /> //remember: no space in the name tag ( http://www.w3.org/TR/html401/struct/links.html )

</div>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

WebAir’s 404 (comic) Image

webair 404

webair 404

From ufficial WebAir slogan “L’essenza del web” (the essence of the web) to “L’assenza del Web” (the absence of the web) :D

404 page “Google Ready” version

<?php ob_start(); ?>
<?php header(”HTTP/1.1 404 Not Found”); ?>
<?php header(”Status: 404 Not Found”); ?>

<?php get_header(); ?>

<div id=”content” lass=”narrowcolumn”>

<h3>Error 404 – Not Found</h3>

<div style=”float: left;”>
<img src=”/images/assenza-del-web.jpg” alt=”404 Not Found” title=”404 Not Found” name=”404-Not-Found” />
</div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Info about <?php ob_start(); ?> > http://it2.php.net/ob_start

Friendly Messages + Creative Image

<?php ob_start(); ?>
<?php header(”HTTP/1.1 404 Not Found”); ?>
<?php header(”Status: 404 Not Found”); ?>

<?php get_header(); ?>

<div id=”content” lass=”narrowcolumn”>

<h3>Error 404 – Not Found</h3>

<div style=”float: left;”>
<img src=”/images/assenza-del-web.jpg” alt=”404 Not Found” title=”404 Not Found” name=”404-Not-Found” /><br />

“Oops, Error 404, page not found! Please visit the <a
title=”WebAir” href=”http://webair.it/”>Home
Page</a>. Thanks”

</div>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Google 404 Optimizer

One of the Google webmaster tools it’s the code to help user when they’re in 404 page.

<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'it'; //or your website language
  var GOOG_FIXURL_SITE = 'http://www.webair.it/'; //insert here your url
</script>
<script type="text/javascript"
    src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>

To personalize the google script > http://www.google.com/support/webmasters/bin/answer.py?answer=100044&hl=it

Edit the .htaccess file

add the line

ErrorDocument 404 /wordpress/index.php?error=404

remember: insert the exact direcotry!

Save and Test your 404 page!

WebAir 404 Page > http://www.webair.it/blog/404.php

Creative 404 Showcases

http://mundofox.com/404

http://mundofox.com/404

http://www.project-euh.com/404/?

http://www.project-euh.com/404/?

http://www.twitter.com/404

http://www.twitter.com/404

http://css-tricks.com/0404

http://css-tricks.com/0404

http://www.dawdle.com/404

http://www.dawdle.com/404

http://www.tele2.no/sdfjkskfsdf

http://www.tele2.no/sdfjkskfsdf

Resource:

The perfect 404

10 Creative 404 Pages

404 Error Pages, One More Time

The 100 most funny and unusual 404 error pages

49 Nice And Creative Error 404 Pages

Correlated Articles