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 == "https://smashingtips.com/blogger-meta-tags-description"'> <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.
Popular
Editor’s Pick
-
April 4, 2023 Master the Art of Object Destructuring: Boost Your JavaScript Skills Today!
JavaScript destructuring is a powerful feature that allows developers to extract values from arrays and objects, and assign them to variables in a more concise and readable way. By using destructuring, you can easily access specific values from complex data structures, such as nested objects or arrays, without having to write lengthy code to traverse…
-
August 29, 2012 35+ Must Have Apps to Increase Productivity in Ubuntu
Once you have started your way through linux, you might come across numerous applications which are being developed and released everyday. You might me interested in some and you might not.So, you arrive to an ultimate question “What are the apps that will increase my productivity?. Well, the answer is in this article which consists…
-
May 3, 2023 Mastering React Context API in 2023: Best Practices and Examples
React Context API is a feature in React that provides a way to share data between components without passing the props down manually at every level. It allows you to manage global states in your application and avoid prop drilling. Mastering React Context API in 2023 is essential for building scalable and efficient applications. It…
-
June 1, 2010 40+ best online coloring tools for graphic designers
If you are a web designer or dealing with some graphic design project then you will need some coloring tools for getting color hints from ready made color templates from professional designers. There are lots of Online color tools, but it will take time to search them all via Google. So i have tried to…
-
November 23, 2012 How to set up navigation menus
Navigation is certainly a very important part in web design, especially if we keep in mind that the navigation of a page is there to orient and guide the user. Navigation is a key element of any website. With the help of navigation menu, the user gets from section to section, and to different contents….
1 Comment
Thank u for the information dude