Guide to 404 Pages with ExpressionEngine

Posted on 16 February 2011 | by Ryan Battles

A 404 Error, which simply means “Page not Found”, is sent from the server whenever a user types in an incorrect address for a particular site.  This is not to be confused with a “Server not found” error, which occurs when the website as a whole cannot be reached (or doesn’t exist).  In order to be effective, a 404 error page must do the following:

• Reassure visitors that they reached the correct site
• Explain to the users why they are there
• Help them find what they are looking for

In ExpressionEngine, if someone types in an incorrect page address, by default they are sent to the homepage.  If they have typed in a proper template group name, but an invalid URL segment, they may see a working page and not know that they typed in an invalid URL.

For example, I have a template group on this site called “about”.  Within the “about” template group, you are able to access information about various services that I offer, such as “ExpressionEngine Development”.  This page is located at http://joviawebstudio.com/about/expressionengine_development/.  Before I modified my setup, someone could type in http://joviawebstudio.com/about/toilet_cleaning/, and a page would have come up, most likely the last service that I published into the system.  The user would have no idea that their URL was not what I intended that page to be.  This is not helpful for their experience, or my search engine rankings :)

Create a 404 Page & Set Your Template Preferences

If you haven’t already, you need to create a 404 error page template somewhere in your system.  It doesn’t have to be anything fancy just yet, simply a template that will be designated for 404 error messages.  In my examples, I am using a template titled “404” in the “pages” template group.

In the control panel > template manager, click on the tab for “Global Template Preferences”, you need to set the “Enable Strict URLs” setting to “yes”, and set your template for your 404 error page.

404 Case 1: Mistyped URLs

The first thing you need to do is have a system for setting up your site that is always mindful of mistyped URLs.  For every page that is a single entry page (has a limit=“1”), like a blog post page or services page, make sure that your channel entries loop contains the “require_entry=‘yes’” parameter:

This will only give a result if a specific entry url title is found within the segments of the url.  Once you have that set up, you need to have an error handler in there to catch times where there is no entry for that url title.  This can be done with the “if no_results” conditional, and using ExpressionEngine’s special “{redirect=“404”}” tag.  This will automatically embed the 404 template that you designated in template preferences.

For the above example, the visitor would see the URL that they typed in the address bar, but the page’s content would be that of your 404 error page.  Another method would be to enable PHP in the template (parsed upon output) and force a 301 redirect to the actual 404 page, like so:

Whichever method you choose is up to you.  Personally, in this case I believe that the former is the better choice, as it allows the user to see what URL they have typed incorrectly, and technically, the page isn’t found, it wasn’t once there and then moved, which is the technical case for a 301 redirect.

404 Case 2: Additional URL Segments

Note: credit for the addition of this statement goes to Darren Vlacich who pointed out via twitter (@CapeLinks) that this section was a hole in my initial writeup. Thanks Darren!

ExpressionEngine is designed to be flexible with additional URLs.  For example, without modification, I would be able to access this page at both:

http://joviawebstudio.com/blog/guide_to_404_pages_with_expressionengine/

and

http://joviawebstudio.com/blog/guide_to_404_pages_with_expressionengine/EXTRA/SEGMENTS/WORK/TOO/

Now, in order to prevent that from happening, you can add another conditional with your if no_results loop mentioned above.  Because I do not need any URL segments past segment 2, I will check for a segment 3 and give a 404:

As mentioned earlier, you could also use some PHP to force a 301 redirect.  However, instead of redirecting to the 404 page, you can simply force a redirect that removes the URL segments.  To do that, you must again enable PHP in template (parsed on output), then use this code pattern:

While the above code is still not technically correct, as the page is still supposed to be “not found” instead of “moved”, we are practicing a little bit of accessibility and providing meaningful content for those who have unnecessary URL segments.  Again, which method you choose is up to you, both are acceptable.

