OG-billedgenerator — Generator til sociale delingsbilleder

Et Open Graph-billede er det billede, der dukker op, når et link indsættes i en chat, et tweet eller en Slack-kanal — og enhver platform, der renderer ét, forventer et canvas på cirka 1200×630 pixels, den størrelse som Facebooks og:image og Twitters summary_large_image-kort begge er designet til. Får du størrelsen forkert, bliver billedet beskåret, sløret eller mast; får du layoutet forkert, fremstår titlen som en ulæselig stribe henover et travlt foto. Dette værktøj komponerer billedet i den reelle målopløsning ved hjælp af Canvas 2D API'et, så det, du ser i forhåndsvisningen, er præcis det pixelgitter, der leveres i PNG'en.

Vælg en baggrund — en ensfarvet farve, en todelt lineær gradient bygget af to farver efter eget valg, eller et uploadet foto, der beskæres, så det fylder hele 1200×630-rammen, ligesom CSS background-size: cover ville gøre, i stedet for at blive strakt ude af proportioner. Skriv en titel og eventuelt en undertitel: begge måles tegn for tegn op mod canvasets egne skrifttypsmetrikker, så en overskrift, der er for lang til at passe på én linje, ombrydes til en anden eller tredje linje ved en reel ordgrænse i stedet for at falde ud over kanten eller blive usynligt afkortet. Vælg centreret eller venstrestillet justering, vælg en tekstfarve, der står klart på din baggrund, og sæt eventuelt et logo i hjørnet i en fast, læsbar størrelse.

Under canvaset viser fire små kort nogenlunde, hvordan det færdige billede ser ud, når en rigtig platform pakker det ind i sin egen krom: Twitter/X’s kort viser kun domænet og en fed titel under billedet uden nogen beskrivelseslinje, Facebook tilføjer en stribe med domæne i versaler over en titel-og-beskrivelsesblok, LinkedIn sætter domænet under titlen helt uden beskrivelse, og Discords embed placerer domæne, titel og beskrivelse over billedet i sit eget mørke tema. Disse er stiliserede tilnærmelser til planlægningsformål — tydeligt markeret som illustrative, med en domænelinje du selv skriver — og ikke et live-opslag eller skærmbillede af de faktiske platforme, eftersom det at dele et link og lade hver platforms egen crawler læse dit sides reelle og:image- og og:title-meta-tags er dét, der rent faktisk skaber det live kort.

Alt renderes lokalt på et HTML-canvas-element i din browser: titel, undertitel, uploadet baggrund og logo forlader aldrig din enhed, og den eksporterede fil er en ren canvas.toBlob() PNG, der kun indeholder det, du komponerede — ingen modelrammer, falske browserbjælker eller platformlogoer bliver bagt ind i det downloadede billede. Har du også brug for at ændre størrelse eller konvertere den eksporterede PNG bagefter, så tager denne sides billedstørrelsejusterings- og billedkonverteringsværktøjer lige over, hvor dette slipper.