Add Valid Open Graph Meta Tags to Blogger (with Images)
The Open Graph tags were the social media meta tags for Facebook. These tags help you to make your blog post a rich object in the social media world. In short, when someone shares your blog post, the shared item looks better on Facebook. It works as the Twitter card for twitter works.

This is more likely to get clicked and shared by users, so if you want to set up Facebook's open graph social media meta tags protocol to your blogger just follow the given step by step instructions with images.

Those users who get a wrong image (or a wrench IMG) on sharing the post on Facebook should also follow the given steps.

To instruct Facebook and many other services what to show in a share or preview on the Newsfeed, you need to specify Open Graph meta tags. If Open Graph tags aren’t on the page when sharing, an undesirable image or title may appear.

Additionally, Smart Layers uses Open Graph meta tags to determine how to display links to your related posts, and to specify which content is shared from your page.

How To Add Valid Open Graph Tags In Blogger (with Images).

To add Open Graph tags to your page, you will need to be comfortable with editing your Blogger Template.It is also recommended that you create a backup of your template before making any changes.

To get started, click on Template > Edit HTML within the Blogger menu. From there, you will need to add Facebook’s XML namespace to your page’s initial HTML tag. By default, there will be other namespaces already included, so you will just need to add “xmlns:og='http://ogp.me/ns#'” to the end. Here’s an example of how the HTML tag may look after you’re finished:


<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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#'>


After the namespace has been added, the actual Open Graph meta tags will need to be added to the template. To do this, search for “</head>” within the template (CTRL+F for Windows users and Command+F for Mac users).  From here, it’s just a matter of copying the following snippet of code just before the </head> tag.


<!-- Allbloggingmag Valid Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Allbloggingmag Valid Open Graph Meta Tags END -->

This will generate Open Graph meta tags for title, description, url, and image (if one exists in the post). If additional Open Graph tags are needed, we recommend that you take a look at the Open Graph Protocol page for more information.

Now, your shared post on Facebook will become a rich object with beautiful appearance. You can also setup Twitter card in the same way. If you have any issue use the Facebook open graph, Use this Facebook Debugging tool or comment below.


Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.