Open Graph Protocol (OGP) is a markup language that was introduced by Facebook back in 2010. It enables sites like Facebook to integrate and share information with other sites and pages. Implementing Open Graph to your Blogger site will help social sites like Facebook in identifying the essential elements like author, blog description, URL, etc. every time you share a link or one of your posts.
Facebook isn’t the only site that uses OGP. Google Plus also uses it and Twitter is about to as well, once they implement the Twitter cards, so it would be a good idea to have your Blogger site support it as well. All it takes is adding a few metadata in your site’s template code.
- Go to the “Design” page in your Blogger dashboard, and then head over to the “Template” section.
- Click on “Edit HTML” and then “Proceed”.
- By using the search function (Ctrl+F), look for the </head> tag
- Copy and paste the following code before it:
<!-- 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 == "item"'> <meta content='article' property='og:type'/> <meta content='URL TO YOUR ABOUT PAGE GOES HERE' property='article:author'/> <meta expr:content='data:blog.url' 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.homepageUrl' property='og:url'/> <meta content='blog' property='og:type'/> <meta content='YOUR_FAVICON_URL' property='og:image'/> </b:if> <meta expr:content='"en_US"' property='og:locale'/> <!-- END Open Graph tags -->
- Replace all of the necessary values highlighted in bold above with those of your own appropriate data.
You can get your appID by going to the Facebook App dashboard. You won’t have any appID unless you already have an application created and registered. For YOUR_FAVICON_URL, as an alternative, you can also upload a 200x200px sized photo of your logo or Favicon in Picasa and use that URL instead.
- Save your template and you’re done.
To find out if you got everything correctly, click HERE.
Related Tricks & Tutorials
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here