UPDATED OCTOBER 2023
There’s nothing more frustrating than prepping a piece of content marketing, publishing it, and sharing it on social media only to find… it’s showing the wrong preview image.
Entering open graph data — title, description, and image — should be a part of your checklist when publishing content. As always, be sure to follow the best practices for Open Graph image design.
But what happens when your custom images and text aren’t actually being used?
Here’s how you can fix your Facebook, X, and LinkedIn share images and text.
The easiest way to set your open graph data is using the incredibly popular WordPress plugin Yoast SEO.
When editing your SEO title and meta description, click the “Social” icon to access the social media tabs, where you can enter your title, description, and images for Facebook and LinkedIn (referred to simply as “Social media appearance”) and X (formerly Twitter). Without getting too deep into why, X uses a slightly different format for its open graph data, which is why it has its own set of fields – rather than the more universal fields for Facebook, LinkedIn, Slack, etc.
Generally, using the same title, description, and image for both sets of fields is perfectly acceptable. If for some reason your audience on X is totally different and require a different marketing message, obviously customize appropriately.
After you save, your open graph data will be updated.
Even after you update your open graph data, you may find that the social media sites aren’t actually displaying it correctly.
Here’s how you can fix it.
First, make sure that your data is actually being updated. The easiest way to do this is to right click and “View Source” on your page to check out the code itself.
Look for the following tags (just do a Ctrl+F search):
<meta property="og:title"> <meta property="og:description"> <meta property="og:image">
These tags should include your custom title, description, and image URL. If they don’t, you need to save your post again.
For X, the tags should be:
<twitter:title content="og:title"> <twitter:description content="og:description"> <twitter:image content="og:image">
If the code is correct, double check that everyone is seeing it correctly. This may not always be necessary. Depending on your website setup, you may want to ensure that you’re not seeing something different from what the public is seeing.
For example, if your site uses a caching plugin like WP Rocket or is hosted with a webhost like WP Engine with built in web caching, you (as a logged in user) may see the updated code – where other surfers may not.
To verify that your tags are updated everywhere, clear your cache. After you clear your cache, open a new browser window in Incognito or Private Browsing mode and visit your website. (Incognito mode logs you out of your site and clears any cookies you have, so you get a “neutral” look at your site.) Right click, View Source and check that your tags are correct.
At this point, you’ve…
So what do you do if the social media sites are still using the wrong data?
Thankfully, each site offers a tool that lets you tell their crawlers to scrape your content again and look for updated open graph tags.
Here are the important links (seriously, save this post and bookmark the tools):
Enter your URL to see how each network will display it when shared. If it’s already in the system, Facebook lets you scrape the URL again to get the updated data.
X used to offer a “Card Validator” tool, but now they recommend you simply using the “Tweet Composer” function – meaning, add your link to a draft post/tweet – in order to preview how it will appear.
These tools will help you preview and debug any issues with your open graph social metadata. And just like adding the open graph tags to your content is part of your publishing process, be sure to check that Facebook, X and LinkedIn are correctly displaying those tags before your content has a chance to go viral.