Add Open Graph support for link previews

Some (social media) sites render link previews if you paste an URL when creating content. If you don't add the proper tags to your website, most parsers try create some on the fly and fail horribly. So, why not configure your website accordingly in the first place?

The key to all this is the Open Graph protocol, created by Facebook/Meta in the first place, but nowadays also used by other sites like Twitter/X, Discord etc.

All you have to do is to add some meta tags to your HTML header like so:

<!-- Open Graph meta tags  -->
	
	<meta property="og:title" content="Björn Stierand – Digital Garden" />
	<meta property="og:description" content="Triathlete, nerd, and IndieWeb community member from Nuremberg. Personal articles, notes, and ideas – all gathered in my digital garden." />
	<meta property="og:url" content="https://bjoern.stierand.org" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="https://bjoern.stierand.org/img/website-preview.jpg" />
	<meta property="og:locale" content="en_US" />
	<meta property="og:site_name" content="Björn Stierand" />

The image needed for the og-type attribute has to be created as well. It is recommended to use 1200x630px for its dimensions.

To check out if everything worked as expected, you can use tools like OpenGraph.xyz which created link previews used by different social networks on the fly. Et voila!