Der Open Graph ist einer der wenigen guten Dinge, die aus dem Hause Facebook kommen. Er standardisiert die Weitergabe von Metainformationen.

Eigentlich sind hier keine if-Schleifen nötig, da alle Informationen bei jeder Seite oder jedem Blogpost vorliegen sollten. Nur beim Vorschaubild gibt es eine kleine Abweichung, da ich in Kirby mit der Taxonomie coverimage gearbeitet habe. Diese Metainformationen möchte ich natürlich weiter nutzen, daher rufe ich in der letzten Zeile für das Attribut og:image den Wert von coverimage auf, sollte coverimage nicht gegeben sein, wird das erste Bild im Ordner genommen.

Hier also mein Code für Open Graph

<meta name="og:site_name" property="og:site_name" content="{{ site.title }}" />
<meta name="og:title" property="og:title" content="{{ page.title }}" />
<meta name="og:description" property="og:description" content="{{ page.summary|e }}" />
<meta name="og:type" property="og:type" content="article" />
<meta name="og:url" property="og:url" content="{{ page.url(true) }}" />
<meta name="og:image" property="og:image" content="{{ uri.base ~ (page.header.coverimage ? page.media.images[page.header.coverimage].url : page.media.images|first.url) }}" />

Twitter Cards sind im Wesentlichen dasselbe, haben aber kleine Abweichungen.

Eine nennenswerte Abweichung ist das Attribut twitter:site. Hier kann man den Twitter-Account einer Seite hinterlegen. Es gäbe laut der Dokumentation auch noch das Attribut twitter:creator. In meinem Fall wären das aber derselbe Account, daher habe ich auf twitter:creator verzichtet.

Beim Attribut twitter:image bin ich genauso verfahren wie bei og:image.

Wie folgt der Code für Twitter Cards

<meta name="twitter:card" property="twitter:card" content="summary" />
<meta name="twitter:site" property="twitter:site" content="@maik_wi" />
<meta name="twitter:title" property="twitter:title" content="{{ page.title }}" />
<meta name="twitter:description" property="twitter:description" content="{{ page.summary|e }}" />
<meta name="twitter:image" property="twitter:image" content="{{ uri.base ~ (page.header.coverimage ? page.media.images[page.header.coverimage].url : page.media.images|first.url) }}" />

In meinem Theme steckt der ganze Metakram in base.html.twig in assets.

In der Dokumentation von Grav findet man auch noch ein nützliches Beispiel.