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.
Looking at my blog, and a FaceBook Debug log, for this post.
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.
So, what do we have?
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.
This makes the immediately previous advice unnecessary.
If one wishes to provide author information, that also becomes slightly simpler.
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.
This won't be present, in all templates / themes.
OG code is produced by FaceBook - and used in sharing to FaceBook and Twitter. Blogger did a lot of work, to include the necessary code in the newer Blogger supplied templates. Older Blogger templates - and custom, third party templates - may not contain this level of detail. If sharing to FaceBook and / or Twitter is a priority, you may want to consider moving your blog to a new, Blogger supplied theme.
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.
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://4.bp.blogspot.com/-z3s2Jm6CHB0/VuXdZ_-X53I/AAAAAAAAZo4/GCKjYpD0qmIC9-aHwmwjskz2E0qfxQ-5Q/w1200-h630-p-nu/Screenshot%2B2016-03-13%2Bat%2B14.35.32.png' property='og:image'/>
So, what do we have?
<meta content='https://4.bp.blogspot.com/-z3s2Jm6CHB0/VuXdZ_-X53I/AAAAAAAAZo4/GCKjYpD0qmIC9-aHwmwjskz2E0qfxQ-5Q/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 -->
<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.
This won't be present, in all templates / themes.
OG code is produced by FaceBook - and used in sharing to FaceBook and Twitter. Blogger did a lot of work, to include the necessary code in the newer Blogger supplied templates. Older Blogger templates - and custom, third party templates - may not contain this level of detail. If sharing to FaceBook and / or Twitter is a priority, you may want to consider moving your blog to a new, Blogger supplied theme.
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.
Comments
I've copied and pasted some of these codes, and nothing seems to work.
Thanks for your observation!
This was broken, during the past 3 or 4 days - but it was just fixed, this afternoon (14:00 or so Pacific USA time). So be patient - and try your blog, later today.
If necessary, update a post, and see what your meta code looks like. Post in Blogger Help Forum: Get Help with an Issue, if you like - and we'll take a look.