Facebook Open Graph For Blogger

If you want to make your blogger post has a good appearance on facebook (when your post is shared), you just need to add/implement facebook open graph meta tags to your blog html code, and here we have provided the best facebook open graph meta tags.

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.

Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

Read Also : How To Add Twitter Summery Cards To Blogger Blog Posts

How To? 

Sign in to your Blogger Dashboard

In the left menu, click "Theme" >> "Edit HTML" (and wait for the html editor page to load completely).

Then use the CTRL+F to search the <head> tag code.

Below <head>, paste the following meta tag code

<!-- facebook open graph -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  <meta content='article' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  <b:elseif cond='data:blog.postImageThumbnailUrl'/>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta expr:content='data:blog.title' property='og:site_name'/>

Lastly, "Save Theme" to save and make changes to your blogger theme. 

Now, facebook open graph should start displaying on all pages of your blogger blog. 

Recommended :