When I migrated my blog to Gatsby it took me a while to find a theme that looked good and satisfied my requirements. In the end I was not able to find an existing Gatsby theme, so I settled on the Future Imperfect theme of HTML5 UP and transformed their template into a Gatsby theme. Implementing the React part of the theme from scratch meant that I needed to integrate all logic like pagination, a RSS feed, etc. from scratch as well.

One thing I was missing so far was a proper integration for the Open Graph protocol. The Open Graph protocol is used by other services (e.g. Google, Facebook, Twitter, Telegram) to determine how to display link previews when someone posts a link to another website. To add Open Graph support to a website it is necessary to add some meta tags to the HTML head of the site. A more detailed explanation of the supported tags is available in this post on dev.to and Gatbys itself has a nice tutorial on how to integrate Open Graph.

While integrating Open Graph to my blog it bothered me that it is a bit tricky to debug. It is easy to check if the meta tags are generated and added to the HTML output but that does not show how other sites will display it and I don’t want to tweet a link each time just to see what the result would look like on Twitter. So I looked around for tools that render a preview to verify my implementation — the usual search engines produce a lot of results that explain what Open Graph is and how to use it, which hides the few actual preview tools in the results. After a while I found the following sites helpful:

• https://metatags.io: Works without an account and renders previews for Google, Facebook, Twitter, Linkedin, Pinterest and Slack. From all the tools this is the most universal one. The only downside is that it is not exact, e.g. for Twitter it always renders a big card — even if <meta name="twitter:card" content="summary"> is set, which should produce a smaller card. But in general the site gives a pretty good overview of what the results will look like and should be enough for most use-cases.
• http://debug.iframely.com: Does not render real previews, but can be helpful to verify which meta tags are found from an external point of view.
• https://cards-dev.twitter.com/validator: Shows an exact preview of Twitter cards which is nice. Needs a Twitter account though.
• https://developers.facebook.com/tools/debug: Same as the previous one but for Facebook, also needs a Facebook account — who has a Facebook account in 2020 anyway?