Tuesday, January 3, 2017

How to add facebook open graph to blogger

Facebook Open Graph allows you to take control over how your content displays on facebook. without an open graph, Facebook crawlers make guess about your content title, image and other data that appear with URL.

 to show your post on Facebook as you want then you can do it with open graph meta. with the Facebook open Graph, you can add your desired image, title, and description. by going to the following link you can see the full detail of open graph A Guide to Sharing for Webmasters.

some templates don't have Facebook Open graph. if you are using the template without open graph then you can add manually. follow our this post how to add facebook open graph to blogger.

How to add facebook open graph to blogger


Add Facebook Open Graph To Blogger.

you need to edit your template to add Facebook Open Graph. so go to the blogger and log in your google account. now go to your blogger dashboard and click on your blog title. from your blog dashboard click on template link. from next page press Edit HTML Button. Also read: How to create a blog with blogger
How to add facebook open graph to blogger


in the next page, your will see your template code. click anywhere on the code and search </head> by pressing ctrl+f.
How to add facebook open graph to blogger
past the following code just above </head>.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
  <meta content='blog' property='og:type'/>
  <b:else/>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta content='article' property='og:type'/>
  </b:if>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  <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'/>
  <b:else/>
  <meta content='Default image URL' property='og:image:src'/>
  </b:if>
  <b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='og:description'/>
  </b:if>

customization.

edit above code and replace default image URL. with the image URL, that appear if your post has no thumbnail image.

to learn more about Facebook open graph. you can visit facebook page A Guide to Sharing for Webmasters. by visiting this page you can get all detail of their open graph.

that was the post on How to add the facebook open graph to blogger (og: meta). thanks for reading my post. if you like this post or want to know something more you can ask me by dropping your comments.


No comments:

Post a Comment

Template Designed By 92TRICKS © Copy Rights All Right Receved
Scroll to Top