GitLab

If you take a look at, e.g., Confronting Briar with disasters, a site built by Hugo, too, you can see the following content in the HTML's header:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://nico.dorfbrunnen.eu/images/posts/2021/briar-disaster/wildfire.jpg"/>

<meta name="twitter:title" content="Confronting Briar with disasters"/>
<meta name="twitter:description" content="While Briar was designed for people affected by surveillance, another potential use case scenario are natural disasters."/>

<meta property="og:title" content="Confronting Briar with disasters" />
<meta property="og:description" content="While Briar was designed for people affected by surveillance, another potential use case scenario are natural disasters." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://nico.dorfbrunnen.eu/posts/2021/briar-disaster/" />
<meta property="og:image" content="https://nico.dorfbrunnen.eu/images/posts/2021/briar-disaster/wildfire.jpg" />
<meta property="article:published_time" content="2021-08-22T00:00:00+00:00" />
<meta property="article:modified_time" content="2021-08-22T00:00:00+00:00" />

This metadata gives sites like Mastodon and Twitter the information that they can use those images, titles and texts to provide more information when showing the links.

Adding this to Briar's website is as easy as including some templates in the website's header.