Blogger Resolves The FaceBook Photo Sharing Issue

Blogger Engineers recently added Blogger template code, to provide images in shares to FaceBook.

The added code is included in the standard template header. If you have a custom template, you may need to verify template header content.

If you have added the previously recommended Open Graph Code to your blog, to allow Open Graph based post / photo sharing - and you use the FaceBook Developers Debugger tool, you may see a new diagnostic suggestion.

Given newly added template code, blogs with added OG code may generate ominous warnings in the FaceBook Developers Debugger tool.

Looking at my blog, and the blog main page.

Object at URL 'http://blogging.nitecruzr.net/' of type 'article' is invalid because it specifies multiple 'og:url' values: http://blogging.nitecruzr.net/, http://blogging.nitecruzr.net/.

Looking at my blog, and a FaceBook Debug log, for this post.

Object at URL 'http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html' of type 'article' is invalid because it specifies multiple 'og:url' values: http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html, http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html.

With Blogger now providing a properly resized image, automatically, from each post, the image provided in the previously suggested Open Graph code is now redundant - and causes duplication.

The browser source listing, for this post.

The FaceBook Debugger log, for this post.



Here's what I see now, in the standard template header.

<meta content='Blogger recently added template code, to properly share content to FaceBook. Learn how this affects your blog.' name='description'/>
<meta content='http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html' property='og:url'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXY0OsmpMhRizG4LTcs2XcjrGcp0wqe4QpckpuwJLrIAaS-yOx__zWiITK8ONmaWxvoBNhmbu7iCcZ0K3GHEGmWVIq_-mm0bc4Qt_kmPELouCjmlf7EpmSVfYhwgI_mI3E26LQkc_FSk9E/w1200-h630-p-nu/Screenshot+2016-03-13+at+14.35.32.png' property='og:image'/>

So, what do we have?

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXY0OsmpMhRizG4LTcs2XcjrGcp0wqe4QpckpuwJLrIAaS-yOx__zWiITK8ONmaWxvoBNhmbu7iCcZ0K3GHEGmWVIq_-mm0bc4Qt_kmPELouCjmlf7EpmSVfYhwgI_mI3E26LQkc_FSk9E/w1200-h630-p-nu/Screenshot%2B2016-03-13%2Bat%2B14.35.32.png' property='og:image'/>

The chosen image - resized to 1200 x 630, to suit the FaceBook recommended 1.9 aspect ratio - and large, to suit the FaceBook recommended size.

Now, 3 data elements (2 Open Graph) may be redundant.

• description
• og:image
• og:url

This makes the immediately previous advice unnecessary.

If one wishes to provide author information, that also becomes slightly simpler.

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='https://plus.google.com/nnnnnnnnnnnnnnnnnnnnn/about' property='article:author'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<!-- END Open Graph tags -->

If you truly want to share author details, you still have some work to do - but photos should now be shared, automatically, if your blog has a template with a standard header.

---

Recently, Blogger Engineering added OG code to the standard template header, to allow us to share posts with images to FaceBook, without having to add special code. This should help, for owners of blogs which have standard headers.