IN THIS ARTICLE
- How Facebook determines Link Title, Image and Description for Facebook Sharing
- How to customize the Link Title, Thumbnail and Description for Facebook Sharing
- How to Verify that Facebook is Picking Up Correct Data
- How to Update Facebook's Content Cache using the Facebook Debugger Tool
- How does Shareaholic influence which Preview Image is picked?
- How to fix the Blank Thumbnail Preview for the First Share
- How to Review your Open Graph Meta Tags in your HTML Source
- The wrong image is still appearing in Facebook, what can I do?
Facebook expects the Title, Description, and Thumbnail of a page to be defined in the actual HTML code of the webpage. As does WhatsApp and LinkedIn. We consider Open Graph Tags to be a must-have for any website serious about driving social referral traffic and maintaining total control over the preview of their shared links.
How Facebook determines Link Title, Image and Description for Facebook Sharing
When the Facebook Share Window pop-up is opened for the first time for a given URL, Facebook scrapes the page HTML source and caches information it finds on its servers. Note that the contents of the URL need to be publicly accessible to Facebook so that it can fetch and scrape the page HTML.
Facebook prioritizes information provided in Open Graph Meta Tags. For example:
<meta property='og:title' content='Title of the article'/>
<meta property='og:image' content='https://media.example.com/1234567.jpg'/>
<meta property='og:description' content='Description that will show in the preview'/>
<meta property='og:url' content='https://www.example.com/page'/>If Open Graph Meta Tags have not been explicitly defined, Facebook attempts to evaluate what the best title, thumbnail, and description should be by evaluating other title/description meta tags on the page or, if not set correctly, it takes the first paragraph of the article, just like Google.
How to customize the Link Title, Thumbnail and Description for Facebook Sharing
To customize the title, description or thumbnail used by Facebook define Open Graph Meta Tags for each page. You can do this by editing your theme or HTML. If you're using WordPress or Drupal, you can use any popular SEO plugin. Many other popular CMS' have support for Open Graph Meta Tags baked in.
How to Verify that Facebook is Picking Up Correct Data
Run the Facebook's URL Debugger for any URL to see how Facebook is scanning your site. All you have to do is copy-paste the link, click "debug", check what's wrong and customize.
For more technical information on setting your pages up for Facebook sharing, see the "Open Graph tags" section in Facebook's documentation.
How to Update Facebook's Content Cache using the Facebook Debugger Tool
Facebook caches link information for 30 days. This is why any changes that you may make to your Open Graph Tags are not always immediately reflected in the Facebook share dialog.
After making any change to your published content, it is recommended that you run the URL through the Facebook Debugger Tool. This will both trigger a re-scan of your page source so that Facebook's cached data can be refreshed to reflect your latest changes and alert you to any Open Graph issues that may need to be addressed.
Once you have reset Facebook's cache for the URL following the instructions above, reload/refresh your published page and press the Facebook button to view the share dialog with the updated preview.
Note: If there is still a discrepancy between the Facebook Debugger output and the Open Graph Meta Tags in your page source, clear all website and Facebook caches again, then identify any other plugins that are inserting Open Graph tags on your website. Review their support documentation and/or contact the plugin publisher for further assistance.
How does Shareaholic influence which Preview Image is picked?
If you're using Shareaholic's WordPress or Drupal plugin, by default the "og:image" Open Graph Meta Tag is automatically inserted into your pages whenever possible. To set and insert the og:image tag, the Shareaholic plugin first checks if there is a featured image defined. If a featured image is not present, the plugin automatically tries to select a suitable image from the rest of your post.
Note: If you don't want the Shareaholic plugin to attempt to set your og:image tags, you can disable this feature under the Plugin's Advanced Settings section.
Optionally Disable Shareaholic's tags (WordPress plugin)
You may have another WordPress plugin installed that manages your Open Graph Meta Tags, allowing a more finely tuned Open Graph experience. If so, you can choose to disable the Open Graph function in the Shareaholic plugin. Having more than one og:image assigned will not cause an error, but it could be redundant or confusing for a website owner to understand which tag is being used. Shareaholic's Open Graph tags may be disabled site-wide, or on a page-by-page basis.
How to turn off Shareaholic Open Graph tags for your entire site:
How to turn off Shareaholic Open Graph tags for individual posts/pages:
Note: After making changes to your settings, you may need to empty all caches in any caching plugins along with your browser's cache to see the changes reflected in your page source.
How to fix the Blank Thumbnail Preview for the First Share
The Facebook crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image.
To avoid this, use og:image:width and og:image:height Open Graph tags to specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
How to Review your Open Graph Meta Tags in your HTML Source
-
Right-click and select View page source
-
Use your browser's Find tool and input og: to locate all Open Graph Meta Tags. The og:image tag our WordPress plugin inserts will be clearly labeled as seen below:
Is the wrong image still appearing in Facebook?
If you've gone through the documentation above and are sure that...
- Your open graph tags are properly inserted into your pages
- The Facebook Debugger tool reflects the correct information/tags about your page
- Everything looks correct when previewing how the shared content will display on Facebook
- It could be that your image or content do not adhere to Facebook's content guidelines, and they have selected a default or alternate image for your post. This could happen if the image were automatically identified by Facebook's algorithms as having inappropriate content or a deceptive design element.
- Ensure all links are absolute links. Facebook will error if you use relative links for either the og:image or og:url tags.
Correct:
<meta property='og:image' content='https://media.example.com/1234567.jpg'/>Incorrect:
<meta property='og:image' content='/1234567.jpg'/> - The minimum allowed image dimension is 200 x 200 pixels. Ideally, use images that are at least 1200 x 630 pixels for the best display on high-resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.