How to control the image used for a facebook share
The Steps to Controling the Social Image
Create a 1200x630 Image
This is the image that will be used to represent your WordPress page when it is shared on Facebook and other Social Media. And yes, the image size is important.
Set the Image to be the Featured Image
By setting the featured image on your WordPress page or post, it will be used as the image shown on Facebook when someone shares your page.
Get the WP Meta SEO Plugin
This plugin (especially the Pro version) allows you to control many aspects of your SEO, not just the Social Media share image.
WP Meta SEO PluginHow does Facebook determine the image used for a Facebook share?
First method: using Facebook Open Graph
Facebook uses something called Open Graph (og for short) to help define what the web page is about and what information is relevant to the page. Facebook also uses Open Graph to determine the image used for a facebook share in addition to other information such as a description. This is the preferred method specified by Facebook and is implemented in the html head section of your page via a number of meta tags such as <meta property="og:image xxx">. There are meta properties for a multitude of page characteristics including the image, page description, url, title, etc. And this can be done on a page by page basis.Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects. Most major players including Google, Bing, and Twitter now recognize the Open Graph tags and will also use them for their own purposes (thus some of the benefits aren't limited to Facebook. If you would like to know a little more in-depth about Open Graph, here's an overview of Open Graph by Kissmetrics.
Second method: HTML head tags
<link rel="image_src" href="http://entretools.com/images/mypageimage.jpg" />Third method: Facebook inferred by scraping
Third is the default method. This is used when Facebook really doesn't know what you want because there are no specific instructions provided. In this case Facebook does what's called a scrape of your web page. Using various methods, Facebook attempts to fill in information such as the image to be shared, and the description of the post. Sometimes this will be ok, especially on pages that aren't all that important.
How do I control the image used for a Facebook share?
Obviously you could study up on the criteria for Facebook Open Graph and code the meta tags directly into your site pages. I could also do that, but I really don't want to. I would much rather have a tool that I can use that provides this capability for me and does it much simpler and faster than I could by coding it. One of my recommendations for this is the WP Meta SEO plugin by JoomUnited. WP Meta SEO allows you to specify all of the necessary Facebook Open Graph meta information, and it can be done at the site level as well as each individual page or post level. All of the proper markup in the html head section is automatically done for you, allowing you to concentrate on the content and imagery, while the technical page markup is handled in the background.
One of the things I like about the WP Meta SEO plugin is that it looks at the totality of SEO. While this post is addressing the topic of how to determine the image used for a Facebook share, it is worth noting that WP Meta SEO plugin also has the ability to manage other SEO related functions such as your sitemap, meta descriptions, media alt tags, and other SEO related settings. For me, this replaces several other plugins that I normally have to install on any WordPress site that I do.
How do I use WP Meta SEO to control the image used for a Facebook share?
After you have installed and activated WP Mete SEO, when you edit a post in the standard WordPress editor you will see an additional settings pane called WP Meta SEO with two tabs (you might have to scroll down the page to see it.) Selecting the Social for Search Engine tab you will have a dialog form where you can enter the appropriate information. It's a good idea to fill this form out, at least for all your most important posts or pages. The reason is that it helps Facebook and other services understand more precisely what the page is about without having to guess and assume using scraped content. In addition, you get to control exactly the image, title, and content that is shown on Facebook, Twitter, and other services whenever the content is shared.
One thing that you will want to note when providing an image to be used for a Facebook share - the size of the resulting image that Facebook posts is unique. Take a look at the screen capture image. It shows the same image on two different Facebook posts.
The top post image shows the result when the image is simply uploaded to a Facebook post. It starts out as a 1200x1000 image and is scaled proportionately from there.
The bottom post image is the exact same image, but instead of being uploaded as an image to a Facebook post, it was used as the Open Graph image in a WordPress post. In this case Facebook crops the image from the center to a 1200x630 (roughly) image and then scales from there.
Take a close look at the bottom image and you will see that it is cut off at the top and bottom with some of the bottom text missing.
The Learning Points
Make sure that the image you provide for the Open Graph Facebook share is a 1200x630 image for best results. If you don't then Facebook will crop the image and the result simply will not be what you intended.
Here's a tip for setting the Facebook sharing image that I do. When I create a WordPress featured image, I create that image as a 1200x630 image. That way, even if I don't explicitly set a Social Media share image via the og:image tag, Facebook and other platforms will be able to scrape the correctly sized featured image and use it for the Social Media share image.