When we share our blog posts to social media we want them to look attractive. We spend some time on a nice featured image that lets people know what the post is about and then tweet our creation to share it. For a long time I did this by logging into Twitter, uploading an image and adding the URL to the post, along with some hashtags and maybe a blurb. The results looked something like this.
The Problem
Since I have a Facebook page and a Twitter account for this website, I started trying some of the social media management platforms, like SocialBee and ContentStudio. These services allow you to post to multiple platforms at the same time, saving a bit of effort. There was just one problem, the posts to Twitter have had the image cropped, so even though I was saving time, the results weren’t what I wanted. First, let me show you what I mean.
As you can see, the images have been cropped and in some cases the text is unreadable. I reached out to support for SocialBee and ContentStudio. I explained my process and the issue. As far as they knew, I was doing it right. It has been a puzzler. Let me explain the process to you.
Yoast has a nice feature that allows you to supply the images for Facebook and Twitter and tells you the correct size.
When I started having issues I checked around, and the sizes Yoast suggests were what was recommended.
Investigation
When you share a post on Facebook and Twitter, their crawler visits the link and reads the page. Yoast puts the Facebook (open graph) and Twitter meta tags into the page header so that the information, including the path to the image to use, are available for the crawler to grab. It is a nice feature. This is what the header tags look like.
If you are troubleshooting posting to Facebook and Twitter, these platforms have a “debugger” where you can enter a URL and see what the crawler sees. The debugger points out any errors or warnings and it shows you the preview. You will have to log in to use them. The Twitter debugger is called the Card Validator. The Facebook debugger has several options. The one for troubleshooting the social shares is called the Share Debugger. Log into the platform, enter the link, and view the results. I did some debugging using the Twitter developer tools.
Solution
I found the problem. Look at that screenshot again: "twitter:card" content="summary"? Hmm. It turns out that if you go to the social settings tab for the Yoast plugin there is an option to specify whether you want the “Summary Card” or “Summary Card with Image” added to the tags.
Twitter recommends images with a 1:1 ratio for Summary Cards and 2:1 ratio for Summary Cards with Image. However, no matter which you have selected in the Yoast settings, the size Yoast recommends on the post edit screen is for the Summary Card with Image.
Mystery solved! I had been Yoasted!
I switched the setting to Summary Card with Image and the next posting to Twitter worked as it should. If this happens to you, don’t despair. Twitter caches the image for 7 days, after which time the display should correct itself.
