Earlier today, we had a problem at Gymnasium.
We released a new 5 minute tutorial on Making Headings and Lists more Accessible - which is great news! If you build things for the web, and you've got 5 minutes to spare in your day (you do), you should give it a look.
It was immediately apparent that something was off. During our course release process, we missed the fact that Open Graph metadata for that course page wasn't correctly included. Unfortunately, that meant that none of our posts on social media had the beautiful image previews that we'd expect to see (and by extension would likely see far less engagement).
Open Graph metadata tells other services what kind of information is shown when a URL loads, so that they can create a preview of the URL that makes sense. Read more at
Fast forward a short while, and we updated our CMS with the necessary metadata for Open Graph Shares to work correctly. Newly shared links in our team Slack now looked great!
Social networks cache link previews
Rather than redownload the preview image and metadata for a given link every time it's shared, your entire open graph preview is often cached. Depending on the site, that cache may be cleared regularly throughout the day.
Because we had already posted links to our courses, every site we had shared to had cached our shared links with the bare defaults. The result was relatively plain, and not relevant to the content on the page - something like:
Free online courses on design and web development | Gymnasium
With Gymnasium's logo beside it. Just defaults! Not a great look.
Because we were working on a concerted marketing push to announce our new courses, these extremely plain previews were bad news. We've seen from experience that having an attractive (and differentiated) share image helps gain traction during the initial publicity of new content.
You can trigger a cache reset on each of these sites!
After some brief research, we found that there are tools to reset the cache on each of the major social networking sites. They're each extremely easy to use - paste your URL in a box, click a button, and reset the cache if necessary. Here's the ones we found to be useful:
Use these links
- Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
- LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
- Twitter Card Validator: https://cards-dev.twitter.com/validator
That's all there is to it! Hit reset, re-share your link, and you should see your latest Open Graph preview shared. Phew! 😅