Tricks And Tweaks: August 2015

How to set a custom page not found on blogger - and redirect it to your homepage

Blogger has the option to set a custom page not found message and redirect (if needed). For my personal blog I decided not to only add a small message whenever a user misspells any links (or if I delete older posts) but also to redirect them to my blog's homepage.

Access settings for "custom page not found"

Follow the below easy steps and you're good to go:
Access your blogger draft and go to "Search preferences". Under "Error and redirections" you'll see the "Custom Page Not Found" option > click on Edit.
Copy and paste the below code:

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>
</div> <h2 class="large-heading" style="text-align: center;">Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>

The user will be presented with the above message and he will be automatically redirected to your homepage - after a 5 seconds delay time. Feel free to change the code as you wish.

How to add HTML Meta tags - title, description and keywords - to your blog

Before explaining how to add Meta-tags to your blog, let us remember what these tags are all about. HTML Meta tags will not make you rank number 1 in 2 seconds, but they are a very important part since they help search engines and users to understand what your site's all about - if implemented correctly. Below is a small breakdown of the most important tags.

Title Tag
Even though the "Title-Tag" isn't actually a meta-tag, this tag is displaying the page title in the header of the browser window (or tabs) like in the example you see below:

The title tag is meant to be an accurate and concise description of a web-page's content. Keep it between 50-60 characters long.

Description tag
Represents a short description of the page's content, used also by search-engines to categorize your website pages. Meta descriptions are commonly used on search engine result pages (SERPs) to display preview snippets for a given page.

Write a good description, keep it between 150-160 characters long and above all, avoid duplicate descriptions.

Keywords tag
Couple of years ago, the keyword tag was one of the important elements - as with anything else, people abused it. These days relevance of keywords meta-tags is close to 0 so you can totally ignore this tag - most important: if you need/want to use it, do not use it in a "spammy" way.
Keyword tags represent short keywords separated by commas that are (were) used for search engines to accurately categorize a web-page.

The use 5 to 10 keywords should be enough. Do not use keywords that are not visible on the page (content) itself.

Language tag
The language attribute helps search engines to understand in what natural language your website content is written.

In order to add HTML tags to your blog template, access your blogger settings, go to Template > click on Edit HTML. Find the </head> section - you can search for it through CTRL+F.

After editing the below code, copy and paste it there:


<meta content='Your Blog Description' name='description'/>
<meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>
<meta content='Author Name' name='Author'/>
<meta content='Author Email Address' name='Email'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='Language Name' name='language'/>
<meta content='Country Name' name='country'/>
<meta content='blogger' name='generator'/>


Change the data marked in bold orange text to accurately fit your needs. Remember to save your template afterwards. Below is an example on how my blog uses the HTML Meta-tags: