Designed by Veethemes.com

How to add facebook Open Graph Protocol [Meta Tag] for Your Blogger/Blog?

Friday, February 07, 2014 by GHANSHYAM No Comment
Implementation of  facebook "The Open Graph Protocol" for your blogger blog.
How to add facebook Open Graph Protocol [Meta Tag] for Your Blogger/Blog?
OGP Implementation
The Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.


While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.


 Why you should implement ogp in your blog or Website?
When you're not using to ogp then facebook not identified your blog or website meta tag codes so when you're posting something in your wall like Url or Blog post Link then not proper showing detail about your link. Example-Facebook tries to read the code on your page, but it isn’t always able to pull your images. If you don’t use the Open Graph tags when you share a URL from your site on Facebook, this is what it may look like:

Any website can implement the Open Graph protocol. It allows any web page to become a rich object in any social graph, making it easy to find what people are liking across the Web -- from a movie to a blog. After implementation facebook simply to Cache the meta data from your blog and your post wall look like this :

Basic Metadata use in OGP
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:
  • og:title - The title of your object as it should appear within the graph, e.g., "How to use Twitter Card Validator for Your Blogger/Blog ? Simple Way!". 
  • og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required. 
  • og:image - An image URL which should represent your object within the graph. 
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.digitalhubinc.com/2014/02/How-to-use-Twitter-Card-Validator-for-Your-Blogger-Blog.html". 
As an example, the following is the Open Graph protocol markup for How to use Twitter Card Validator for Your Blogger/Blog ? Simple Way!:

<html prefix="og: http://ogp.me/ns#"><head> 

<!-- BEGIN Open Graph tags -->

<meta content='twitter card , social media , How to validate your twitter card , meta tags' name='description' property='og:description'/>

<meta content='Digital Hub Inc.: How to use Twitter Card Validator for Your Blogger/Blog ? Simple Way!' name='keywords'/>

<meta content='408184442589211' property='fb:app_id'/>

<meta content='563678263715029' property='fb:admins'/>

<meta content='article' property='og:type'/>

<meta content='http://www.digitalhubinc.com/p/about.html' property='article:author'/>

<meta content='http://www.digitalhubinc.com/2014/02/How-to-use-Twitter-Card-Validator-for-Your-Blogger-Blog.html' property='og:url'/>
<meta content='How to use Twitter Card Validator for Your Blogger/Blog ? Simple Way!' property='og:title'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCFSW37wtkcnrcR7xIupaLrRGRrpxeYrI7bCuzZZ3CotL9DiIt6WDzcFidAUlSEWEF1bF2M4SFeE9sXHsVIwuCdFLKWGf6wQCOECUn4Qvay612Uy1O_hCCOtHzKMz7qUtD5FG1ThnxAY/s72-c/How+to+use+Twitter+Card+Validator+for+Your+Website-Blog+Simple+Way.png' property='og:image'/>
<meta content='en_US' property='og:locale'/>
<!-- END Open Graph tags -->
... </head> ... </html>

How to implement ogp in Blogger

  1. Go to Blogger Dashboard >>Template >>Edit HTML
  2. Find <html and add below code just after it xmlns:og='http://ogp.me/ns#'. So it will look like this <html xmlns:og='http://ogp.me/ns#' ...
  3. Press CTRL+F and Find </head> tag.
  4. Add following code paste just above to the </head>
    5. <!-- BEGIN Open Graph tags -->

    <meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>

    <meta expr:content='data:blog.pageTitle' name='keywords'/>

    <meta content='YOUR_FACEBOOK_APP_ID' property='fb:app_id'/>

    <meta content='FB_ADMIN_ID' property='fb:admins'/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <meta content='article' property='og:type'/>

    <meta content='http://www.digitalhubinc.com/p/about.html(ABOUT_PAGE_HERE)' property='article:author'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <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:else/>
    <meta content='YOUR_FAVICON_URL' property='og:image'/>
    </b:if>
    <b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
    <meta content='blog' property='og:type'/>
    <meta content='YOUR_FAVICON_URL' property='og:image'/>
    </b:if>
    <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
    <!-- END Open Graph tags -->

  5. How to Customise your Code:
    • First, you change the YOUR_FACEBOOK_APP_ID [Connected to your website]
    • Second, you change FB_ADMIN_ID [Your facebook ID] or using fb short Url ID [Like : My Id : 'GhanshyamSinghd']
    • Third, Replace the ABOUT_PAGE_HERE Url [Your  about Us Page]
    • Fourth, you customise your thumbnail url default  - Replace this YOUR_FAVICON_URL

Queries and Solution :

How to Find My Facebook App ID :

  1. Type "developers.facebook.com" in the Web browser's URL field. Press the "Enter" key. The official Facebook Developers website will load in your browser.
  2. Click the "My Apps" link on the top navigation bar. When directed, type in your "Email" and "Password" and then click the "Log In" button to access the site.
  3. Go to the right sidebar and click the app title from the "My Apps" section.
  4. View the full ID number listed under the "App ID" entry. You should see it immediately above the "API Key" listing.

How to Find My Facebook Admin ID :
  1. Navigate to Facebook.com. Type your email address and password in the fields provided. Click "Log In."
  2. Click "Profile," then "Photos."
  3. Click any photo.
  4. Read the URL in the URL field. The series of numbers that follows "id=" is your Facebook admin ID.
How to Use Favicon Url : Use customized favicon url for your default home page. you can create a 200x200px size thumnail image form using Paint and Adobe photoshop. After creating image upload on gplus or blogger then use in this place.

How to check your meta tag working or Not ?
You can check your output result from your blog to using facebook developer tool - Debugger

How to look your facebook wall after implementing OGP :

Conclusion

All things done! Now using this code better SEO for your blog and more searchable result in search engine.
facebook easily understand your code and better impact on your facebook wall. Now increase your traffic on your wall post.

Thanks for reading!

If you like this article and any queries related to this topic then drop your comment below here.please share this article on social media.
GHANSHYAM

0 comments:

Post a Comment

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!