Vor einigen Wochen wechselte ich mein Content Management System von Kirby zu Grav. Die Gründe dafür findet ihr hier. Nach dem Wechsel fehlt es immer noch an Kleinigkeiten. Zum Beispiel habe ich noch keine Vorschaugrafiken, wenn man einen Link meines Blogs teilt. Das wollte ich nun nachholen und hier kurz aufzeigen, mit welcher sehr einfachen Lösung ich das Problem bewältigt habe.

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.