Ein Open Graph Image generieren

OpenGraph Image - Maurice Renck

Das OG-Image-Plugin erzeugt für jede deiner Seiten automatisch ein Vorschaubild, welches dann beim Teilen oder einbetten angezeigt werden kann.

Wenn wir unsere Blogposts, Notizen oder andere Seiten bei Mastodon, Bluesky oder wo auch immer teilen, sollen diese Posts gut aussehen. Deshalb wäre es schön, in der jeweiligen Vorschau auch ein Bild anzuzeigen. Das ist über spezielle Meta-Tags möglich. Allerdings haben wir nicht unbedingt für jede Seite, die wir teilen wollen auch ein Bild parat. Für diesen Fall können wir automatisch ein Bild erzeugen.

Das Plugin ermöglicht es uns, verschiedene Szenarien umzusetzen. Im Wesentlichen geht es um drei verschiedene Fälle, die wir abdecken wollen:

1. Wir haben bereits eine Grafik erstellt, die beim Teilen verwendet werden soll
2. Wir haben keine Grafik, eine neue soll erstellt werden
3. Wir haben eine Grafik, diese soll in eine neu zu erstellende Grafik eingebunden werden

Der erste Fall dürfte klar sein: Wir haben bereits ein Bild und wollen das verwenden, ohne dass es verändert wird.

Die beiden anderen Fälle sind etwas komplexer. Haben wir gar keine Grafik zur Verfügung, soll eine neue Grafik erstellt und 1:1 benutzt werden. Im dritte Fall haben wir ein Beitragsbild, das soll aber nicht 1:1 als Bild zum Teilen verwendet, sondern mit Informationen angereichert werden.

Alle diese Fälle werden wir mit dem OG-Image-Plugin umsetzen.

Das Plugin installieren

Das OG-Image-Plugin kann wie alle Kirby-Plugins installiert werden. Ich halte eine Installation über Composer für die beste Methode, weil hier auch unkompliziert Updates installiert werden können, ohne dass wir selber nach Updates gucken müssen. Um das Plugin zu installieren, wechseln wir in der Kommandozeile zunächst in das Verzeichnis, in dem unsere Webseite liegt und geben den folgenden Befehl ein:

composer require mauricerenck/ogimage

Wer die Installation nicht über Composer vornehmen will, kann sich hier eine Zip-Datei herunterladen und diese dann im Verzeichnis der Webseite unter sites/plugins¹ entpacken, sodass ein ogimage Verzeichnis erstellt wird.

Das Plugin ist nun bereit zum Einsatz und kann von uns jetzt konfiguriert werden. Dazu brauchen wir allerdings ein paar Dinge.

Vorbereitungen

Das Plugin braucht zwei Dateien, ohne die es nicht arbeiten kann:

1. Ein Grafik-Template im PNG-Format
2. Eine TrueType Schrift

Das Template kann theoretisch beliebig groß sein, empfohlen wird aber ein Bild der Größe 1600x930 Pixel. Das ist auch die Standardeinstellung für das Plugin. Du musst dir also zunächst ein solches Bild erstellen. Meines sieht so aus:

Wie du siehst, habe ich mich für eine simple Farbfläche entschieden. Unten zeige ich die URL der Webseite an und auf der rechten Seite habe ich einen Bereich ausgeschnitten, sodass ich einen transparenten Kreis habe. Warum ich das gemacht habe, erkläre ich später.

Ich habe mir außerdem die Schrift geschnappt, die ich auch auf meiner Webseite benutze.

Beide Dateien lege ich nun im Verzeichnis assets/og-image ab. Wir werden gleich in der Konfiguration darauf zugreifen.

Das Template verwenden

Jetzt geht es an die Konfiguration des Plugins, noch weiß es nichts von unserem Template oder der Schrift.

Wir öffnen die Konfiguration von Kirby unter site/config/config.php²

Wir legen eine neue Konfiguration für das Plugin an und geben auch direkt den Pfad zu unserer Grafikvorlage an:

