We have compiled before a list of about 500 ideas for a 404 error not found page because: It is as simple as that; 404 pages are crucial because they direct your lost visitors to a meaningful page with content from your website and a search bar and an attractive design so that you do not lose them if they misspelled one of your internal pages URL or clicked on a broken link.
However, in this post I am mentioning another very important benefit that you should make use of for your “404 Not found error page”.
Why don’t you know the “How” your visitors ended up on the “Not Found 404 error Page” ? or the “what” string did they use to reach this blocked end?
- The 404 URL Parameter
The URL contains something very useful. All the text that’s there after the slash of your domain should be pointing you to what it is the person was looking for.
Luckily, WordPress stores that information for you. The $wp_query->query_vars['name'] variable holds whatever was in there. It does do some replacing in there though, it replaces all weird entities with a dash (-). We’ll use this bit of information to spice up your 404 error page.
First of all, let’s check whether there’s a direct match for that var in a page name once you strip out all the things that people sometimes add to your URL erroneously. (If you read on there’s an adapted version of the Kubrick 404 page which you can use to update your own themes.)
$s = $wp_query->query_vars['name'];
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$s);
$posts = query_posts( array( 'post_type' => 'any', 'name' => $s) );
If that doesn’t deliver results, you’ll want to do a search for that word, to do that we’ll have to rip out the dashes in the name, and then do the search. As we’re going to re-use the $s variable further on, we’ll do that outside of the if statement to check whether the previous query delivered results:
$s = str_replace("-"," ",$s);
if (count($posts) == 0) {
$posts = query_posts(array( array('post_type' => 'any', 'name' => $s) );
}
Now we have an array with posts, at least, so let’s check that, and loop through it:
if (count($posts) > 0) {
echo "<p>Were you looking for <strong>one of the following</strong> posts
or pages?</p>";
echo "<ul>";
foreach ($posts as $post) {
echo '<li>';
echo '<a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a>';
echo '</li>';
}
echo "</ul>";
}
Here is an adapted version of the Kubrick 404 error page, which you can download here.
WordPress Smart 404 Plugin
There’s a plugin that does something similar to the above, called Smart 404. It chooses to redirect the visitor to the first result it gets.The 404 page referrer
Another bit of data the 404 provides is the referrer: someone linked to your page with a wrong URL, or is linking to a page that isn’t there anymore. So we’ve got one thing left to do:
There’s another plugin called 404 notifier, which can provide you with an RSS feed of the 404′s on your site,
You could use Yoast Google Analytics for WordPress plugin. It tracks the 404′s as 404.html (look for them in your content report).
Using Google Analytics has the added advantage that it saves the referrer, so you know which URL the visitor originated from. This allows you to not only redirect the URL to the correct place, but also to ask the site that referred the visitor to fix the URL.
Another great way to keep track of 404′s on your site is using Google Webmaster Tools. In the Diagnostics – Crawl Errors area of Webmaster Tools Google gives you a great overview of what 404′s it encountered on your site. Google Webmasters tools has a section called "Enhance 404 pages". If you've created a custom 404 page this allows you to embed a widget in your 404 page that helps your visitors find what they're looking for by providing suggestions based on the incorrect URL.
Example: Jamie receives the link www.example.com/activities/adventurecruise.html in an email message. Because of formatting due to a bad email client, the URL is truncated to www.example.com/activities/adventur. As a result it returns a 404 page.
With the 404 widget added, however, she could instead see the following:
With the 404 widget added, however, she could instead see the following:
In addition to attempting to correct the URL, the 404 widget also suggests the following, if available:
- a link to the parent subdirectory
- a sitemap webpage
- site search query suggestions and search box
How to add the widget?
Visit the "Enhance 404 pages" section in Webmaster Tools, which allows you to generate a JavaScript snippet. You can then copy and paste this into your custom 404 page's code. As always, don't forget to return a proper 404 code.
You can also change the way it looks by editing the CSS block included.
Important notes on the 404 error pages you need to know
- Internet Explorer will only show your custom 404 page if it’s larger than 512 bytes (hard to get smaller than that with WordPress).
- 404 is not only the name, it’s also the HTTP header that the page should send, if not, you might end up with 404 pages in the search engines indexes. You can easily check this with a HTTP header checker.
Reference:
