The trick to SEO now is simply create great content, and shout about it on the web. But you want your content to look great when you share it.
You have created a new blog and you share the link on your Facebook page but the thumbnail link is small and looks terrible. Maybe even a cropped out version of your logo.
So, how do we control the Facebook Preview of our blogs and web pages we share on Facebook?
Unless you tell Facebook what to use for the preview, usually the first image found is often used as the preview thumbnail. Often this is your logo and is cropped out to fit the preview frame.
Facebook's recommendation, at the time of writing, is to use images at least 1200 X 630 pixels for the best display, and a minimum of 600 x 315 pixels keeping to an image ratio of 1.91:1 to ensure a full width preview thumbnail image.
The thumbnail for different website platforms will at times render correctly if the image it uses for the preview is the correct size.
We can often suggest the correct image to Facebook by having a large image towards the top of the page, but unless you set the Open Graph tags, you can't be sure that the correct image is used until you share the page on Facebook.
Good practices
Good practices for different website platforms apply as below.
Wordpress
Set the "Featured Image" to 1200 X 630 pixels. A good WordPress theme will have the featured image display responsive, and resize the featured image for different devices
Joomla
Set the "Intro Article Image" to 1200 X 630 pixels. Again the Joomla template should make the full article image responsive for the different devices.
Website builders
Have the first image on the page to be 1200 X 630 pixels, how this is rendered on the actual webpage will depend to the specific platform.
Still not right?
Still not rendering correctly or you don't want to use an image on the webpage for your Facebook preview thumbnail?
Then you need to set your Open Graph or OG tags in the header for each page.
The Open Graph Protocol was developed to add tags to a webpage to define specifics about the page to other platforms.
For example, the Facebook crawler will make a "best guess" as to the Tittle, Description, and Image to use as a preview of the page, hence the small thumbnail image you see on some shared links. But when the Open Graph tags are displayed, then there is no guessing, and you have the control and can define these items.
Again, different platforms have different ways of setting these Open Graph tags, and most SEO plugins in both Joomla and WordPress will have a facility to set these Open Graph tags.
Real Life Example
We use a SEO extension that manages the Open Graph tags, so we can have more control over the image preview displayed on Facebook.
This website is a membership website, and on each members page, the intro image is a stylised image of each member. This image is square and not the recommended 1.91:1 aspect ratio. Also as we are mindful of site speed, we did not want to have a larger than necessary image rendering on the web page. By having the intro image set as the Facebook link preview image we are not giving a true representation of the page and not being true to brand.
Therefore we created a new image for each member that ran true to the brand and gave a good representation of the page when shared on social media.
