How to put Facebook Open Graph metatags in Blogger is available all over the web.
Problem is, with most of the available codes, the resulting images on Facebook are fuzzy. Especially if you auto-publish with Twitter feed or other.
As it turns out, most proposed codes are incorrect:
- in most codes,
blog.postImageThumbnailUrlis used. This causes Facebook to use the small 70x70 px thumbnail from Blogger. This is then enlarged on Facebook, resulting in a fuzzy image. With the code below, the original image from your post is used (use minimum 600x315 px in Blogger for a good result). - there are often 2 title tags, resulting in errors. It is better to used site_name and post title.
Procedure:
- Go to Template
- Back-up of your template
- Go to Edit HTML
- At the end of the HTML tag, add following:
xmlns:og='http://ogp.me/ns#'
- The HTML tag now looks something like this:
<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#'>
- Add following code before the </head> tag:
<!-- Begin Open Graph metadata --> <b:if cond='data:blog.pageType == "item"'> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> </b:if> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta content='blog' property='og:type'/> </b:if> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <!-- End Open Graph metadata -->
Testing:
Test the result with Facebook Debugger.Tip: previously posted articles that are put through the debugger, will now havec the correct image.
I don't think this kind of conditional statement works with the classic template, am I right? What can I do, then?
ReplyDeleteWhat do you mean by "the classic template"?
ReplyDelete