OG Image Generator - Maker van sociale afbeeldingen

Een Open Graph-afbeelding is de afbeelding die verschijnt wanneer een link in een chat, een tweet of een Slack-kanaal wordt geplakt - en elk platform dat je weergeeft, verwacht een canvas van ongeveer 1200 x 630 pixels, de grootte van Facebook's og:image en Twitter's summary_large_image-kaarten zijn beide ontworpen. Als u de verkeerde maat kiest, wordt de afbeelding bijgesneden, wazig of samengedrukt; krijg de lay-out verkeerd en de titel leest als een onleesbaar streepje tegen een drukke foto. Deze tool stelt de afbeelding samen met de werkelijke doelresolutie met behulp van de Canvas 2D API, dus wat u in het voorbeeld ziet, is het exacte pixelraster dat in de PNG wordt geleverd.

Kies een achtergrond: een effen kleur, een twee-stops lineair verloop opgebouwd uit twee kleuren die je kiest, of een geüploade foto die wordt bijgesneden om het volledige frame van 1200×630 te vullen op dezelfde manier als een CSS-achtergrondgrootte: omslag, in plaats van buiten proporties te worden uitgerekt. Typ een titel en een optionele ondertitel: beide worden teken voor teken gemeten aan de hand van de lettertypegegevens van het canvas, dus een kop die te lang is om op één regel te passen, loopt over op een tweede of derde regel op een echte woordgrens in plaats van over de rand te lopen of onzichtbaar te worden afgekapt. Kies voor uitlijning in het midden of links, kies een tekstkleur die goed afsteekt tegen de achtergrond en plaats een optioneel logo in de hoek met een vaste, leesbare grootte.

Onder het canvas geven vier kleine kaarten een benadering van hoe de voltooide afbeelding eruit ziet zodra een echt platform deze in zijn eigen chroom wikkelt: de kaart van Twitter/X toont alleen het domein en een vetgedrukte titel onder de afbeelding zonder beschrijvingsregel, Facebook voegt een domeinstrook in hoofdletters toe boven een titel-en-beschrijvingsblok, LinkedIn plaatst het domein onder de titel zonder enige beschrijving, en de insluiting van Discord plaatst het domein, de titel en de beschrijving boven de afbeelding in zijn eigen donkere thema. Dit zijn gestileerde benaderingen voor planningsdoeleinden - duidelijk gelabeld als illustratief, met een domeinlijn die u zelf typt - en geen live ophaalactie of screenshot van de daadwerkelijke platforms, aangezien het delen van een link en het door de eigen crawler van elk platform laten lezen van de echte og:image en og:title metatags is wat feitelijk de live-kaart produceert.

Alles wordt lokaal weergegeven op een HTML-canvaselement in uw browser: de titel, ondertitel, geüploade achtergrond en logo verlaten uw apparaat nooit, en het geëxporteerde bestand is een schoon canvas.toBlob() PNG dat alleen bevat wat u heeft gecomponeerd - er worden geen mockup-randen, valse browserbalken of platformlogo's in de gedownloade afbeelding ingebakken. Als je de geëxporteerde PNG naderhand ook moet vergroten of verkleinen, gaan de tools voor het wijzigen van afbeeldingen en het converteren van afbeeldingen verder waar deze ophoudt.