Tech Daddy Thursday: Social Media Post Image Edition

Welcome to #Techdaddythursday

Hello website owners, I have noticed that some of you have issues with blog posts and images on social media. So I thought I would talk about the problem and some ways that you can troubleshoot and maybe even fix these problems 🙂 Welcome to #Techdaddythursday

Here are the symptoms.

You have written a great post and created a great image to go with the post, because as a savvy social media person you know that adding an image when you share content increases engagement.

But wait! When you add the link to your amazing post on your various social media platforms, no image appears, just a naked URL. Ruh roh! So you add an image to the tweet just so it catches eyeballs, but the bad news is that the image doesn’t link to your post and just gives your followers a large view of the picture and they never read your brilliant words. And that is just bad for everyone, not only that but they don’t visit your site at all and seen none of the amazing things you have created just for them 🙁 as Trumplestilskin would say “SAD!”

What to do?

Well, there are a few tools to help you find what the problem might be. A twitter tool Card Validator and The Facebook Debug tool. The twitter tool just gives basic information and a link to some generic solutions, which can sometimes be helpful the Facebook tool gives lots more information but is more complicated in its use and analysis. Try them both (login required) and see if they give you clues. If you did that and still don’t understand what is going wrong I will try to offer some generic suggestions.

But first I must sadly explain what is going on when you share a link. Your social media account scans the link you submit looking for a set of instructions that tell it what image to use. They all use something called Opengraph to get that info. WordPress adds it by default, but sometimes not very well (it isn’t their fault) and other plugins can help, like Yoast or JM Twittercards  and sometimes even your theme. But as with all coding YMMV and sometimes things don’t go according to plan.

Often times it is about whether you have set a featured image in your post or page and themes can really fuck with that. For instance if your theme shows a featured image and you have the image in your post, it will show twice when people visit your post and that doesn’t look good, but you often have good reasons to put that image in your post, you might want to show a thumbnail that opens a lightbox for a bigger version, so you don’t add a featured image and then your social media sharing tries to guess what image to show, or even worse shows no image at all. So set a featured image and if you need to and then hide that image from human eyes by using custom css or a plugin that just hides the featured image.

Another important thing to keep in mind is image size. My suggestion is to use an image at least 400×400 and bigger (within reason) is fine

If you are using Yoast for SEO it can help a bit, and especially with pages or posts that have no images since you can set a fallback image to show when there is no images added. Like so

Yoast Image for Opengraph Image setting

And if you want to tweet an image that is completely different from the one you have added to the post or featured image, or even just know for sure what image is going to be tweeted I always use JM Twitter Cards a great plugin that offers a lot of flexibility

Some recommended image sizes to make Social Media happy:

Facebook recommends 1200 x 630 pixels for the opengraph image dimension, which is an approximate aspect ratio of 1.91:1. This gives your shared post a full-size image above the post text. According to Facebook, you can go as low as 600 x 315 and still receive a full-size image. anything smaller gets a square thumbnail on the left side of the post.

For the Twitter card image size they say 800 x 320px with a maximum size of 3MB(don’t make this image anywhere near this filesize or I will makes sure all of your flip flops give you blisters)  for the large image card and 280 x150px for the summary card.

Have you found this post helpful? Would you like to have more? Let us know in the comments and maybe there can be more #techdaddythursday.

 

Comment List

  • elliott hen 21 / 06 / 2018 Reply

    Hi, TechDaddy! I am posting a tweet using my iPhone for #Storyin12 and want to add a photo. The photo is huge when viewed on Twitter. I don’t think there is any way to change or edit the post once it is published. Any tips on how to make the image smaller when I go to post it with my cell?

    Thanks, Elliott

    • mdknight 21 / 06 / 2018 Reply

      So short of adding an app the only way to do it on an iPhone is using the following steps

      Launch Photo app on iPhone 7. Select the photos which you want to reduce the size and tap the Action button. Then choose Mail.
      It will jump to the Mail application. Fill in your email address and “Subject”. If you wish, you can add a message.
      Hit Send button. Choose the photo size from Small, Medium, Large and Actual Size.(this is where you can change the size)
      The resized photos will be sent to your email, you can delete the original photos from iPhone first. Then go to your Mail and download the resized image.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.