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/AVvXsEinBb17rkStDcQMf4ySxb5DdvxHQM51ZwDHKE1fpfLBsh4uYuz2XEKgs6Do0mySLXLrQB7j1N-GiquUrzKWMNo3I4GRL-KR79KB0HxBisfjUkYSNW9hSytOiTR3rJmGTOo1c1Hl0j6XjtWv/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/AVvXsEinBb17rkStDcQMf4ySxb5DdvxHQM51ZwDHKE1fpfLBsh4uYuz2XEKgs6Do0mySLXLrQB7j1N-GiquUrzKWMNo3I4GRL-KR79KB0HxBisfjUkYSNW9hSytOiTR3rJmGTOo1c1Hl0j6XjtWv/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.

Base64 Photo Hosting, And Open Graph Code

Some blog owners make photos an important part of blog content.

When sharing a post to FaceBook, problems are seen with photo content. In some cases, this is because of how the photos were added into the post, when using Post Editor.

We've known about problems with photos installed using drag and drop, and post editor, for a few years. Drag and Drop photos, in some cases, are stored as "Base64" content - with the photo content hosted in the post, instead of Google Photos (or Picasa).

Photos added to posts in post editor, using "drag and drop", have been a problem for many years.

Base64 hosted photos make posts abnormally large.

Posts containing "Base64" encoded photos are abnormally large - and will cause problems with the index pages, and auto pagination. That is a nuisance - but just that.

With posts shared to social media, such as FaceBook and Twitter, photos hosted using Base64 become more than a nuisance. When normal posts are shared to FaceBook, OpenGraph code is used to identify key post content - such as a photo to accompany the shared post.

Open Graph code uses URLs to reference photos.

OG code uses HTML / XML tags, in template code - with a URL identifying a shared photo. A post that contains Base64 hosted photos won't have URLs identifying the photos - it will have the actual photo content.

This photo was installed, using drag and drop. Interestingly enough, it is not Base64. It is possible that Blogger no longer uses Base64 encoding - which would explain why the problem with OG code is rather irregular.

When shared to FaceBook, the photo must be converted to normal Google Photo hosted content, so it can be shared using a URL - as normal photos are shared, using OG code. If shared using Base64 content (if OG were to support Base64), the post, again, becomes abnormally large.

Base64 hosted photos simply present one more complication, when sharing posts to FaceBook, Twitter, and other social services.

---

Some blog owners publish posts that contain photos added using drag and drop. Some drag and drop installs result in Base64 hosted photos - which must be converted to Google Photos hosted content, when shared to FaceBook or Twitter.

Using The Meta Search Description In Your Blog

There is some confusion, about including "search description" meta content, in blog template code, to provide source for data shares to social sharing sites.

In various topics in Blogger Help Forum: Get Help with an Issue, I've seen references to "data:post.metaDescription", "data:post.snippet", and "data:post.pageTitle" used, in providing the blog post source for the FaceBook "og:description" tag. As far as I can tell, none of these exist.

The Layout data tag "data:blog.metaDescription", which provides "og:description", does exist - though it seems to be referenced, ambiguously.

Some FaceBook Open Graph content references different Blogger tags, depending upon page type. The FaceBook "og:title" references "data:blog.pageName" with an "item" (post) page, and "data:blog.title"; with other pages.

"og:description", on the other hand, only references one Blogger tag - "data:blog.metaDescription". The latter appears to change its source, depending upon whether the main page, or a post page, is being viewed.

• In main page mode, the per blog "Description", from Settings - Search preferences, is referenced.
• In post page mode, the per post "Search Description", from the Post Editor "Post settings", is referenced.

Source listing for this blog, in main page view.

"What Blogger won't (or can't) tell you. Blogger features and problems explained, using real life examples."

Source listing for this post, in post page view.

"Blogger provides the meta tag "data:blog.metaDescription", which seems to vary in source. Learn how it varies."



There is no mention of "data:blog.metaDescription", in the reference Blogger Help: Layouts Data Tags - as either a per blog, or per post, data element.

In my earlier post, my reference to "'data:blog.metaDescription' name='description'" was simple. But simplicity can lead to confusion.

<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>

Some tags are universal, others vary depending upon page type ("item" being post page).

<!-- 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.canonicalUrl' property='og:url'/>
<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:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<!-- END Open Graph tags -->

'data:blog.metaDescription' name='description' is referenced once, in the template code - and the source is apparently determined, based on the context.

If you find this confusing, I have to agree with you.

---

#Blogger provides the Layout data tag "data:blog.metaDescription", which is used for the FaceBook meta ag "og:description" - for both blog main page, and post pages, when shared. This is in contrast to the FaceBook meta tag "og:title" and others, which use different Blogger data tags for the main page and post pages.

This variation has caused some confusion - and attempted use of different non existent Blogger data tags.