Troubleshooting: Facebook sharing issues

Follow

Facebook does link sharing a little differently than most other services. Facebook expects the Title, Description, and Thumbnail of a page that is to be shared to be defined in the actual HTML code of the page.

To change the title, description or image used by Facebook, you will need to modify your pages. You can either do this by editing your theme or HTML, or by using a SEO plugin for your CMS. Try running Facebook's URL Debugger on your pages to see how Facebook is reading your site. For more technical information on setting your pages up for Facebook sharing, see the "Open Graph tags" section in Facebook's documentation.

 

How Facebook Reads your Content

When content is published to the web, Facebook scans the page HTML source and caches information that is used to identify the page. If other Open Graph Meta Tags have not been explicitly defined, Facebook attempts to extract text for both the title and description. This is why changes that may be applied immediately after publishing are not always reflected in the Facebook share dialog. Shareaholic passes your URL through to Facebook, and Facebook populates the data it has cached for that URL.

To verify this, open the unique page created for the published content, and after viewing the data that populates when interacting with the Facebook button in our Share Buttons app, compare this to what appears when using Facebook's Share Bookmaklet. The share dialog should contain identical information.

 

How does Shareaholic influence which image is picked?

If you're using our WordPress plugin, by default the "og:image" Open Graph HTML 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 as described later in this article.

 

Using the Facebook Debugger Tool

Because Facebook caches the data used to identify each page, after making any change to your published content, it is recommended to run the URL through the Facebook Debugger Tool. This will serve to both trigger a re-scan of your page source so that the cached data can be refreshed to reflect your changes and alert you to any Open Graph issues that need to be addressed. After passing your URL through this tool, you'll also see a readout of what Facebook is caching for the page.

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 and your new Facebook story.

Note: If there is still a discrepancy between the Facebook Debugger readout and the Open Graph Meta Tags in your page source, clear all 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.

 

Review your Open Graph Meta Tags

1. Right-click and select View page source.

view-page-source.png

 

2. 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:

view-source-find-og-tags.png

 

3. Optionally Disable Shareaholic's tags (WordPress plugin)

You may have another plugin installed that injects Open Graph Meta Tags into your page, 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:

shareaholic-advanced-settings-disable-open-graph-tags.png

 

How to turn off Shareaholic Open Graph tags on individual posts/pages:

disable-open-graph-for-individual-entries.png

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.

 

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.

 

Having image issues when sharing to LinkedIn or Google Plus?

 

Was this article helpful?