Generator OG slik – Ustvarjalnik slik za deljenje na družbenih omrežjih

Slika Open Graph je tista, ki se prikaže, ko povezavo prilepite v klepet, tvit ali kanal Slack – in vsaka platforma, ki jo upodablja, pričakuje platno velikosti približno 1200 × 630 slikovnih pik, torej velikost, za katero sta bili zasnovani kartici og:image (Facebook) in summary_large_image (Twitter). Če velikost zgrešite, je slika obrezana, zabrisana ali stisnjena; če postavitev ni prava, je naslov nečitljiv obliž na kaotični fotografiji. To orodje sestavi sliko v resnični ciljni ločljivosti s pomočjo API-ja Canvas 2D, tako da je tisto, kar vidite v predogledu, točno tista mreža slikovnih pik, ki jo dobite v datoteki PNG.

Izberite ozadje – enobarvno polnitev, dvotočkovni linearni gradient iz dveh barv po vaši izbiri ali naloženo fotografijo, ki jo orodje obreže, da zapolni celoten okvir 1200 × 630, podobno kot bi to storil CSS background-size: cover, namesto da bi jo nesorazmerno raztegnilo. Vpišite naslov in neobvezen podnaslov: oba se pomerita znak za znakom z metrikami pisave na platnu, tako da se naslov, ki je predolg za eno vrstico, prelomi v drugo ali tretjo vrstico na pravi meji besede, namesto da bi zdrsnil čez rob ali bil nevidno obrezan. Izberite sredinsko ali levo poravnavo, barvo besedila, ki je berljiva na vašem ozadju, in po želji postavite logotip v kot v fiksni, berljivi velikosti.

Pod platnom štiri majhne kartice približno prikažejo, kako končana slika izgleda, ko jo resnična platforma ovije v svojo kromatiko: kartica Twitter/X prikazuje samo domeno in krepak naslov pod sliko brez vrstice z opisom, Facebook doda trak z domeno (velike tiskane črke) nad blokom z naslovom in opisom, LinkedIn postavi domeno pod naslov brez opisa, vgradnja Discord pa domeno, naslov in opis nad sliko v svoji temni temi. Gre za slogovne približke za načrtovanje – jasno so označeni kot ilustrativni, z vrstico za domeno, ki jo vpišete sami – in ne za živo pridobivanje ali zaslonske posnetke dejanskih platform, saj deljenje povezave in dovoljenje lastnemu pajku vsake platforme, da prebere prave meta oznake og:image in og:title na vaši strani, ustvari živo kartico.

Vse se upodablja lokalno na elementu HTML canvas v vašem brskalniku: naslov, podnaslov, naloženo ozadje in logotip nikoli ne zapustijo vaše naprave, izvožena datoteka pa je čista PNG datoteka, ustvarjena s canvas.toBlob(), ki vsebuje samo tisto, kar ste sestavili – nobene kromatike maket, lažnih vrstic brskalnika ali logotipov platform se ne zapeče v preneseno sliko. Če morate izvoženo datoteko PNG nato še spremeniti velikost ali jo pretvoriti, orodji za spreminjanje velikosti slik in pretvarjanje slik na tem spletnem mestu nadaljujeta tam, kjer to orodje konča.