TECH
Vol.6
Designer
Y.T.
Let’s create a custom 404 page
Aiming for a better website
A 404 (Not Found) page is a page that should not normally be displayed.
However, when users unexpectedly encounter it, wouldn’t a custom-designed 404 page improve the overall impression of the site?
As with the previous Vol.5 Favicon and Web Clip Icon implementation, this is something you should not forget to set up.
What is a 404 page in the first place?
The role of a 404 page
A 404 page is an error page displayed when a user tries to access a page that does not exist, such as through a broken link while browsing a website.
It is called a “404 page” because 404 is the three-digit number used to represent the server’s response code indicating that the requested resource could not be found.
Surprisingly often seen!? 404 page design
404 page design reference sites
This is a site that collects 404 page designs.
Why not use it as a reference for your design?
404design
Let’s implement an error page
Add the following to .htaccess.
There are two ways to implement this. First, we’ll cover the method using .htaccess.
Create an HTML file for the 404 page.
The file name can be anything; here we will use “404.html”.
Upload the “404.html” file to the same directory where “index.html” is located.
Next, create a file named “.htaccess”.
In that file, add the following:
ErrorDocument 404 /404.html
That’s it!
For those who find it difficult to create an HTML file
Let’s use Google Webmaster Tools
By simply pasting the 404 widget code provided by Google Webmaster Tools, you can add the following two features to your page:
- Display a site search box and search suggestions.
- Display suggested URLs for incorrect URLs.
You can add it by using the code below.
Place it inside the <body> tag.
<script type="text/javascript">
var GOOG_FIXURL_LANG = 'ja';
var GOOG_FIXURL_SITE = 'http://your-site-url'
</script>
<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
Google Webmaster Tools
Customize your 404 page
RECENT POSTS
Vol.203
What Is Design Management
Vol.202
Why Hiring No Longer Works— Redesigning Organizations and Decisions for an Uncertain Age
Vol.201
How to Choose a Branding Agency: 5 Criteria to Avoid Failure
Vol.200
Design Management: A Practical Guide for SMEs and Startups to Drive Real Results
Vol.199
How to Rebuild Brand Competitiveness: A Practical Guide to Brand Management for SMEs
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships
