June 14, 2016

How to create a broken link (404) page on Blogger blogs

As a blogger, you must have faced situations when a link given by you on a post went dead and you noticed it when you reviewed your links a few months later. Or when you updated an old post and gave it a new name, and earlier links to that post showed up a 404 error.

Well, if you didn't face such problems and you have not seen a 404 error page, click on the link given here:www.indiantopblogs.com/SEO.htm. You will be taken to a page that announced that such a page does not exist. 
 
There are many reasons for a 'Not Found' message, which is called 404 error in web parlance: wrong typing of the URL (as in the example above),
the linked page going dead because the page has been removed or moved, etc.

You as a blogger has no control over people typing your blog's URL wrong. What is embarrassing and  harmful when links given on your blog are broken or dead. You must check your blog's broken links often and correct them. In the linked post, we have discussed the issue of broken and dead links in detail. 

In the present post, we'd discuss how to make the broken link experience less painful for the visitor and therefore less harmful to your blog's reputation.

There is a standard 404 page provided on Wordpress and Blogger free blogging platforms. On Blogger, you can modify the page to your liking; however the free Wordpress.com does not allow that.

How to customize the 404 error page on Blogger


Do enter your blog's URL in a tab on your browser. Now, put something like /broken.htm after the URL as given here (www.indiantopblogs.com/broken.htm) and press ENTER. Now click on the wrong URL www.indiantopblogs.com/broken.htm given above. See the difference between the error pages you get in the two cases. In our case, you find an apology from us, followed by a link that takes the visitor to a page where we have listed all our posts by subject. We feel that the visitor who has by mistake got the 404 error will visit a page he would value.

How do we do that?

a. On your Blogger dashboard, go to the blog in question, go to Settings. Now, go to 'Search preferences'. Click on 'Custom Page Not Found' and you will get a text box that accepts HTML.



b. On a notepad, write down the best that you want to put there: It may be some text followed by a link to a search page, the homepage or a static page. You can also put an image. 

c. Copy-paste all the notepad text into the text box. The total text cab be up to 10,000 characters but do not clutter the box with too much text.

d. Decide which part of the content you'd make bold. Also decide what text you'd like to link to other resources. Choose only one or two such expressions, no more.

e. For giving link to the desired text, which will be the page you want people to visit in case of broken link, put that in the structure as given below:
 
<h3><a href="http://www.indiantopblogs.com">Best Indian Blogs</a></h3>

In place of Best Indian Blogs, give your blog's title or something else; in place of http://..., give the URL of the page intended to be linked. You can just put <h3> and </h3> at the beginning and end of the text you want to be highlighted. In general, do this around a good keyword or your blog's title. In this example, we have put these tags around the title with link. 
Save. If you do not like the boldness of the text, try <h4>, </h4> tags.

f. In case you want to put an image in addition to text,
put the image link in the following form wherever you want to place the image:

<img src="http://www.https://lh3.googleusercontent.com/k/j42/new.png...abracadabra.png">

Change http://etc... into the correct URL of the required image.  
All images you put on the Blogger blog are stored in Picasaweb albums and have URL something like this:  

https://lh3.googleusercontent.com/khukjjd#/jhgu65ldjjd42/new.png

A useful tip to put an image on Picasaweb and know its link is given here: (i) Go to http://picasaweb.google.com/, upload image from your computer, right-click on the image and copy image location. (ii) If the image is already on your blog, open that post, right-click on the image and then click 'image location' (Firefox) or 'image address' (Chrome) or 'copy' (IE, Edge).

g. Before you settle the 404 page, test it. On a new browser tab, type the wrong URL as done above and see the resulting page carefully. Correct the problems by again going to 'Settings'.