Blogger, Blogger Hack, Blogger Tutorials

Designing Blogger Template : Adding Meta Tags

1 106
Design Blogger Template : Adding Meta Tags

WordPress users have many powerful plugins such as “All in one Seo” and “Yoast Seo plugin” for adding custom meta descriptions to each and every post/page. Again blogger doesn’t provide a plugin platform or custom fields support to add meta description and tags. Though these days in seo meta keywords and descriptions are given less importance after the Google Penguin update, Still its better to provide proper description and keywords for the posts and home page to prevent Search engines from creating their own dummy text from content. So here is the second part of Designing blogger template, which deals with Adding meta keywords and descriptions.

What are Meta Tags?

HTML meta tags are officially page data tags that lie between the open and closing head tags in the HTML code of a document.

The text in these tags is not displayed, but parsable and tells the browsers (or other web services) specific information about the page. Simply, it “explains” the page so a browser can understand it.

Here’s a code example of meta tags:

<head>
<title>It's Not a Meta Tag, but required anyway</title>
<meta name="description" content="Awesome Description Here">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>

Title tag

Although the title tag appears in the head block of the page, it isn’t actually a meta tag. According to W3C, The title tag is a required page “element” and Meta tags are optional page descriptors.

I have already mentioned about adding title tags in my last post : “Designing Blogger Template : SEO Optimized Title Tag

The Description Meta Tag

The description tag tells the search engines a brief description about the page. This is how the description meta tag will be like.

<meta name="description" content="Awesome Description Here">

Ideally, your description should be no longer than 155 characters (including spaces). However, check the search engine results page (SERP) of choice to confirm this. Some are longer and some are shorter. This is only a rule of thumb, not a definite “best practice” anymore.The “Description” tells the search engine what your page or site is about: For the search engine to understand what your page is about, you need to write a good description. However When Google’s algorithm decides a description is badly written or inaccurate, it will replace that description with its own version of what is on the page. The “Description” helps with click through rates to your site: Writing a good description not only helps keep Google from rewriting it, but also helps you get good more people clicking through to your site. And also “Description” helps with site rankings.

The Keywords Meta Tag

A long time ago, the “keywords” meta tag was a critical element for early search engines. Much like the dinosaurs, this tag is a fossil from ancient search engine times. The only search engine that looks at the keywords anymore is Microsoft’s Bing – and they use it to help detect spam. To avoid hurting your site, your best option is to never add this tag.

Other Meta Tags

There are many other meta tags, but none are really considered useful nowadays. Many of the tags that we used did things like:

Told the spider when to come back

<meta name="revisit-after" content="30 days">

Told the browser the distribution

<meta name="distribution" content="web">

Told the page to refresh

<meta http-equiv="refresh" content="30">

Told the page to redirect/refresh

<meta http-equiv="refresh" content="x_seconds; url=https://smashingtips.com">

We don’t use these anymore, either because there are better ways (such as schema tagging or server side methods) or because the engines they used to work on are no longer in existence or Google has explicitly told us they are not great ideas (such as redirects at the page level). Anyhow for blogger blogs, we still need to use these meta tags.

Robots Meta Tag

The robots tag is still one of the most important tags. Not so much for the proper implementation, but the improper.

The robots meta tag lets you specify that a particular page should not be indexed by a search engine or if you do or do not want links on the page followed.

Believe it or not, it is still common for a site to be deindexed because someone accidentally added a noindex tag to the entire site. Understanding this tag is vitally important.

Here are the four implementations of the Robots Meta Tag and what they mean.

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

This means: “Do not Index this page. Do not follow the links on the page.” Your page will drop OUT of the search index AND your links to other pages will not be followed. This will break the link path on your site from this page to other pages.

This tag is most often used when a site is in development. A developer will noindex/nofollow the pages of the site to keep them from being picked up by the search engines, then forget to remove the tag. When launching your new website, do not trust it has been removed. DOUBLE CHECK!

