Sunday, June 9, 2013

How to install Facebook's Open Graph tags into Blogger

This article shows how to install Facebook's Open Graph tags into Blogger


Why Open Graph 


Neil Patel recently explained on Quick Sprout why having Facebook and Twitter tags installed into your blog is important.

To cut his long story short, if you install them, then when someone shares your blog-post, the shared item looks better. This means that more people are likely to follow the link and/or share it themselves - so your blog gets more traffic, and people think you're more professional and thus credible.

Neil also stated that if you don't use Wordpress, "you’ll need to manually generate meta tags for each page on your site" - but fortunately for Blogger users who are brave enough to edit their template that's not true.   Blogger provides lots of SEO-supportive features these days, and you can easily use them to make OG-tags work on your blog - even if you haven't quite got your head around what OG is - personally it took me months to understand what it was all about.

The following sections have more details about how to do this.


How to install Facebook's Open Graph tags into a blog made with Blogger


Edit your template in the usual way.

1     Tell Google about the namespace:

Find the opening <html  ... statement, and add the Open Graph namespace information to it.   The code to add is
xmlns:og='http://ogp.me/ns#'
and it goes after the existing namespace statements.   For example, my current tag looks like:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'    >

or like this after the line is added:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>


2   Add the Open Graph tags


Find the closing </head> tag.
(Hint:  I often search for just </head   ie without the closing >, in case there's something else in the tag in my template)


Put the following code immediately before it:
<!-- Begin Open Graph metadata --> 
<meta expr:content='&quot;en_US&quot;' property='og:locale'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if> 
<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='
URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' property='og:image'/>
</b:if>
 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<!-- Still looking for a way to use the post snippet if there's no description -->
</b:if>
<!-- End Open Graph metadata -->


This code needs to be adapted for your blog.   In particular:
  • en_US
This value is fine if your blog is written in US-English. But if you are writing in UK-English, you may want to change it to en_GB.   

And if you are using a different language altogether, you should change it to the two letter code for that language-territory combination:   see https://developers.facebook.com/docs/internationalization/  for more information about the codes that they support

  • URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST 
Replace this with the web-address of a picture that you want to use if the individual post doesn't have a thumbnail  - perhaps your logo, or a blogger logo.


  • App-ID and Facebook-Profile-ID
If you have got an App-ID associated with your blog, perhaps because you signed up to use Facebook commenting with it, then you may also want to add the following statements, just before  the "<!-- End Open Graph metadata -->"
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>


Of course putting in your own values instead of the ones in red   (I'm assuming that if you knew enough to get an App-ID, then you will know how to find it, and also about the risks associated with linking your Facebook-profile-ID to your blog.)


3    Check it's complete:

Preview the template changes to make sure that they've worked, and then save them.




Troubleshooting


Testing the OG tags

Facebook have a tool that you can use to see what values the OG tags in your blog have.
It is found here: https://developers.facebook.com/tools/debug

Enter the URL of one of the posts from your blog and click Debug to see the OG tags which Facebook finds for it.



Descriptions

The Descriptions tag will only work if you have Search-descriptions on (Option > Search > Meta-tags > Enabled), and have entered a search description for each post using the post-editor.   I had hoped to be able to use post.snippet when this wasn't available, but have not been able to work out the correct syntax to do this.

Pictures

Facebook would like you to use an image that's at least 200x200 as your posts's thumbnail image or as the default image to use for posts that don't have one.

If the picture that you use is smaller than this, they do appear to use it.

However you will see the following message when you use a debugging tool to look at what tags Facebook is reading from your site:
og:image should be larger
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://3.bp.blogspot.com/XXX.png' will be used instead.




Related Articles:


How to add Twitter-Cards to Blogger - these are the Twitter equivalent to Open Graph tags

Advantages and disadvantages of editing your Blogger template

Post.thumbnail:   a summary image for a post

How to edit your Blogger template

Linking your blog to the social networks

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

13 comments:

  1. how do you get facebook to show the video thumbnail when you embed the code into blogger

    ReplyDelete
    Replies
    1. add an image like a print of the video, and use a jump break, facebook will use that image for the post share.

      Delete
  2. Thank you for this post. I have been so frustrated trying to figure out why Facebook doesn't show the correct image associate with my blog posts and I had no idea how to fix it. I'm a crafter and a writer, not a coder, so I appreciate this great tip!

    ReplyDelete
    Replies
    1. Hopefully the validation tool will help.

      Delete
  3. I've added code to my Blogger template to change the per-post title to "Post Title | Blog Title". Will this code add per-post titles in the og:title?

    My blog is: Shamatae's World Omnibus of the Weird and Hilarious

    ReplyDelete
  4. I am going mad with these tags :(
    My blogspot is not using the images when I share my link on fb still :(

    ReplyDelete
  5. This STILL doesn't work. I have tried 10 different websites. This code doesn't work either.

    FB is beyond stubborn and will not show the thumbnail. It just defaults to my blog's banner or my profile pic.

    ReplyDelete
    Replies
    1. exactly my problem..i dont understand facebooks obsession with profile pics

      Delete
  6. I'm having the same issues with blogger. I increased my picture size, it only helps when the url is copied and pasted directly to fb. If you hit the share button on the post, it still uses random pics. It's given me such a headache. Considering switching to wordpress.

    ReplyDelete
    Replies
    1. Ditto. I am not an IT girl and I dont know that much about HTML. It took me hours to try to fix this using various instructions but nothing worked. I switched to blogger from wordpress as advised by a colleague to take advantage of adsense (she said), but I find it easier to work around Wordpress.

      Delete
  7. Can anyone teach me how to remove my google+ profile in the description box whenever I'm sharing my post in Facebook?

    ReplyDelete
  8. This solved my problem but created a new one. Now the images shared on FB are the ones I want to but the resolution is so bad the image is almost impossible to see. I have used images that are plenty big enough and of good resolution. What can I do to change this? Thanks for the article.
    http://www.wholesomespirit.com/2014/07/free-range-chicken-soft-tacos-with.html

    ReplyDelete