"mauricerenck.ogimage" => [
    "image.template" => "assets/og-image/template.png",
],

Wie du siehst, handelt es sich um einen relativen Pfad, immer ausgehend vom Document-Root deiner Kirby-Seite.

Alle künftigen Optionen finden nun innerhalb von "mauricerenck.ogimage" => [ … ] statt.

Den Titel setzen

Als Nächstes konfigurieren wir unseren Text. Das OG-Image soll am Ende den Titel der Seite in der gewählten Schriftart anzeigen. Dazu legen wir ein paar Optionen fest. Wir beginnen mit dem Pfad zur Schriftdatei, genauso, wie wir es beim Template getan haben:

"font.path" => "assets/my-webfont.ttf",

Jetzt können wir das Bild bereits aufrufen, mehr müssten wir nicht tun. Rufen wir also einen Beitrag im Browser auf und hängen /og-image an die URL, erscheint unser neues Bild:

Wie du sieht, hat das Plugin unser Template verwendet und den Titel mit der passenden Schriftart eingefügt. Der Transparente Bereich ist auf einmal farbig, das ändern wir später noch.

Kümmern wir uns erst einmal um unseren Titel. Zum einen soll der nicht so oben links in die Ecke gequetscht werden, außerdem ist er in der Farbe kaum lesbar. Wir werden nun also:

1. Die Farbe ändern
2. Die Position anpassen

"font.color" => [255, 255, 255],
"title.position" => [70, 215],

Die Schriftfarbe setzen wir mit font.color auf einen RGB-Wert, in diesem Beispiel weiß. Die Position des Titels setzen wir mit title.position. Das Array enthält zwei Werte, den X und Y Wert in Pixel.

Rufen wir das Bild im Browser nun erneut auf … ändert sich nichts. Das Plugin zeigt das Bild nicht nur einfach an, sondern legt eine Bilddatei an. Das tut es, damit nicht bei jedem Aufruf ein neues Bild berechnet werden muss. Teilen wir einen Link, könnte es ja sein, dass in kurzer Zeit sehr viele User das Bild sehen, würde es dann jedes Mal neu erzeugt werden, würde der Server vermutlich schnell in die Knie gehen.

Um die Änderungen zu sehen, müssen wir das vorhandene Bild erst einmal löschen.

Nach dem Löschen und Neuladen im Browser sehen wir das neue Bild:

Das sieht schon besser aus. Der Text ist lesbar und klebt nicht in der Ecke. Er ragt aber in den farbigen Bereich und der Zeilenabstand ist mir persönlich noch zu hoch. Das passen wir hiermit an:

"font.lineheight" => 1.5,
"title.charactersPerLine" => 16,

Die Zeilenhöhe legen wir mit font.lineheight fest. Mit title.charactersPerLine legen wir fest, nach wie vielen Zeichen der Text umbrechen soll, sodass er nicht in die farbige Fläche ragt.

Mit dieser Konfiguration sieht das Bild jetzt so aus:

Das gefällt mir schon ganz gut. Jetzt geht es aber ans Eingemachte. Wir werden uns im Folgenden um die oben beschriebenen, drei Szenarien kümmern.

Drei Variationen

Eine selbsterstellte Grafik

Haben wir bereits eine Grafik, die auch beim Teilen angezeigt werden soll, muss kein neues Bild erzeugt werden. Für den Fall bietet das Plugin die Möglichkeit, ein OG-Image-Feld zu konfigurieren. Standardmäßig prüft das Plugin, ob ein Feld mit dem Namen ogImage vorhanden ist. Dieser Feldname kann mit der Option field in der config.php angepasst werden. In unserem Fall passt er so und wir erstellen das Feld im Panel:

ogImage:
    type: files
    label: OG Image
    layout: cards
    multiple: false
    image:
      cover: true

Wir erstellen das Feld als Datei-Feld, in dem wir immer nur ein Bild selektieren können.

Das Plugin macht den Rest. Sobald das OG-Image abgerufen wird, schaut es in das konfigurierte Feld, ist ein Bild vorhanden, wird es ausgespielt, wenn nicht, ein neues erzeugt.

Eine Grafik einbetten

Wenn ein Beitragsbild vorhanden ist, soll dieses in unser OG-Image eingebettet werden, dafür haben wir den transparenten Bereich auf der rechten Seite angelegt.

Zuerst müssen wir dem Plugin sagen, wo es unser Beitragsbild findet. Damit es an der richtigen Position zu sehen ist, schneiden wir es zu und schieben es nach rechts:

"heroImage.field" => 'hero',
"heroImage.cropsize" => [610, 610],
"heroImage.position" => [900, 163],

Unser Kreis ist etwa 600 Pixel groß, ich habe etwas Toleranz hinzugenommen. Unser Beitragsbild liegt im Feld hero und wird auf 610x610 zugeschnitten. Wir schieben es 900 Pixel nach rechts und 163 nach unten.

Jetzt können wir ein Beitragsbild setzen und das OG-Image abrufen:

Den Kreis füllen

Wenn kein Beitragsbild vorhanden ist, wird der Kreis derzeit mit einer Farbe gefüllt. Selbstverständlich können wir diese Farbe ändern. In dieser Variante wollen wir den Kreis einfach mit der Hintergrundfarbe des Templates auffüllen, sodass er unsichtbar wird:

"heroImage.fallbackColor" => [40, 46, 59],

Wie schon bei der Schriftfarbe setzen wir auch hier einen RGB-Wert. Dieser entspricht nun der Hintergrundfarbe der Grafik. Unser OG-Image sieht nun so aus:

Sehr schlicht, aber funktional.

Ein Logo anzeigen

Für mich eine Spur zu schlicht. Ich würde stattdessen lieber ein Logo anzeigen. Dafür gibt es eine weitere Option, parallel zur Fallback-Farbe, kann ich auch ein Fallback-Bild konfigurieren.

Zuerst habe ich mir ein Bild erzeugt, welches das Logo an der passenden Position enthält:

Jetzt kann ich dieses Bild wieder unter assets/og-image ablegen. Ich nenne es fallback.png. In der Konfiguration setze ich nun einfach den Bildpfad:

"heroImage.fallbackImage" => "assets/og-image/fallback.png",

Rufe ich das OG-Image nun erneut auf, sieht es so aus:

Das sieht doch schon ganz gut aus. Jetzt können wir natürlich weiter verfeinern, mit Schriftgrößen und Position experimentieren, aber damit lasse ich dich jetzt alleine.

Lass uns zum Abschluss noch einmal auf die gesamte Konfiguration schauen:

"mauricerenck.ogimage" => [
    "image.template" => "assets/og-image/template.png",

    "font.path" => "assets/spectral-regular-webfont.ttf",
    "font.color" => [255, 255, 255],
    "font.lineheight" => 1.5,

    "title.charactersPerLine" => 16,
    "title.position" => [70, 215],

    "heroImage.field" => 'hero',
    "heroImage.cropsize" => [610, 610],
    "heroImage.position" => [900, 163],
    "heroImage.fallbackColor" => [40, 46, 59],
    "heroImage.fallbackImage" => "assets/og-image/fallback.png",
],

Wir setzen unser Template, den Pfad zur Schrift und ihre Farbe und Zeilenhöhe. Schließlich geben wir dem Titel noch eine Position und sagen, wann er umbrechen soll. Wir konfigurieren unser Beitragsbild, setzen dafür den Feldnamen fest, sagen, dass es zugeschnitten und verschoben werden soll. Schließlich legen wir noch eine Fallback-Farbe und unser Fallback-Logo fest.

Damit ist unsere Konfiguration abgeschlossen und künftig hat jede unserer Seiten ein OG-Image, welches wir im Panel entweder selber festlegen können, oder welches sich entsprechend unser Beitragsbild oder ein Fallback schnappt.

Viel Spaß beim selbst ausprobieren!