OG Image Generator — Izdelovalec slik za skupno rabo v družabnih omrežjih

Slika Open Graph je slika, ki se prikaže, ko je povezava prilepljena v klepet, tvit ali kanal Slack – in vsaka platforma, ki jo upodablja, pričakuje platno velikosti približno 1200 × 630 slikovnih pik, velikosti, kot sta bili zasnovani kartici og:image na Facebooku in na Twitterju summary_large_image. Zmotite se z velikostjo in slika bo obrezana, zamegljena ali stisnjena; napačna postavitev in naslov se bere kot nečitljiv delček na zasedeni fotografiji. To orodje sestavi sliko pri pravi ciljni ločljivosti z uporabo API-ja Canvas 2D, tako da je tisto, kar vidite v predogledu, natančna mreža slikovnih pik, ki je poslana v PNG.

Izberite ozadje – ravno barvo, dvostopenjski linearni preliv, sestavljen iz dveh barv, ki jih izberete, ali naloženo fotografijo, ki se obreže, da zapolni celoten okvir 1200 × 630 na enak način, kot bi to storila naslovnica velikosti ozadja CSS, namesto da bi bila nesorazmerno raztegnjena. Vnesite naslov in izbirni podnaslov: oba se merita znak za znakom glede na meritve lastne pisave platna, tako da se naslov, ki je predolg, da bi se prilegal v eno vrstico, previje v drugo ali tretjo vrstico na pravi besedni meji, namesto da bi se razlil z roba ali bil nevidno okrnjen. Izberite sredinsko ali levo poravnavo, izberite barvo besedila, ki se bere na vašem ozadju, in spustite izbirni logotip v kot v fiksni, berljivi velikosti.

Pod platnom so štiri majhne kartice, ki približno prikazujejo, kako izgleda končna slika, ko jo prava platforma ovije v svoj krom: kartica Twitter/X prikazuje samo domeno in krepko naslov pod sliko brez opisne vrstice, Facebook doda trak domene z velikimi črkami nad blok naslova in opisa, LinkedIn postavi domeno pod naslov brez nikakršnega opisa, Discordova vdelava pa domeno, naslov in opis postavi nad slika v lastni temni temi. To so oblikovani približki za namene načrtovanja – jasno označeni kot ilustrativni, z domensko vrstico, ki jo vtipkate sami – ne prenos v živo ali posnetek zaslona dejanskih platform, saj je deljenje povezave in omogočanje lastnemu pajku vsake platforme, da prebere prave metaoznake og:image in og:title vaše strani, tisto, kar dejansko ustvari živo kartico.

Vse se upodobi lokalno na elementu platna HTML v vašem brskalniku: naslov, podnaslov, naloženo ozadje in logotip nikoli ne zapustijo vaše naprave, izvožena datoteka pa je čisti canvas.toBlob() PNG, ki vsebuje samo tisto, kar ste sestavili – v preneseno sliko se ne zapečejo robovi makete, lažne vrstice brskalnika ali logotipi platforme. Če morate pozneje tudi spremeniti velikost ali pretvoriti izvoženi PNG, se orodja za spreminjanje velikosti slik in pretvornik slik na tem spletnem mestu začnejo prav tam, kjer se to konča.