How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook

If you're dealing with Open Graph metadata for your site, and you can't figure out how to get your OG content to update after you make changes, this is your guide.

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.

After the course was made public, our marketing wizard did her magic and started posting to our various social media pages: Facebook, Twitter, and LinkedIn.

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

ogp.me

.

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!

screenshot of a post in slack
Screenshot from slack after the fix - our new course was shared with the correct image

.

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:

  • 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! 😅

Mike Bifulco headshot

Subscribe to Tiny Improvements

A newsletter for product builders, startup founders, and indiehackers, who design with intention, and my thoughts on living a life you love in a busy world.

    Typically once a week, straight from me to you. 😘 Unsubscribe anytime.


    Get in touch to → Sponsor Tiny Improvements

    ***
    Hero
    How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook

    If you're dealing with Open Graph metadata for your site, and you can't figure out how to get your OG content to update after you make changes, this is your guide.

    seotoolsgatsbydeveloper

    More great resources

    Articles about React.jsArticles about Remix.runArticles about Next.jsArticles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityBrowse all topics →
    © 2019-2023 Mike Bifulco

    Get in touch to → Sponsor Tiny Improvements

    Disclaimer: 👋🏽 Hi there. I work as a co-founder & CTO at Craftwork. These are my opinions, and not necessarily the views of my employer.
    Built with Next. Source code on GitHub.