Optimization with HTML Meta tags is the most important to make your Blogger SEO friendly.
You can’t talk to Search Engine about your blog any without adding HTML Meta tags that which type page you want and don’t want to index, crawl.
Google recommends using Meta tags because it can understand and using Meta tag helps to provide information about the site.

Indexing and crawling aren’t the main purposes, to familiar with your blog, content, authorization; to show snippets of data of your blog on the search engine, social site etc are done by meta tags.

HTML Meta Tags - Make Blogger SEO Friendly

This article will help you to the PROPER use of HTML Meta Tags for your Blogger blog STEP-by-STEP.

1. Open Graph Protocol (OGP) Meta Tags

To enable blog pages to become rich object on social site specially for Facebook, you have to install OGP for your blog.

To install, follow the instructions.

1(A) Replace your <html....> tag with

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

1(B). Replace your <head...> tag with

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='PUT URL OF YOUR BLOG LOGO HERE' property='og:image'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:if cond='data:blog.pageType == "index"'>
<meta content='Put Short Description of Your Blog.' name='description' property='og:description'/>
<b:include data='blog' name='all-head-content'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='Your Name' name='Author'/>
<meta content='general' name='rating'/>
<meta content='your email' name='email'/>
<meta content='en_US' property='og:locale'/>

3. Verification Meta Tags

To get the better result from the search engine, you must connect your website with Google, Yahoo/Bing, Yandex Webmaster Tool. To verify you have to put verification code provided by them with meta tags on your blog.
Learn –

Put the following meta tags just after title tags. Similarly step 4,5 also.

<meta content='Verification Code' name='google-site-verification'/>
<meta content='Verification Code' name='yandex-verification'/>
<meta content='Pinterest Verification Code' name='p:domain_verify'/>
<meta content='Bing Verification Code' name='msvalidate.01'/>

4. View Port Meta Tags

To enable your blog mobile supported, you need to add viewport meta tags.

<meta content='width=device-width, initial-scale=1' name='viewport'/>

5. Social Site Meta Tags

<meta content='Facebook App ID' property='fb:app_id'/>
<meta content='Your Profile ID in Digit' property='fb:admins'/>
<link href='https://plus.google.com/+YOUR USER NAME/posts' rel='publisher'/>
<link href='https://plus.google.com/+YOUR USER NAME/about' rel='author'/>
<link href='https://plus.google.com/+YOUR USER NAME' rel='me'/>

6. Twitter Card and Pinterest Rich Pin Card Meta Tags

What is the Twitter card?
The Twitter card allows full-width image, Post Title, the short snippet of sharing Post’s URL. Without adding meta tags for the Twitter card on your Blog, it doesn’t show like below.

— ComProMath (@compromath) July 15, 2017

Similarly, Pinterest Rich Pin allows like Twitter Card when pin.

To enable those, find for uncustomized-post-template and hit Enter. You will get twice. Stop at the second and you will see a div tag or article tag with this attribute. Put the following code just after this tag.

<!-- Twitter Card Tags -->
<meta content='@compromath' name='twitter:site'/>
<meta content='@Elliyas_Ahmed' name='twitter:creator'/>
<b:if cond='data:post.firstImageUrl'>
 <meta content='summary_large_image' name='twitter:card'/> <!-- summary_large_image or any other your card types -->
 <meta expr:content='data:post.firstImageUrl' name='twitter:image'/> 
 <meta content='summary' name='twitter:card'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>
<!-- /Twitter Card Tags -->
<!-- Pinterest Rich Pins Tags -->
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
<!-- /Pinterest Rich Pins Tags -->

7. Indexing Meta Tags for Robots

You can control indexing, noindexing, following, nofollowing, revisit etc by search engine bot on your blog by using meta tags. Put the followings just after <head> tag.

*** Remarks: Be alert using the indexing meta tags. Don’t make conflict this with robots.txt setting. Use the same setting on robots.txt file.

<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>

8. Check Meta Tags Validation Online

Now check the validation of HTML Meta tags for your blog.

Facebook Object Debugger: You can check Facebook snippet of your Blog Post’s URL.

Put your post URL and observe the result. If you have no problem, you will see no warning or error. If you have, solve according to instructions.

Twitter Card Validator: Similarly put your post URL and observe the result.

If you do successfully, you will see the following resutls:

*.yourdomain.com is whitelisted for summary_large_image card
INFO:  Page fetched successfully
INFO:  31 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

Learn more about the Twitter card.

Rich Pin Validator: Check your Rich Pin validation from here.

I hope you have enjoyed HTML Meta Tags for your Blogger blog.

About The Author


  • Write a Reply or Comment

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