On one of my client’s sites they have the regular social sharing icons. When a visitor clicks on the share to facebook link it populates that share with some default info, and very importantly the image. This is important to them because they run image voting sites.
I was asked to see if I could fathom why the image was missing on facebook sharing. The first thing I checked was the open graph (OG) tags on the site.
The code in the head section of the page looked like this:
[snippet slug=og-snippet lang=html]
Not being an expert in open graph, this looked correct, and besides, it was working on 2 other sites in the exact same way, but for some reason on this site it did not load the image.
I then took at a look at Facebook’s share debugger where you can enter your URLs to see what facebook will see.
That showed me this warning. Facebook’s share debugger was warning me that the og image tags were missing width and height dimensions and so it would not show the image.
If you click on their “Learn More” link they explain that without the width and height of the image, facebook’s sharing will not display the image to the first person to share the page but that they will get the image asynchronously and then show it to subsequent visitors. In my experience that didn’t actually happen. Once the imageless share took place, it never seemed to get the image. This does make sense as facebook caches the shares they’ve fetched and they don’t refetch the page each time.
The explain that there are 2 ways to get your images showing with facebook’s social sharing:
- Specify the width and height of the image
- Preload their cache by going to the share debugger and fetching the page from there.
The problem with that approach is that some of these sites get very heavy peak periods where we have to manage server loads very carefully. As I had not worked on that part of the site before I was blissfully unaware. But essentially this meant that if we were hitting a peak of 250 new unique visitors per second then we were also doing 250 posts to facebook per second. And were were doing that every time, regardless of whether that image had been sent to facebook or not. Craziness!
I then updated the og tags to output the following:
[snippet slug=new-og-tags lang=html]
and now my sharing worked beautifully, with the facebook share image attached, and no more posts to facebook with each page load.
John is a freelance Full Stack Developer. Experienced in PHP, Laravel and Vue3/Nuxt3 he can code anything you need.
Based in South Africa, I am available for PHP, Laravel or Vue3/Nuxt3 freelance jobs in person or remotely.