It is frustrating sometimes that the featured image that is displayed together with our blog post share is NOT the image we have intended. Either:
- nothing shows at all, or
- showing a horrible truncated version of your blog header, or
- even though you already set the image via Facebook Open Graph, the image is not showing
Most of the time, it is showing a very ugly truncated image of my blog header. No, it is not going to use the whole header but only parts of it.
Could it be due to this reason that some popular blogs are not using headers for their blogs?
Let me show you a few examples from my other blogs so you know what I mean:
Below are the share pages for 2 of my blogs during the time when the banner were image files with words. Notice how during a Facebook share image was a truncated version of my site banner header image:
Initially I tried to define an image via Facebook open graph. However, it often does not work. Furthermore it is displaying a generic image for the blog.
Assuming I am writing different topics on my blog. I may not want the same default image being displayed.
If you use Thesis version 2.3 and above, it would automatically an image from your blog post to be used as the featured image that is being displayed when someone shares the blog post. That is provided the image meets the general guidelines (at least 200x 200),
For my case, I have been running blogs for more than 10 years and many of the blog posts either does not contain image or the image is too small to be picked up.
How to design your header in case it got grabbed as a featured image during Facebook shares.
This is something I have learned from trial and error. If you are able to accept Facebook image to be part of your header image, then read on…..
During shares, if Facebook grabs the header image to share, it tends to grab the middle portion. So you need to position whatever image or phrases that you want to appear in the middle.
However, my advice is avoid using words/text image because it is harder to estimate. Use a photo or image file instead which you place in the middle while designing your blog’s header.
If you are working with a designer, he/she must be patient – you need to upload and keep testing until you achieve the desired results.
For me, I have placed text on the left and/or right side of the banner but leave the middle part for the image. So in my Health Blog, here are some of the transitions. Below are the main versions but I think I have revised the header image for about 7 times for each of my blogs.
First version: The past few years, my Health Blog header had been very simple. It consists of words only. Those days, the featured image does not get display during shares.
Then last month I discovered that when shared, the image from my blog header was grabbed and truncated in the middle because the post itself does not have any image:
Second version:
Not understanding the impact, I had redo a new banner. When a post gets shared, yikes, it looked so awful! The first and last alphabet of the phrases were missing. However, this got me figuring out that it is extracting whatever that is displayed on the middle part of the blog.
Third version: I tried adjusting the image more towards the middle while the blog title remains on the left side of the banner. The tagline goes to the right. But when users share my post, the G from the word “Blog” was still shown:
With some trial and error, I moved the words more to left and extended the length of the banner. So the image below… the calming lavender gets displayed on old blog posts with no suitable feature image:
Yes, I love lavender. Lavenders give me a feeling of peace and healing so I used it as the header image for my Health Blog.
Since the mystery of Facebook shares not displaying the correct image, and you have tried but cannot work, no use fighting it.
So, if Facebook want to use part of your header for sharing, why not allow it to. Furthermore, a blog header represents the blog so it is a representation of the blog.
Would the old image be displayed even though you have redesigned the header?
If you try to reshare the same post in your blog profile, you would see the same old (awful) image even after you have redesigned your blog header. However if your friend shares the same blog post, it would display the latest image.