<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">

This means: “Do Index this page. Do not follow the links on the page.” Your page WILL be in the index AND your links to other pages will not be followed. This will break the link path on your site from this page to other pages.

<META NAME="ROBOTS" CONTENT="NOINDEX, FOLLOW">

This means: “Do not Index this page. Do follow the links on the page.” Your page will drop OUT of the index BUT your links to other pages will be followed. This will NOT break the link path on your site from this page to other pages.

<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">

This means: “Do Index this page. Do follow the links on the page.” This means your page WILL be in the index AND your links to other pages will be followed. This will NOT break the link path on your site from this page to other pages.

The Charset Tag

Finally, all sites must validate charset. In the U.S., that is the UTF-8 tag. Just make sure this is on your page if you’re delivering HTML using English characters.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Adding Meta Keywords and Descriptions – Blogger Users

Hope i have given enough information about the meta tags and their usage. Now let us see how to add those meta tags to our blogger templates.

  • Login to your Blogger account
  • Go to Design tab under your Blog
  • Navigate to EDIT HTML page

The general meta tags such as Content type, Robots meta tag can be added in the head section anywhere as they are global in nature. Now let’s just focus on adding the description.

Under the

<head>

you will find a similar code , if not just add it from the below step.

<meta name="description" content="Awesome Description Here">

Now to add custom meta description to your home page alone, add the following code:

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <title> ( Include important keywords here or just remove this text along with braces to display the title ) <data:blog.title/> </title>
<meta name="description" content="Add your Awesome Description Here">
 </b:if>
Adding meta description to particular post

To add custom meta description for a particular post or page or labels page, then add the below code to your head section. And also Remember change the url.

<b:if cond='data:blog.url == &quot;https://smashingtips.com/blogger-meta-tags-description&quot;'>
<meta name="description" content="Add your Awesome Description Here for this particular post">
</b:if>
Final Words

As i mentioned before, i have only mentioned about adding the meta description to home page and individual post. You can use other meta tags such as Robots index tag and redirect tags to redirect a particular page or to block search engines from indexing a particular post. If you want any other customization, feel free to mention about it in comments. I will guide you on that.

P.S : Next Design Tutorial will be on Coding header.

About the author / 

Related Posts

1 Comment

  1. Palani June 8, 2012 at 3:40 pm - 

    Thank u for the information dude

Popular

Editor’s Pick

  • Show only post titles in Labels page

    Hope you might have noticed that few blogger users are using custom layout for Home Page , Post Pages, Labels Page and Archives Page. Though I will write about having custom Layout in your blog later , In this post I will explain how to show only post titles in labels page and Archives page….

  • 25 Useful Tools for Registering and Monitoring Domain Name

    Anything from a company to products, websites to blogs require a good name to have a good impression at the audience. Getting a good name for the site can be really difficult as most of the names are already taken by some one else. This case is especially prominent in the area of website’s domain…

  • Having Custom CSS in Pagination hack

    Page Navigation hack for Blogger replaces the default older posts and Newer Posts with Numbered page link just like WordPress. If you want to implement this hack in your blogger Blog then please visit this posts. You can add this hack in two methods , 1. By Editing Blogger template 2. Adding As a Widget…

  • 9gag Clone Blogger Theme

    Yo Fellas! Hope you are having a great time.I have been busy with server migration and web design works lately. At last i have got some time to write a quick post. In this post, I am looking to distribute my another Blogger template called “9Gag Clone”. Yes, as the name suggests its a 9gag.com…

  • 45+ Surreal Infrared photography Inspirations and Tips

    In Infrared Photography the image sensor used is highly sensitive to infrared wavelengths of light. We all know that white light is composed of several bands of colours known as spectrum and the wavelengths ranging between 750nm to about 1200 nm, falls on infrared (IR) band. The spectrum used is in this technique is termed…