Share on Facebook - Thumbnail not showing for the first time
You should see it has thumbnail now. But every time I post a new link from my website (configured like the above example), the thumbnail won't show up for the first time. I have to refresh, and then the thumbnail shows.
I should include valid og tags. When I test my links on https://developers.facebook.com/tools/debug
Sometimes it gives me error saying og:image should be bigger. Then I just have to debug it again and then the error is gone.
og:image for all my links is the same. I have provided largest image 1500x1500. There is no redirect when link to the image.
The reason is that FB behind the scenes is still scraping your page and caching the image. The next time, in fact, you have also the image. How to solve it? Manual pre caching: https://developers.facebook.com/docs/sharing/best-practices#precaching
or simply add
<meta property="og:image:width" content="450"/> <meta property="og:image:height" content="298"/>
According to this bug in the Facebook bug tracker:
This is by design, we do not guarantee that the correct image is picked up immediately when you share a link for performance reasons.
Right now, if you want to ensure the right image is used before you post, make sure you trigger a scrape either via the debugger, or simply by loading the preview pane twice (once to trigger a scrape, then once to preview the fully scraped share).
From next week on (11/11), you can also ensure the right image is picked up immediately by describing the image using og:image. Both a width and a height needs to be defined for this to be used.
This solution with iframe is not working anymore! Worked since yesterday 06 February 2017. Facebook just set X-Frame-Options as DENY so you cannot load the sharer url in an iFrame. I'm figuring out another workaround.
Unfortunately adding og:image:width and og:image:height didn't work for me.
I found a workaround for this facebook bug that worked: I added an hidden iFrame with the sharer link in the page footer; in this way the facebook crawler check the page once is loaded.
Example of the hidden iFrame:
<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>
- Go here
- Enter your YouTube video's URL
- Click "Fetch New Scrape Information"
- Go back to Facebook
- Reload the page
- Enter the URL again
And it should work just fine