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.
WARNING: The instructions in this guide require that you have installed the Open Graph for Facebook, Google+ and Twitter Card Tags By Webdados plugin. If you have not installed the plugin yet, you can follow the instructions in our guide, “How to Install Open Graph for Facebook, Google+ and Twitter Card Tags“. Once you have installed the plugin, you will be able to follow the instructions below.
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.
- Log into your WordPress Administrative Dashboard.
- Hover over Settings and click on Open Graph for Facebook, Google+ and Twitter Card Tags.
- 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.
NOTE: The recommended image size/dimensions are 1200x630px. This is important to ensure that your image is properly loaded/cropped for the Facebook post/preview and may display errors in the Facebook Sharing Debugger when testing.
- 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
NOTE: If you prefer that the default image specified be used for all Pages shared to Facebook, then you only need to select 5) Default image specified above. This will prevent the featured image or any other images on your Pages from being used and only allow the default image to be used when sharing any Page to Facebook.
- 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.
IMPORTANT: It may be necessary to adjust the Screen Options for the necessary Page Editor field to appear. Click on the button labeled Adjust Screen Options (below) to expand and follow the steps in that section to learn how to adjust the Page Editor view to include Featured Image field.
Adjust Screen Options
- Log into your WordPress Administrative Dashboard.
- Hover over the Pages menu option, then click on All Pages.
- Click on any Page title to navigate to the editor.
- In the upper-right, click on the Screen Options.
NOTICE: Once clicked, the screen will display a few settings at the top of the editor.
- Review the Boxes section for the following field:
Featured Image
NOTICE: If the item has a check mark in the check box, then it is enabled. However, if it does not have a check mark, click on the check box to enable it.
- Click the Screen Options button to collapse the menu.
With this field enabled, you will now have the ability to add the Open Graph Markup, through the interface you use to create/edit your Pages in WordPress.
- Log into your WordPress Administrative Dashboard.
- Hover over Pages then click on All Pages.
- Click on the Page Title that you would like to set an alternative photo for.
- 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.
- Upload/select the image you want to display when sharing this particular Page to Facebook, then click the Set featured image button.
NOTE: The recommended image size/dimensions are 1200x630px. This is important to ensure that your image is properly loaded/cropped for the Facebook post/preview and may display errors in the Facebook Sharing Debugger when testing.
- Scroll up and click the Update button to save your changes.
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
IMPORTANT: It may be necessary to adjust the Screen Options for the necessary Page Editor field to appear. Click on the button labeled Adjust Screen Options (below) to expand and follow the steps in that section to learn how to adjust the Page/Post Editor view to include Open Graph for Facebook field.
Adjust Screen Options
- Log into your WordPress Administrative Dashboard.
- Hover over the Pages menu option, then click on All Pages.
- Click on any Page title to navigate to the editor.
- In the upper-right, click on the Screen Options.
NOTICE: Once clicked, the screen will display a few settings at the top of the editor.
- Review the Boxes section for the following fields:
Open Graph for Facebook, Google+ and Twitter Card Tags
NOTICE: If the item has a check mark in the check box, then it is enabled. However, if it does not have a check mark, click on the check box to enable it.
- Click the Screen Options button to collapse the menu.
With this field enabled, you will now have the ability to add the Open Graph Markup, through the interface you use to create/edit your Pages in WordPress.
- Log into your WordPress Administrative Dashboard.
- Hover over Pages then click on All Pages.
- Click on the Page Title that you would like to set an alternative photo for.
- 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.
- Upload/select the image you want to display when sharing this particular Page to Facebook, then click the Use this image button.
NOTE: The recommended image size/dimensions are 1200x630px. This is important to ensure that your image is properly loaded/cropped for the Facebook post/preview and may display errors in the Facebook Sharing Debugger when testing.
- Scroll up and click the Update button to save your changes.
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.
