How to Add Proper Meta Tags to your Blogger Blog

Last Updated: March 4th, 2018

There has always been a big rivalry and arguments regarding which blogging platform is better between Google Blogger and the powerful CMS WordPress which there’s not really a final conclusion rather than if you want more exposure, more functions, control, flexibility then you opt for WordPress since Blogger is often regarded to as Online Diary by some WordPress users.

Meta Tags Blogger Blog

To be honest, one of the reasons WordPress is far better than Blogger is the flexibility and functions part. Most things can be done easily by installing a plugin, meaning you just have to focus on writing and updating the plugins after finding the perfect one for your blog which is not so in Blogger’s case.

Briefly, Meta tags are snippets of text that describe a page’s content i.e what the page is all about to search engines. Meta tags aren’t visible on the page itself but rather inside the source code and its major work is to tell search engines, social media, etc what to do, interpret, and display the web page on them.

Today, I will be showing to you how to add proper meta tags to your Google Blogger Blog template easily. This same result can be achieved by WordPress just by installing a plugin e.g Yoast SEO, Squirrelly, etc.

<!-- Meta Tags -->
<link hreflang='en' rel='alternate'/> //this show English as your language to search engines
<link expr:href='data:blog.url' rel='canonical'/> //helps prevent duplicate content
<title><data:blog.pageTitle/></title> //if user is on homepage, default title is shown

//Page not found - Error 404
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName   &quot;, &quot;   data:blog.pageTitle   &quot;, &quot;   data:blog.title' name='keywords'/>
</b:if></b:if>

//homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link expr:href='data:blog.homepageUrl   &quot;feeds/posts/default&quot;' expr:title='data:blog.title   &quot; - Atom&quot;' rel='alternate' type='application/atom xml'/>
<link expr:href='data:blog.homepageUrl   &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title   &quot; - RSS&quot;' rel='alternate' type='application/rss xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot;   data:blog.blogId   &quot;/posts/default&quot;' expr:title='data:blog.title   &quot; - Atom&quot;' rel='alternate' type='application/atom xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.homepageUrl   &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

<!--Google  Social Meta Tags -->
<link href='https://plus.google.com/ Brainslodge/posts' rel='publisher'/>
<link href='https://plus.google.com/ Brainslodge/about' rel='author'/>
<link href='https://plus.google.com/ Brainslodge' rel='me'/>


<!-- Facebook Open Graph and Twitter Cards -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<!-- Meta Tags for Post Description -->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/> //show post description, if any
<b:else/>
<meta content='General Hacking,  Bitcoin, Android, Programming, Technology, iOS, iPhone Tutorials, Tips and Tricks' property='og:description'/> //else show this description
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='Iyanu Victor' property='fb:admins'/>
<meta content='Your FB APP ID' property='fb:app_id'/>
<meta content='summary' name='twitter:card'/> 
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='TWITTER NAME' name='twitter:site'/>
<meta content='TWITTER NAME' name='twitter:creator'/>

This is an example of what your Meta Tag should look like inside your blogger template.

I’ll explain clearly the functions of each one. Till then, if you have any queries, use the contact form or comment box, I promise to be responsive as possible.

Useful links

Related Posts:

  • WhoGoHost Review – Best Web Hosting in Nigeria?
  • Social Medias Sharing Tools: AddThis vs SumoMe
  • Free web hosting with domain and cPanel 2016
  • 3 URL Shortners Everyone Should Know About
  • 3 Ways Fixed Header Content Can Improve Your Blog
  • Comment(s) for “How to Add Proper Meta Tags to your Blogger Blog”

    1. Thank you very useful information for me

    Leave a Reply

    Your email address will not be published. Required fields are marked *