OG Image Generator — Social Share Image Maker

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 hver plattform som gjengir en forventer et lerret på omtrent 1200×630 piksler, størrelsen Facebooks og:image og Twitters summary_large_image-kort var begge designet rundt. Ta feil størrelse og bildet blir beskåret, uskarpt eller sammenklemt; får oppsettet feil og tittelen leses som en uleselig splint mot et opptatt bilde. Dette verktøyet komponerer bildet med den virkelige måloppløsningen ved å bruke Canvas 2D API, så det du ser i forhåndsvisningen er det nøyaktige pikselnettet som sendes i PNG.

Velg en bakgrunn – en flat farge, en to-stopps lineær gradient bygget av to farger du velger, eller et opplastet bilde som blir beskåret for å fylle hele 1200×630-rammen på samme måte som en CSS-bakgrunnsstørrelse: omslag ville gjort, i stedet for å bli strukket ut av proporsjoner. Skriv inn en tittel og en valgfri undertittel: begge måles tegn for tegn i forhold til lerretets egne fontberegninger, så en overskrift som er for lang til å passe på én linje går over på en andre eller tredje linje ved en ekte ordgrense i stedet for å slynges ut fra kanten eller bli usynlig avkortet. Velg midt- eller venstrejustering, velg en tekstfarge som leser mot bakgrunnen din, og slipp en valgfri logo i hjørnet med en fast, lesbar størrelse.

Under lerretet viser fire små kort hvordan det ferdige bildet ser ut når en ekte plattform pakker det inn i sin egen krom: Twitter/Xs kort viser bare domenet og en fet tittel under bildet uten beskrivelseslinje, Facebook legger til en domenestripe med store bokstaver over en tittel-og-beskrivelsesblokk, LinkedIn legger domenet under tittelen, uten å legge inn domenet, med ingen domenebeskrivelse. tittel og beskrivelse over bildet i sitt eget mørke tema. Disse er stiliserte tilnærminger for planleggingsformål – tydelig merket som illustrative, med en domenelinje du skriver inn selv – ikke en direkte henting eller skjermdump av de faktiske plattformene, siden det å dele en lenke og la hver plattforms egen crawler lese sidens ekte og:image og og:title metakoder er det som faktisk produserer live-kortet.

Alt gjengis lokalt på et HTML-lerretselement 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 bare inneholder det du har laget – ingen mockup-kanter, falske nettleserlinjer eller plattformlogoer blir bakt inn i det nedlastede bildet. Hvis du også trenger å endre størrelse på eller konvertere den eksporterte PNG-en etterpå, fortsetter dette nettstedets bildeforbedrings- og bildekonverteringsverktøy akkurat der dette slutter.