OG-bildgenerator – Skapare av delningsbilder för sociala medier

En Open Graph-bild är den bild som visas när en länk klistras in i en chatt, en tweet eller en Slack-kanal – och varje plattform som renderar en sådan förväntar sig en canvas på ungefär 1200×630 pixlar, den storlek som Facebooks og:image- och Twitters summary_large_image-kort båda utformades kring. Får du storleken fel blir bilden beskuren, suddig eller ihopklämd; får du layouten fel läser man titeln som en oläslig remsa mot ett stökigt foto. Det här verktyget komponerar bilden i den verkliga målupplösningen med Canvas 2D API:et, så det du ser i förhandsvisningen är exakt det pixelraster som levereras i PNG-bilden.

Välj en bakgrund – en platt färg, en linjär övertoning med två stopp som du själv väljer färg på, eller ett uppladdat foto som beskärs till att fylla hela 1200×630-ramen på samma sätt som CSS background-size: cover skulle göra, istället för att töjas ur proportion. Skriv en titel och en valfri undertitel: båda mäts tecken för tecken mot canvasens egna teckenmått, så att en rubrik som är för lång för att rymmas på en rad bryts till en andra eller tredje rad vid en riktig ordgräns istället för att rinna över kanten eller bli osynligt avhuggen. Välj centrerad eller vänsterställd justering, en textfärg som syns mot din bakgrund, och placera en valfri logotyp i hörnet i en fast, läsbar storlek.

Under canvasen visar fyra små kort en uppskattning av hur den färdiga bilden ser ut när en riktig plattform ramar in den i sitt eget gränssnitt: Twitter/X-kortet visar endast domänen och en fet titel under bilden utan beskrivningsrad, Facebook lägger till en versal domänremsa ovanför ett titel- och beskrivningsblock, LinkedIn placerar domänen under titeln utan någon beskrivning alls, och Discords inbäddning lägger domän, titel och beskrivning ovanför bilden i sitt eget mörka tema. Dessa är stiliserade approximationer för planeringsändamål – tydligt märkta som illustrativa, med en domänrad du själv skriver in – inte en livehämtning eller skärmdump av de faktiska plattformarna, eftersom det som faktiskt producerar det levande kortet är att du delar en länk och låter varje plattforms egen crawler läsa din sidas riktiga og:image- och og:title-metataggar.

Allt renderas lokalt på ett HTML-canvaselement i din webbläsare: titel, undertitel, uppladdad bakgrund och logotyp lämnar aldrig din enhet, och den exporterade filen är en ren canvas.toBlob() PNG som endast innehåller det du komponerade – inga mockupramar, falska webbläsarlister eller plattformslogotyper bakas in i den nedladdade bilden. Om du senare behöver ändra storlek på eller konvertera den exporterade PNG-bilden tar sajtens bildstorleksändrare och bildkonverterare vid precis där detta verktyg slutar.