No matter which method you choose, just about every page in your EE arsenal needs to receive a similar type of treatment, otherwise people could technically bypass the 404 page by adding an extra URL segment.  You may not care about this, but someone could technically link to your site with a nefarious extra URL segment, and it would start showing up in Google search results.  So, every page needs something of this sort (change the segment number to whatever segment is no longer necessary):

OR

404 Case 3: URLs Outside of ExpressionEngine

For pages that are rendered on your website, but are outside of your ExpressionEngine installation, you want the 404 page to work for those too.  This has to be done by modifying your .htaccess file with the following line of code:

Make sure to change the “index.php/pages/404” path above to whatever you use for your system.

For the case where images, flash, and other misc files are not found, a simple 404 message should be returned, so you’ll also want to add this line to your .htaccess file:

You can read more about ExpressionEngine .htaccess modifications in an article on Devot-ee.com: Simple .htaccess for ExpressionEngine Sites, or you may prefer to install Leevi Graham’s excellent .htaccess generator for EE1 or EE2.

Craft an Effective 404 Page Template

Now that I am to this point, I realize it may have been more helpful to start with this, but I figured that many people reading this page aren’t as interested in the content of the 404 page as the actual coding nerdery that goes on behind it.

Basically, any effective 404 page will do the following:

• Reflect the branding of the parent site
• Have helpful information
• Have some personality

If that statistic is true about 7% of Internet page queries landing on 404 pages, you should give yours a litlte personality.  Here are some examples of creative 404 error pages:

• 404 Error Pages – Reloaded
• 35 Creative 404 Pages

Because your 404 page will be in ExpressionEngine, you will have the full templating engine at your disposal.  Feel free to load in a dynamic sitemap, or links to your most popular pages based off of tracking views.

Harden Up your Soft 404

Here’s a little-known gotcha, because we’ve created a 404 page within ExpressionEngine, in some cases, the page technically is not a “page not found”, it is found.  For example, with the technique of requiring entries and embedding the 404 page if no results are found, the server sends out a status 200, or “OK” instead of status 404, “page not found”.  This normally doesn’t matter to the end user, but to search engines and other robots, it means quite a bit.

The solution is simple here.  You must enable PHP for your 404 template, then place the following code at the top of your 404 page:

This changes your header that the server sends out with your document to a 404 status instead of a 200 status.  In order for this to work, you also cannot have caching enabled for your 404 page.  If you do have caching enabled, the cached version will be served with a status 200 no matter what header you put in your template via PHP.

Note for EE2: Erik Reagan from Focus Lab, LLC pointed out in the comments that for EE2, utilizing a CodeIgniter function to set the header with the Output class is a better option:

Bonus Treat: Rob Sanchez from Barrett Newton Interactive created a nice little plugin that will do the trick with some EE code:

Grab the http_header plugin here. (EE 2 Only).

It should be noted that you can’t actually see your header status in the browser, so an online tool is helpful here: Check Web Page Status Codes

Use Analytics and 301 Redirects

Because your 404 page is under your control, you can also use analytics to find out why the heck people got there in the first place.  If you use Google Analytics, just place your tracking code on the 404 page, and use their tools after a while to find out why people are getting there.

If you find that many errors are being caused by a common URL, for example, if everybody keeps typing in “/blogs/” instead of “/blog/”, or there is a link to your site somewhere out there that you cannot control, but know exactly what it is, you can use your .htaccess file to create a 301 redirect.

Here is an example 301 redirect that I use on my site to make a shorter url for my EE development page:

Conclusion

Implementing the above steps will both create a better experience with your site visitors, and also improve your search engine rankings.  Another tool that helps out greatly with 404 errors is Google Webmaster Tools.  There is a tab specifically designated for 404 errors, and will provide a nice list of links within your site that point to incorrect URLs.  Happy 404’ing!

P.S.  If you have a custom 404 page that you’d like to share, please leave a link to it in the comments.