Creating niche content is a basic challenge for websites owners and authors. But how will you marketise that content? Social networking sites such as Google, Twitter, Facebook, Pinterest etc. do all that remaining work. To gain followers from a pool of millions of audiences, social networking is a crucial factor.
After getting quick attention and successful publicity, Facebook created an Open Graph in 2010. Here is the answer to our question. Instead of just branding with networking sites, Facebook created a specific integration with all other sites by introducing open graph. With this new vision, a cross-link between a site and Facebook could successfully be achieved.
How do they do that?
Facebook Open Graph Meta tags allow the information such as website likes, followers, comments to interconnect to Facebook itself. OGP enables a site page become a rich object in a social graph.That is the reason now a days we see Facebook tabs and like buttons everywhere on third party sites and other social networking sites as well.
Social media is the main driver for online popularity. These tags once introduced within site’s HTML scripts, automatically help visitors to connect to different relevant pages and content with cross-linking through FB integration. With correct meta tags, you can surely drive more traffic and visitors to your content from all over the globe. See opg in brief.
Tags
og:title – Instead of searching for a title of a content on your site, Facebook defines your post’s title using a og:title meta tag.
<meta property=”og:title” content=”Title of your post”/>
og:type – This meta tag defines the type of object in sharing.
The best examples of it are as follows.
City, Country related to Places, Company, business, directors, contacts are related to Business, food, movie, song are related to Entertainment and so on.
This tag places your sharing in visitors relevant sections so as to popularize it faster and convenient.
<meta property=”og:type” content=”website” />
og:description – This tag defines the description of your article. There is no character limit here but it is advised to use upto 200 letters or so.
<meta property=”og:description” content=”Your description here” />
og:image – Image is crucial for every content on the web. This meta tag will define particular photo from your site page. So make sure you define a specific image with this tag which stand out most.
For every page your site has, you need to specify the image tag individually. If you site has CMS (content management system), tags will be assign automatically. A 1200×627 is a standard OG image size with a 5mb size limit.
<meta property=”og:image” content=http://www.example.com/image.jpg” />
fb:app_id – this open graph enables an object connected with facebook application.
og:video or audio – this tag is used when an tab is to link with video or audio.
og:locate – this tag defines the language.
Facebook Open Graph Object Debugger
This developer tool from Facebook helps in checking the links you place using OG tags. It also helps in keeping facebook cache clean.
Using Open Graph Tags on your site
All you need is to use above tags with proper file links in your site template’s section.
The best example of custom OG plugins is Joomala open graph.
How to Add Facebook Open Graph to Blogger?
First of all, why do I need to do this? Well, if you see carefully site integration is difficult when you try to share your blog links on other social sites such as Facebook & Twitter. Issues such as image not fitting or showing up properly. To solve this open graph defines the object properties so that they become more usable universally everywhere.
You can add Facebook’s Open Graph Meta Tags inside your templates. They must be added inside the tags. You surely have control over editing them while you actually share your content.
og:title = title of post e.g., “What is Facebook Open Graph & How It Affects Your Online Marketing?”
og:url = URL of post e.g., “http://www.example.com/what-is-facebook-open-graph-how-it.html”
og:description = You can use your own description here
og:image = URL of your image which is at least 200p × 200p
og:type = Site’s Default Type
Next add below code just before the closing tag (This defines the Facebook protocol)
xmlns:og=’http://ogp.me/ns#’
Now just add actual meta-tags just below/after the tag inside your template.
<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.postImageUrl’>
<meta expr:content=’data:blog.postImageUrl’ property=’og:image’/>
<meta property=’og:image:width’ content=’1000’/>
<meta property=’og:image:height’ content=’600’/>
<b:else/>
<meta content=’logo-link’ property=’og:image’/>
</b:if>
<b:if cond=’data:blog.metaDescription’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
<b:else/>
<meta expr:content=’data:post.snippet’ name=’og:description’/>
<meta content=’app_id’ property=’fb:app_id’/>
<meta content=’fb_admins’ property=’fb:admins’/>
Check your work with Facebook Open Graph Debugger Tool
Congrats! You have successfully implemented Facebook Open Graph Meta tags on your site.
