Open Graph / Twitter Cards in Grav

22. Mai 2019

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 ein 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. Es 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 weiternutzen, daher rufe 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

<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 mein 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.hmtl.twig in assets.

Inder Dokumentation von Grav findet man auch noch ein nützliches Bepiel.