OG-afbeeldingsgenerator — Social Share Image Maker

Een Open Graph-afbeelding is de afbeelding die verschijnt wanneer een link in een chat, tweet of Slack-kanaal wordt geplakt — en elk platform dat zo'n afbeelding weergeeft, verwacht een canvas van ongeveer 1200×630 pixels, het formaat waar Facebook's og:image en Twitter's summary_large_image-kaarten beide omheen zijn ontworpen. Krijg je het formaat niet goed, dan wordt de afbeelding bijgesneden, wazig of samengedrukt; krijg je de opmaak niet goed, dan leest de titel als een onleesbaar flard tegen een drukke foto. Deze tool stelt de afbeelding samen op de werkelijke doelresolutie met de Canvas 2D API, dus wat je in het voorbeeld ziet, is exact het pixelraster dat in de PNG wordt opgeslagen.

Kies een achtergrond — een effen kleur, een lineair verloop met twee kleurpunten die je zelf kiest, of een geüploade foto die wordt bijgesneden om het volledige 1200×630-frame te vullen op dezelfde manier als CSS background-size: cover dat zou doen, in plaats van uitgerekt te worden. Typ een titel en een optionele ondertitel: beide worden teken voor teken gemeten tegen de eigen fontmetrieken van het canvas, zodat een kop die te lang is om op één regel te passen, op een echte woordgrens naar een tweede of derde regel wordt afgebroken in plaats van van de rand af te lopen of onzichtbaar te worden afgekapt. Kies centreren of links uitlijnen, kies een tekstkleur die leesbaar is tegen je achtergrond en plaats een optioneel logo in de hoek op een vast, goed leesbaar formaat.

Onder het canvas tonen vier kleine kaarten bij benadering hoe de voltooide afbeelding eruitziet zodra een echt platform deze in zijn eigen kader verpakt: de kaart van Twitter/X toont alleen het domein en een vette titel onder de afbeelding zonder beschrijvingsregel, Facebook voegt een hoofdletterdomeinstrook boven een titel-en-beschrijvingsblok toe, LinkedIn plaatst het domein onder de titel zonder enige beschrijving, en Discord's embed plaatst het domein, de titel en de beschrijving in zijn eigen donkere thema boven de afbeelding. Dit zijn vormgegeven benaderingen voor planningsdoeleinden — duidelijk als illustratief gelabeld, met een domeinregel die je zelf typt — en geen live ophaling of screenshot van de daadwerkelijke platforms, aangezien het delen van een link en het laten lezen van de echte og:image- en og:title-metatags van je pagina door de crawler van elk platform is wat de daadwerkelijke live kaart produceert.

Alles wordt lokaal weergegeven op een HTML canvas-element in je browser: de titel, ondertitel, geüploade achtergrond en logo verlaten nooit je apparaat, en het geëxporteerde bestand is een schone canvas.toBlob() PNG die alleen bevat wat jij hebt samengesteld — er worden geen weergavekaderranden, nepbrowserbalken of platformlogo's meegebakken in de gedownloade afbeelding. Als je de geëxporteerde PNG achteraf nog moet verkleinen of converteren, sluiten de tools voor afbeelding verkleinen en converteren op deze site naadloos aan waar deze tool ophoudt.