𝗢𝗚-𝗮𝗳𝗯𝗶𝗲𝗹𝗱𝗶𝗻𝗴𝗲𝗻 𝗴𝗲𝗻𝗲𝗿𝗲𝗿𝗲𝗻 𝘃𝗼𝗼𝗿 𝗻𝘂𝗹 𝗱𝗼𝗹𝗹𝗮𝗿

Je kunt OG-afbeeldingen genereren voor honderden artikelen zonder te betalen voor een API.

Ik gebruik Playwright om screenshots te maken van HTML-templates. Het geeft je volledige CSS-controle en vereist geen externe keys.

Als je een statische site beheert, is dit de beste manier om batch-afbeeldinggeneratie af te handelen.

Hier is een overzicht van mijn aanpak.

Waarom ik voor Playwright heb gekozen in plaats van andere opties:

  • Cloudinary: Kost geld voor aangepaste lettertypen en heeft een complexe URL-syntax.
  • Vercel OG: Werkt voor dynamische sites, maar ik gebruik statische sites op Cloudflare.
  • Node-canvas: Moeilijk op te zetten in CI vanwege C++-dependencies.
  • Pillow: Moeilijk te gebruiken voor complexe CSS-lay-outs of flexbox.

De Playwright-methode is eenvoudig. Ik bouw een HTML-string met CSS. Ik geef deze door aan een headless browser. Ik maak een screenshot.

De browser regelt alles: lettertypen, gradiënten en flexbox.

Belangrijke technische details:

  • Accentkleuren: Mijn script gebruikt regex om kleuren te kiezen op basis van artikel-tags. Een "AI"-tag kiest paars. Een "Webdev"-tag kiest blauw.
  • Dynamische grootte: Het script past de lettergrootte aan op basis van de titellengte om overflow te voorkomen.
  • Font-problemen voorkomen: Ik gebruik wait_until="networkidle". Dit zorgt ervoor dat Google Fonts worden geladen voordat de screenshot wordt gemaakt. Zonder dit gebruikt de afbeelding een generiek systeemlettertype.
  • Snelheidsoptimalisatie: Ik open één browser-instantie en hergebruik het page-object voor alle artikelen. Dit bespaart aanzienlijk veel tijd in de CI-pipeline.

De workflow:

  1. Het script genereert de PNG.
  2. Het script schrijft de afbeeldings-URL terug naar de frontmatter van het artikel.
  3. De CI-pipeline commit de afbeelding.
  4. De site wordt gedeployed.

Dit zorgt ervoor dat de afbeelding live is voordat het artikel wordt gepubliceerd op platforms zoals Dev.to of Hashnode.

Wanneer je dit moet vermijden:

Gebruik dit niet voor on-demand generatie. Playwright doet er ongeveer 2 seconden over per afbeelding. Het vereist een zwaar browser-binary. Het is te traag voor een live verzoek.

Gebruik dit voor batch-builds waarbij je de timing zelf beheert.

Bron: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4