OG-bildegenerator – Lag bilder for sosiale medier
Lag et 1200×630 Open Graph-delingsbilde med tittel, undertittel, bakgrunn og logo, gjengitt direkte på et ekte lerret – og se deretter hvordan det ser ut innrammet i lenkekort for Twitter/X, Facebook, LinkedIn og Discord før du laster ned den rene PNG-filen.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
Et Open Graph-bilde er bildet som dukker opp når en lenke limes inn i en chat, en tweet eller en Slack-kanal – og alle plattformer som viser et slikt bilde, forventer et lerret på omtrent 1200×630 piksler, størrelsen som Facebooks og:image og Twitters summary_large_image-kort begge ble designet rundt. Velger du feil størrelse, blir bildet beskåret, uskarpt eller presset; får du feil layout, blir tittelen en uleselig stripe mot et travelt foto. Dette verktøyet setter sammen bildet i den faktiske målstørrelsen ved hjelp av Canvas 2D API-et, slik at det du ser i forhåndsvisningen, er nøyaktig det pikselnettet som leveres i PNG-en.
Velg en bakgrunn – en flat farge, en lineær gradient med to farger du velger selv, eller et opplastet foto som beskjæres for å fylle hele 1200×630-rammen på samme måte som CSS background-size: cover gjør, i stedet for å bli strukket ut av proporsjon. Skriv en tittel og eventuelt en undertittel: begge måles tegn for tegn opp mot lerretets egne skriftmålinger, slik at en overskrift som er for lang til å få plass på én linje, brytes over på en andre eller tredje linje ved en ekte ordgrense, i stedet for å renne ut av kanten eller bli usynlig avskåret. Velg sentrert eller venstrestilt justering, velg en tekstfarge som er leselig mot bakgrunnen din, og plasser eventuelt en logo i hjørnet i en fast, lesbar størrelse.
Under lerretet viser fire små kort omtrent hvordan det ferdige bildet ser ut når en ekte plattform pakker det inn i sitt eget grensesnitt: Twitter/X sitt kort viser kun domenet og en fet tittel under bildet uten beskrivelseslinje, Facebook legger til en domenelinje med store bokstaver over en tittel-og-beskrivelsesblokk, LinkedIn legger domenet under tittelen uten noen beskrivelse, og Discords innebygging plasserer domene, tittel og beskrivelse over bildet i sitt eget mørke tema. Dette er stilmessige tilnærminger for planleggingsformål – tydelig merket som illustrerende, med en domenelinje du skriver selv – ikke et direkte oppslag eller skjermbilde av de faktiske plattformene, ettersom deling av en lenke og det å la hver plattforms egen gjennomsøker lese sidens faktiske og:image- og og:title-metatagger er det som faktisk produserer det levende kortet.
Alt gjengis lokalt på et HTML canvas-element i nettleseren din: tittelen, undertittelen, den opplastede bakgrunnen og logoen forlater aldri enheten din, og den eksporterte filen er en ren canvas.toBlob()-PNG som kun inneholder det du har satt sammen – ingen kortrammer, falske nettleserlinjer eller plattformlogoer blir bakt inn i det nedlastede bildet. Dersom du i etterkant har behov for å endre størrelse eller konvertere den eksporterte PNG-en, kan bildestørrelsesverktøyet og bildekonverteringsverktøyet på dette nettstedet overta der dette verktøyet slutter.