How to Set the Image of Your WordPress Page Content when Sharing to Facebook

When a visitor shares content from your website to Facebook, there is specific metadata that needs to be present to generate a post with a preview of the content being shared. This information, also known as Open Graph Markup, can be modified using the Open Graph for Facebook, Google+ and Twitter Card Tags plugin for WordPress. This plugin allows you the ability to customize the Open Graph Metadata using the Page/Post Editor interface. In this guide, you can learn how to use this plugin, allowing you to easily customize the image selected for sharing on Facebook.

Add an Image

When Facebook generates a preview of your Page content, it is searching for the Metadata Markup, including “og:image“. Then, Facebook loads that image for the post that will be made once shared. This variable is provided, based on priority, according to your Open Graph for Facebook Settings. In the following section, you can learn the various methods for how to customize the image that is loaded when your Page is shared on Facebook.

Default Image for All Pages

If you want the same image to load for all your Pages, you can set a default image in the Open Graph for Facebook Settings. Simply follow the instructions below.

  1. Log into your WordPress Administrative Dashboard.
  2. Hover over Settings and click on Open Graph for Facebook, Google+ and Twitter Card Tags.
  3. From the General tab, scroll to the Image settings section. Click on Upload/Choose to open the Select image pop-up. From here you can Upload Files or select an image from the Media Gallery. Once you upload/select the image, click on the Use this image button.
  4. Review the On Post/Page, use image from: section. Here, you can prioritize the order of which image should be used, when sharing to Facebook. Ideally, you can set the default image –as a placeholder– until you have specified an image on a particular Page, using the Featured Image or Open Graph (Use this image) fields located in the Page editor. Select the options (displayed below) to follow along with the rest of the instructions in this guide.

    1) “Open Graph Image” custom field on the post

    2) Post/page featured image

    5) Default image specified above

  5. Click the Save Changes button at the bottom of the page.

Featured Image

In the Open Graph for Facebook Settings, the options selected prioritize using a Featured Image on a Page over the default image previously configured. Since a unique image may not be necessary for every Page created, setting the default –to fall back on– ensures that there is always an image associated with your website content, when it is shared to Facebook. In this section, you can learn how to set the Featured Image for a specific Page, as the image in the Facebook post, when sharing that particular Page.

  1. Log into your WordPress Administrative Dashboard.
  2. Hover over Pages then click on All Pages.
  3. Click on the Page Title that you would like to set an alternative photo for.
  4. Once the Page Editor loads, scroll down to locate the Featured Image field. Click on the Set featured image button to open the Featured Image pop-up.
  5. Upload/select the image you want to display when sharing this particular Page to Facebook, then click the Set featured image button.
  6. Scroll up and click the Update button to save your changes.
  7. Now that you have set a featured image, the default image will no longer display for this particular Page, when shared on Facebook. However, any other Pages that do not have a featured image set, will continue to use the default image according to the Open Graph for Facebook General Settings.

Page Editor Open Graph for Facebook Field

  1. Log into your WordPress Administrative Dashboard.
  2. Hover over Pages then click on All Pages.
  3. Click on the Page Title that you would like to set an alternative photo for.
  4. Once the Page Editor loads, scroll down to locate the Open Graph for Facebook, Google+ and Twitter Card Tags field. Click on the Upload/Choose button to open the Select image pop-up.
  5. Upload/select the image you want to display when sharing this particular Page to Facebook, then click the Use this image button.
  6. Scroll up and click the Update button to save your changes.
  7. Now that you have selected an image in the Open Graph for Facebook field, the default and featured images will not be used for this particular Page, when shared on Facebook.

Now that you are familiar with how to modify the image used by Facebook when sharing a Page of your website, you may want to adjust the excerpt that Facebook displays –as the description of your Page content– when shared.

JB
John-Paul Briones

John-Paul is an Electronics Engineer that spent most of his career in IT. He has been a Technical Writer for InMotion since 2013.

More Articles by John-Paul

Was this article helpful? Let us know!