Fixing the sharing problem

How to fix Facebook showing the wrong text and image when sharing a Blogger post...

Like most bloggers, I share my blog posts on Facebook to attract more readers, and it used to automatically pick up the right image and description. Since I added the Featured Post widget there on the right, things started to go a bit wrong and no matter what I shared, Facebook always used the text and image from the featured post instead of the one that was shared, which was really confusing for my readers. Having spent quite a bit of time researching the problem, it turns out this is a well-known and long-standing issue with the way Blogger works, and various workarounds have been proposed but the one described here definitely solves the problem. It isn't particularly advanced but does require a little use of the Blogger HTML editor.

If I were to share this now without implementing the workaround, Facebook would pick up the title of this post but the description and photo of Nora Kudrjawizki from the Featured Post box over there. While Nora is gorgeous and I really don't mind looking at photos of her, she has nothing to do with this post so her presence in the shared link is just confusing. Even if your blog doesn't have a Featured Post widget, you may still find the same thing happening with other wrong text, such as comments or the 'About Me' section, and this is for the same reason so the same workaround applies. How did I solve that problem then?

Background

Without getting too technical, to understand why this happens it is first necessary to understand how the Facebook content linker works when generating the preview you see on Facebook. It scans the source code of the page and will first look for a description meta tag, which Blogger posts generally don't have, and in the absence of this it will take the text from the first paragraph containing more than 120 characters. You might expect that to be the first paragraph of the shared post, but it isn't because Facebook looks for paragraphs that are enclosed in HTML <p> and </p> tags. The Blogger post editor doesn't define paragraphs in this way but simply separates them with line breaks, so there are no <p> tags in the post text and Facebook doesn't look at it. The description of the featured post is however enclosed in <p> tags, so Facebook will see this as the first paragraph on the page and use it as the description. I hope that's clear enough. 

Fixing the text

So that's the problem, but what is the solution? We can't change the way Facebook creates its links, but we can change the structure of our Blogger posts to make them more understandable to Facebook. This involves using the HTML mode of the Blogger editor rather than the normal Compose mode. I know a lot of people use an app such as Blogger because they aren't skilled in web development and don't understand HTML, but this doesn't require any advanced coding knowledge. Once you have finished creating the post in Compose mode, switch to HTML mode using the buttons at the top left. You should see the text of your post along with various HTML markup tags enclosed in angled brackets.
 
Before the first word of the first paragraph, type <p> and at the end of that paragraph type </p>, then publish your post. This won't have any effect on the visible content of your post, but will signal to Facebook that this is a paragraph it should use for its description. Beware though, as soon as you switch back to Compose mode, Blogger will remove the <p> tag you added, so if you edit the post in Compose mode, you must go back to HTML mode and reinstate the tag before saving and updating the post. Unfortunately there is no way to do this at template level, so you'll have to remember to add the <p> tag to the first paragraph of every post you write. Some tutorials have suggested putting the <p> tag in the template instead but I found that Blogger automatically removed it and it had no effect.

What you should end up with is something like this:

<p>This is the text of your first paragraph.</p>

Note that this only works if there are more than 120 characters between the <p> and </p> tags so if your first paragraph is shorter than that, move the </p> tag to the end of the second paragraph instead.

Fixing the image

Okay, that's the text issue fixed, but the image is still wrong and now we have the picture of Nora with the text from this post, which is even more confusing. Fixing this involves a different approach but only needs to be done once. Click 'Template' on the left-hand menu, then click the 'Edit HTML' button underneath the preview. Unless you're a web developer, you probably won't understand most of what's displayed here, but you don't need to. Press Ctrl-F and search the template for </head>. Copy the following code and paste it immediately before the </head> tag:

<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='&quot;&quot; + data:blog.postImageUrl' property='og:image'/>
<b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGdzb730hi9FnqvOpnY1FC9H8t2IrPNo9QVVM6-aq3Z_nJKo_8Lou7A735lMpNKU_Y3OZ_84ZRz9tRkgHGJcHD171onE6vqmzvH609h51sIQ-1wP-2hGSLyFPX6ewdletc4NFcqSCVfI/s200-c/default.png' property='og:image'/>
</b:if>

Don't worry, although you may not understand this code it isn't in any way malicious and won't harm your blog at all. Once you have done this, save the template. Nothing visible will have changed but this snippet of code tells Facebook to use the first image contained in the post as the preview image, or if the post is text-only with no images it will use the default image specified by the '2.bp.blogspot.com' URL. This is a neutral monochrome pattern but if you want to you can replace this URL with that of another image you'd prefer to use as the default, for instance your blog's logo. For the more technically-minded, it is the 'og:image' property that is key: this is what Facebook first looks for when finding an image to display in the preview, and if it doesn't find one it will use the first image on the page, which is the one in the featured post. As this code is in the template, it will automatically apply to all past and future posts on your blog without needing to do any more.

So there you go: follow these hopefully simple steps and whenever you share a Blogger post to Facebook it should always pick up the correct text and image, and your readers won't be confused by text and/or a picture that don't relate to the post title. If you find that it's still wrong even after making these changes, go to the Facebook sharing debugger, copy the URL of your Blogger post into the box and click 'Debug'. Click 'Scrape again' and the link preview should update to the correct version, then go back to your Facebook page, click the options arrow on the post and select 'Refresh share attachment' and all should be well.

I hope this little tutorial has been informative and helps to resolve this common problem that may have been frustrating you and confusing your readers. It seems to be a classic case of what happens when a large software company chooses not to comply with an accepted international standard, and this fiddly workaround wouldn't be necessary if Blogger defined its paragraphs properly with the tags specified by the HTML standard.