You are only in a hurry till you get to the front of the queue

Tuesday, 30 December 2014

Adding Open Graph Tags Using Blogger

Adding Open Graph Tags Using Blogger:

I can't even begin to tell you how long it took me to find this!

To instruct Facebook and many other services what to show in a share or preview on the Newsfeed, you need to specify Open Graph meta tags. If Open Graph tags aren't on the page when sharing, an undesirable image or title may appear.
Additionally, Smart Layers uses Open Graph meta tags to determine how to display links to your recommended content, and to specify which content is shared from your page.
To add Open Graph tags to your page, you will need to be comfortable with editing your Blogger Template.
It is also recommended that you create a backup of your template before making any changes.
To get started, click on Template > Edit HTML within the Blogger menu. From there, you will need to add Facebook's XML namespace to your page's initial HTML tag. By default, there will be other namespaces already included, so you will just need to add “xmlns:og=''” to the end. Here's an example of how the HTML tag may look after you're finished:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr='' xmlns:og=''>
After the namespace has been added, the actual Open Graph meta tags will need to be added to the template. To do this, search for "</head>" within the template (CTRL+F for Windows users and Command+F for Mac users).  From here, it's just a matter of copying the following snippet of code just before the </head> tag.
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
<!-- Open Graph Meta Tags END -->
This will generate Open Graph meta tags for title, description, url, and image (if one exists in the post). If additional Open Graph tags are needed, we recommend that you take a look at the Open Graph Protocol page for more information.
Thank You


Post a Comment

Thank you for taking the time to comment. Your opinion is important and of value and we appreciate the positive feedback! If you are "Negative Nancy" then please do us, and humanity, a favor and piss off.

Total Pageviews

Google+ Followers

Interesting pages

Blog Archive

Popular Posts

Recent Comments

Rays Twitter feed


Web sites come and go and information is lost and therefore some pages are archived. @rayd123 . Powered by Blogger.