Mike Bifulco
BlogWorkAboutNewsletter
Hero

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.

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
.

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

SiteCache reset tool link
Facebookhttps://developers.facebook.com/tools/debug/
LinkedInhttps://www.linkedin.com/post-inspector/
Twitterhttps://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

Get content for developers, designers, and entrepreneurs

Subscribe to get my updates delivered to your inbox. Typically 1-2 emails a month, straight from me to you. 😘 Unsubscribe anytime.

More great resources

Articles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityArticles about Gatsby
© 2019-2021 Mike Bifulco
Built with Next. Source code on GitHub.
Disclaimer: 👋🏽 Hi there. I work as a Developer Advocate at Google. Content on this site contains my own opinions, and does not necessarily reflect the views of my employer.