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.

7 Comments

  1. Hurrah! At last I got a webpage from where I can actually take useful data concerning my study and knowledge.

    Cricket Betting Tips
    Today Match Prediction

    ReplyDelete
  2. WTC CBD NOIDA WTC CBD commercial office spaces at located in Noida.

    ReplyDelete
  3. Thank you for sharing your thoughts and knowledge on this topic. This is really helpful and informative, as this gave me more insight to create more ideas and solutions for my plan. I would love to see more updates from you.

    Internet Marketing Company

    ReplyDelete
  4. It was extremely interesting for me to read the post. Thank you for it. I like such topics and everything that is connected to them.

    digital marketing company in kolkata
    seo company in kolkata
    website design company in Kolkata

    ReplyDelete
  5. calculate contact form 7 is free plugin for calculate field between each other in contact form 7

    Popup message contact form 7 is free plugin for open popup after success and failed button

    ReplyDelete
  6. Okay then...

    What I'm going to tell you might sound really weird, and maybe even a little "strange"

    BUT what if you could simply hit "PLAY" to LISTEN to a short, "musical tone"...

    And suddenly bring MORE MONEY to your LIFE???

    What I'm talking about is hundreds... even thousands of dollars!

    Do you think it's too EASY??? Think it's IMPOSSIBLE??

    Well then, I've got news for you.

    Usually the largest blessings life has to offer are the SIMPLEST!

    Honestly, I will PROVE it to you by allowing you to PLAY a real-life "miracle money tone" I developed...

    YOU simply hit "PLAY" and watch money coming right into your life.. it starts right away..

    CLICK here to enjoy the mysterious "Miracle Wealth Building TONE" - as my gift to you!

    ReplyDelete

Post a comment

Previous Post Next Post