You just spent five hours writing an epic blog post and you’re feeling pretty proud of yourself.
It’s time to share your masterpiece with the world.
You share it on social media and await your praise. In anticipation of your glowing feedback, you check your recent social posts and find that the wrong social share image was used for your epic blog post.
Or worse… no photo at all.
This is particularly bad because Facebook posts with images see 2.3X more engagement than those without images. Meaning, your posts will miss out on 130% of the engagements you would have gotten.
To put it mildly: That’s a bummer.
We understand how painfully frustrating it is to spend hours on something and get nothing in return. That’s why we wrote this guide – to teach you how to control the social share images of your blog post so they look great every time (and you get maximum engagement).
Let’s get started
(Don’t worry if this all sounds complicated – I’ll show you a super easy, non-technical way to do this below. But hear me out.)
Changing Your Social Share Image With Open Graph
When posts are shared on Facebook, Twitter, and Linkedin a process called Open Graph is used to extract information from your blog post to create a special social share link. This link includes the title of your article, an image, the URL, and a description.
It’s sort of like how Google pulls your metadata to show your blog posts in search results.
How does the protocol know how to find this info?
The information is sent to the Open Graph via meta tags that are found in the <head> of your website’s code. If not redirected, The Open Graph Protocol will use the information found in the meta tags on your site’s web page, just like Google does.
So, to ensure that the right titles, photos, URL, and description are used for your blog post, you’re going to want to optimize your posts for social media.
Here are three methods to change the share image of your content:
#1 Add the Open Graph Tags
When the Open Graph Protocol tags are located in the right place, social networks can pull the information needed for your social posts.
If your website doesn’t have plugins (such as Yoast SEO) to automate this process, you’re going to have to add OG tags to your site manually.
The metadata needs to be added to the head section of your blog post. Here’s how:
Step 1: Add this code to the head section of your web page:
<meta property=“og:image” content=“http://example.com/picture.jpg” />
<meta property=”og:image:width” content=”180″ />
<meta property=”og:image:height” content=”110″ />
Be sure to replace “http://example.com/picture.jpg” with your images URL, and change the width and heighth to the correct numbers as shown below.
Step 2: Add your Image’s URL.
It’s important to follow Facebook’s guidelines when adding photos.
As for sizing, photos should be at least 600 x 315 pixels. However, for the best resolution, photos should be 1200 x 630 pixels.
For the other social image sizes, check out this post.
Step 3: Add the generated code snippet into the HTML head section of your page.
Adding the meta tags manually may take some getting used to but, once you’ve set a few blog posts, you’ll be able to easily add meta tags to all your future posts.
#2 Use Twitter Cards
If you’re not using WordPress for your website, then Twitter cards might be a great option for your social shares.
Although you can set up Twitter Cards with Yoast for WordPress (option #3 below), you can also set up your cards with meta tags.
This meta tag will describe your content, including images, videos or summaries:
<meta name=”twitter:card” content=”YOUR SUMMARY HERE”>
This meta tag is the page you are sharing with Twitter:
<meta name=”twitter:url” content=”YOUR URL HERE”>
You will also need to select a compelling title that is share-worthy for your Twitter card using this tag:
<meta name=”twitter:title” content=”YOUR TITLE HERE”>
You then want to create a description that is under 200 characters:
<meta name=”twitter:description” content=”YOUR DESCRIPTION HERE”>
Lastly, and most importantly, you will add your image.
<meta name=”twitter:image” content=”YOUR IMAGE URL HERE”>
After you follow the guidelines and apply the tags to your website, you have to apply to Twitter’s card program. Once approved by Twitter Card’s program, Twitter cards will be added to all of your Twitter posts.
Check out Twitter’s card developer overview for more info.
#3 Install Yoast SEO plugin for WordPress
As promised, this is the non-technical way to change your social sharing images.
Yoast SEO takes care of the guesswork and allows you to have complete control over the images seen on your social shares. If a social image has not been selected, Yoast will give Facebook an image to use based on the photo’s metadata.
However, Yoast makes it incredibly easy for you to choose your own photos when you select “social’ in the Yoast menu bar.
You want to follow Yoast’s steps to make sure that the right photo is used for your social posts. Even if you don’t take the time to select a photo, Yoast does a pretty good job of selecting a photo for you.
Yoast also lets you add a description and helps you to make it SEO-friendly, so it works well on social media sites and search engines.
Now that you understand how to optimize your photos for social media and how the Open Graph Protocol works, you’ll be able to churn out excellent content that your social media readers look forward to viewing.
You’ll see your engagement increase and get more traffic back to your site! Your social share image never looked so good.
If you enjoyed this post, please take a second to share it so we can help make social media a prettier place!