𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗻𝗴 𝗢𝗚 𝗜𝗺𝗮𝗴𝗲𝘀 𝗳𝗼𝗿 𝗭𝗲𝗿𝗼 𝗗𝗼𝗹𝗹𝗮𝗿𝘀
Du kannst OG-Bilder für hunderte von Artikeln generieren, ohne für eine API zu bezahlen.
Ich verwende Playwright, um Screenshots von HTML-Templates zu erstellen. Das bietet volle CSS-Kontrolle und erfordert keine externen Keys.
Wenn du eine statische Website betreibst, ist dies der beste Weg, um die Batch-Bildgenerierung zu handhaben.
Hier ist die Aufschlüsselung meines Ansatzes.
Warum ich mich für Playwright statt anderer Optionen entschieden habe:
- Cloudinary: Kostet Geld für benutzerdefinierte Schriftarten und hat eine komplexe URL-Syntax.
- Vercel OG: Funktioniert für dynamische Websites, aber ich nutze statische Websites auf Cloudflare.
- Node-canvas: Schwierig in der CI einzurichten aufgrund von C++-Abhängigkeiten.
- Pillow: Schwierig einzusetzen bei komplexen CSS-Layouts oder Flexbox.
Die Playwright-Methode ist einfach. Ich erstelle einen HTML-String mit CSS. Ich übergebe ihn an einen Headless-Browser. Ich mache einen Screenshot.
Der Browser erledigt alles: Schriftarten, Verläufe und Flexbox.
Wichtige technische Details:
- Akzentfarben: Mein Skript verwendet Regex, um Farben basierend auf Artikel-Tags auszuwählen. Ein „AI“-Tag wählt Lila. Ein „Webdev“-Tag wählt Blau.
- Dynamische Größenanpassung: Das Skript passt die Schriftgröße basierend auf der Titellänge an, um Überläufe zu verhindern.
- Schriftarten-Probleme vermeiden: Ich verwende
wait_until="networkidle". Dies stellt sicher, dass Google Fonts geladen werden, bevor der Screenshot erstellt wird. Ohne dies verwendet das Bild eine generische Systemschriftart. - Geschwindigkeitsoptimierung: Ich öffne eine Browser-Instanz und verwende das Page-Objekt für alle Artikel wieder. Das spart in der CI-Pipeline erheblich Zeit.
Der Workflow:
- Das Skript generiert das PNG.
- Das Skript schreibt die Bild-URL zurück in das Frontmatter des Artikels.
- Die CI-Pipeline committet das Bild.
- Die Website wird bereitgestellt.
Dies stellt sicher, dass das Bild live ist, bevor der Artikel auf Plattformen wie Dev.to oder Hashnode veröffentlicht wird.
Wann man dies vermeiden sollte:
Nutze dies nicht für die On-Demand-Generierung. Playwright benötigt etwa 2 Sekunden pro Bild. Es erfordert ein schwerfälliges Browser-Binary. Für eine Live-Anfrage ist es zu langsam.
Nutze dies für Batch-Builds, bei denen du den Zeitpunkt kontrollierst.