The first question arises why to write a “404 – Not Found” error page?
As in an active website our web blog multiple URLs get created and removed everyday. People use to share these URLs over internet and once somebody click on a URL which got removed from your website then the server will not be able to find it and show an error message with error code 404.
The 404 Not found page looks like below:
Let’s have a look on above error, first of all it doesn’t look good. The page is raw which just shows that it can’t find something on website. Sometimes, it gives an idea to the visitor that website isn’t functional properly.
Another problem is that it is revealing the server type, server version, os type, SSL version and the server technology used for developing website. A lot of information directly accessible just by hitting the page. This information is not required on 404 not found page so websites developers and web server administrators usually create a custom 404 error page and set them on there server configuration or website configuration.
While most apache servers used for WordPress hosting patch their servers to hide server information on error pages and also replace their default 404 error page with a nice looking webpage, it still show that your website can’t do much with the request, than just showing a bettor looking 404 error message.
How can we improve our 404 Not Found error page?
You can find many examples of good 404 not found pages over internet. They are visually attractive and at some way useful to the visitor. The purpose of this blog is to make your 404 page more useful to the visitor of your website:
How I had setup 404 page for this blog:
I found a plugin “404page – your smart custom 404 error page” by Peter Raschendorfer which can set any Page as a 404 not found page.
After installing and activating the plugin click on plugin settings and select any page as your 404 error page. This way we can redirect the not found url to either recent post page, or about us page or a search page.
Creating a page specifically for 404 error will be better option.
Ideas for improved 404 page:
I have visited some websites and searched for better 404 web pages over internet. Here is what people are doing:
- Creating a good looking 404 error page.
- Acknowledging that the page doesn’t exist on 404 error page.
- Feeling sorry for page not found.
- Telling the visitor that something unexpected happened.
- Providing links to Home page or Product page.
- Provide a search bar to search the website or webblog.
- Listing recent posts on the 404 error page.
Nothing is wrong with above 404 pages, these are all good ways to handle 404 not found, but in my opinion this can be improved.
What more can we do with the request to our website?
We can always analyse the request and try to understand what people are looking for through URL text if our website is having meaningful URLs. A meaningful URL for human is something which shows what the page contains or what action it performs. Luckily, WordPress URL are usually meaningful. For example, my blog shows category and post name in the URL:
https://ankitgupta.in/web-development/writing-a-404-not-found-error-page-for-wordpress
We can easily understand that the user clicked on a link to go far something related to web development with 404 error page on WordPress blog information. We don’t have the page available on this link and now a 404 not found page will be visible.
How I handled 404 not found request:
I fetched the post name to find the keywords for which the visitor accessed my website in the 404 web page using javascript. I used custom HTML block in block view to write javascript in script tag.
url_arr = window.location.href.split('/',-1);
keyword = url_arr[url_arr.length-1];
if(keyword.length == 0){
keyword = url_arr[url_arr.length-2];
}
keyword = keyword.replace(/[^a-zA-Z ]/g, " ")
Following is the result of above javascript code for this page:
Then I searched my blog for the posts using wordpress REST api and showed matching result on the page.
For that purpose I created a javascript function which updated certain element on the webpage:
<div id="srch_result" name="srch_result"></div>
<script>
function loadDoc(blog_url,result_div_id) {
var max_result = 5;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
res_obj = JSON.parse(this.responseText);
res_html = "";
for(i = 0 ;i < res_obj.length; i++){
res_html += "<a target='_blank' href='"+res_obj[i].url+"'>"+res_obj[i].title+"</a><br/>"
if(i==max_result){break};
}
document.getElementById(result_div_id).innerHTML = res_html
}
};
xhttp.open("GET", blog_url + "/wp-json/wp/v2/search?search="+keyword, true);
xhttp.send();
}
loadDoc("https://ankitgupta.in","srch_result");
</script>
Above code result in following element which lists the WordPress blogs from my website:
Similarly one can use the same function to get searches from fellow bloggers websites, so that if a content isn’t available on your blog the visiter can find it from the network you know. Like I have referred two other blogs on my 404 web page from my network:
Following is the code to get post list from blog of Murari Nayak :
<div id='murarinayak_com_srch_result'></div>
<script>
/* Modifying keyword to fetch some data, as no matching post on 404 not found. */
keyword = "angular javascript"
loadDoc("https://murarinayak.com/blog","murarinayak_com_srch_result");
</script>
gives following search results:
Following is the code to get post list from blog of Manish Shrivastava :
<div id='manishshrivastava_com_srch_result'></div>
<script>
/* Modifying keyword to fetch some data, as no matching post on 404 not found*/
keyword = "ruby on rails"
loadDoc("https://manishshrivastava.com/blog","manishshrivastava_com_srch_result");
</script>
gives following search results:
