Erstelle ein Bild-Template als Grundlage, lade einen Font hoch und gestalte dein OG-Image mit nur wenigen Handgriffen. Das Plugin hilft dir dabei, immer das passende Bild auszuspielen. Du kannst:
- Pro Seite ein eigenes OG-Image im Panel festlegen
- Ein Bild deines Beitrags in das OG-Image einbetten
- Ausschließlich das von dir erstellte Template verwenden
Definiere ein Quellfeld um z.B. den Seitentitel ins Bild zu integrieren. Lege einen Font und die Position des Textes fest. Du kannst vorhandene Bilder ebenfalls einbetten oder dein Template mit Farben auffüllen.
Nehmen wir an, du hast einen Blogpost mit dem Titel "How I added an Open Graph image to my Kirby Site" und dem Foto einer Blumenwiese als Beitragsbild.
Aus deinem Template:
Wird dann:
Wenn kein Beitragsbild vorhanden ist, kannst du das Bild mit einer Farbfläche auffüllen, so dass der transparente Bereich entweder farbig hervortritt:
Oder gar nicht sichtbar ist:
Du könntest auch ein Fallback-Bild für dein Beitragsbild festlegen, dann wird dieses statt einer Farbe angezeigt, so könntest du bei einem fehlenden Beitragsbild bspw. dein Logo anzeigen:
Templates, Fonts, Position, Zuschnitte und Vieles mehr, kannst du über die Optionen in deiner config.php festlegen.
Das Plugin stellt für jede deiner Seiten eine Route zur Verfügung, hänge einfach an jede Seite ein /og-image an die Url und das Bild wird erzeugt oder ein bereits erzeugtes Bild angezeigt. Im <head> Bereich deiner Webseite musst du dann nur noch mit dem passenden Meta-Tag versehen und jede deiner Seiten kommt mit einem schönen Vorschaubild daher.
Welche Optionen es gibt und wie du den Meta-Tag einbindest, kannst du bei GitHub nachlesen.
Unterstütze die Entwicklung
Wie die meisten meiner Plugins, stelle ich auch dieses frei zur Verfügung. Du kannst es kostenlos für dich oder deine Kunden nutzen. Gerade wenn du es kommerziell einsetzt, würde ich mich aber freuen, wenn du meine Arbeit an diesem Plugin bei Steady unterstützen würdest. Vielen Dank!