This is a question I have received from clients quite a few times. They have written a beautiful post, found just the perfect image to capture the heart of their content, only to share the post on Facebook and have a random image from their website appear instead. This leads to confusion, frustration, and emails to my inbox about ‘Why is my site broken?’.
Your site isn’t broken.
Let’s start at the beginning. When you insert an image into your WYSIWYG text editor, WordPress is working in the background to create the HTML code so your image (and post) will correctly display on the front end of your site. If you ever want to see and example of this, simply click on the ‘Text’ option of the post editor to see the code which will create your post.
Once the HTML code for your individual post has been created, it is then inserted into the proper place within the hierarchy of templates, sidebars, headers, footers, posts, and pages to generate the full experience of your website.
What does this have to do with Facebook?
I’m so glad you asked! Here’s the thing, when you share a post to Facebook the software essentially ‘reads’ the code of your page. All of it. Not just for your post, but also for your header, your menu, the cute little kitty gifs you have in your sidebar, and anything else that is generated into HTML code to display your site. Since Facebook is a software and not a person, it reads it in the order that the code is generated, not in the way the page is actually laid out on the screen. Facebook can tell if one thing is an image versus text or a link by reading HTML tags. In the example code above, the embedded image is identified by the <img> tag. Now, if you have multiple <img> tags within your page–for example, a logo, a bio picture, and your actual post image–then Facebook is left to determine which <img> is most relevant to the post you are sharing. This is where most people run into the perplexing problem of the incorrect image showing up in Facebook.
The problem occurs when Facebook reads the code, makes a call about the image which should be shared, and it is the wrong call.
So how do we fix it? Let’s get meta.
Meta Tags are essentially invisible footnotes which you add to your code. They give instructions to software like Facebook on how your posts, links, descriptions, and preview images should be displayed. Here is a snippet example I pulled from Facebook’s ‘Guide to Sharing’.
<meta property="og:url" content="http://www.inlandempirewp.com/what-happened-to-my-image-on-facebook" /> <meta property="og:type" content="article" /> <meta property="og:title" content="What Happened to my Post Image on Facebook?" /> <meta property="og:description" content="A quick tutorial on why your post images may not always show up on Facebook the way your intended them to, and how to fix it." /> <meta property="og:image" content="https://inlandempirewp.com/wp-content/uploads/2016/02/jetpack-and-facebook.png" />
Utilizing meta tags is the best way to make sure your posts are being displayed exactly how you want them to. However, if you don’t like to get your hands dirty with code every time you write a post, there is an easier way.
Meet JetPack Publicize
If you aren’t already using JetPack on your site, well, you should be. JetPack is a plugin which has been released by Automattic, the company that oversees the WordPress community. It is a great plugin that is jammed packed with handy goodies. My personal favorite is the downtime monitor. However, for the purposes of this post, we’ll be talking about Publicize.
Publicize is a ‘set it and forget it’ feature. Basically, it connects your WordPress site to your social networks. This allows you to automatically push your WordPress posts to your connected media outlets with a click of the ‘publish’ button.
What’s better, Publicize sets up your meta tags so your post is correctly displayed. There is a caveat. Ultimately Facebook makes the final call on which image is displayed, but utilizing this plugin will greatly improve how often the correct images are selected. Here is the order in which images are selected for use in your Facebook images (this is taken from JetPack’s support pages):
Facebook and Twitter Publicize select images that are at least 200 x 200 pixels in the following order:
An image attached to the post and inserted
Any other image in the post (not attached but perhaps linked)
What this is saying is to best ensure the correct image is posted, you should utilize Publicize and set a featured image. To set a featured image, all you need to do is use the dialog box that is located in the right column of your editor. It works the same as the ‘Add Media’ button in the WYSIWYG editor.
So there you have it. A simplified insight into how images are selected to be displayed on Facebook, and solutions to make sure the correct image is displayed.
I know there are many more plugins (and even some themes) which also provide meta tag support for Facebook sharing and publishing. Do you have any favorites? If so, please share them in the comments!