Awesome Tips Series about Blogger
Why Create a Custom Not Found Page?
We create a custom “Page Not Found” to promote posts when users land on not existing pages, also we can maintain our own custom redirects in Git.
Why not Use Custom Redirects in Search Preferences
We can add custom redirect at Settings -> Search Preferences -> Custom Redirects. But when we reset template, our custom redirects and other changes would be lost. When this happens, we have to re-add all redirects manually.
This happened to me once. So instead add these redirects again (a lot of click and typing), we would like to maintain the redirects in code and commit it into Git.
How to Create a Custom “Page Not Found”? in Blogger
There are different choices: - We can At Settings -> Search Preferences -> Under “Errors and Redirections” click the option to “Edit” Custom Page Not Found - Or we can create a normal web page. The benefit of this approach is that we can get the analytics of the 404 page, how many times visited ect, so we can decide whether and how to optimize it.
Maintain Custom Redirects in Code and Git
The advantage of this approach is that we can easily add or remove redirects. - As I use Atom Editor and Markdown to write posts, so I add the other redirects in this Markdown page, but Command+/ to comment and hide them. - the source code of the post is in Github, I can easily put it back when the change is lost.
function redirectIfNeeded() {
var redirectMap = new Map();
redirectMap.set("/2018/06/mac-tips-and-tricks.html", "/2019/02/awesome-tips-about-mac.html");
var redirect = redirectMap.get(window.location.pathname);
if (redirect) {
window.location.pathname = redirect;
}
}
redirectIfNeeded();Redirect to Archives Page
Be default, if there is no custom redirect defined for the missing page, it will redirect to the archives page. As we want
<h3>Will jump to <a href="/p/archives.html">archives</a> after 10 seconds...</h3>
<script>
setTimeout(function(){window.location.pathname='/p/archives.html' }, 10000);
</script>Search the Missing Page in Google
We can create one link in the 404 page to help the user to search the missing page in Google. When the user clicks the search link: we will get the last part of the path and search it in Google.
The user may find the post where we forget to add the redirect or find similar posts: another opportunity to let user explore our website.
We can auto redirect the 404 page to Google search page by window.location=the_url, but we want to keep the user in our website.
Notice that we can’t do both: redirect to archives page and open a new page for the Google search by window.open(url, '_blank'): as the browser will block pop-up that are not caused by trusted events like user clicks.
<script>
function googleSearch() {
var fileName = redirectPath.split("/").slice(-1)[0];
if (fileName.endsWith(".html")) {
fileName = fileName.substr(0, fileName.length - ".html".length)
}
var googleUrl = "http://www.google.com/search?as_sitesearch=massivealgorithms.blogspot.com&as_oq=" + fileName.split('-').join(" ")
window.open(googleUrl, '_blank');
return false;
}
</script>
<h3><a href="#" target="_blank" onclick="googleSearch()">Click Here to Find the Lost Page in Google</a></h3>Promote Posts
We can promote popular posts if users land on wrong page (maybe the page is gone or user made a mistake). The code would be same as the post here: promote posts based on labels.
Also fix css and add the title: paste the above HTML code and add the following text before New Posts
<style>
.status-msg-body {
text-align: left
}
</style>
<br /><br /><br />
<h3>Sorry, the page you were looking for in this blog does not exist. </h3>
<h3>Start exploring here:</h3>- ex: /2019/opps
