Facebook ignoring OG image on first share

Question

I'm developing a WordPress site and using the yoast seo plugin to generate an og image on a dynamic page. However, I think this is not related to that. The og image link appears perfectly, but if I click on the share button, no image is included unless I have already clicked on the share button before, or used the facebook developer tool to scrape the page first.

Is this a facebook issue, or a server issue perhaps?

Answer 1

You can avoid this by either getting your content “pre-scraped” by triggering a scrape via API as soon as you publish it, or by specifying the image dimensions via OG meta tags as well.

https://developers.facebook.com/docs/sharing/best-practices#precaching:

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The 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

There are two ways to avoid this and have images render on the first Like or Share action:

1. Pre-cache the image with the URL Debugger
   Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.

2. Use og:image:width and og:image:height Open Graph tags
   Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.

The second one is probably easier to implement; although you might have to modify your plugin that generates the OG meta tags (or choose a different one) if it doesn’t provide an option to output the image dimensions as well already.