OG Image Generator — Alat za izradu slika za društveno dijeljenje
Sastavite Open Graph sliku za društveno dijeljenje dimenzija 1200×630 s naslovom, podnaslovom, pozadinom i logotipom, iscrtanu uživo na stvarnom platnu — a zatim pregledajte kako izgleda uokvirena unutar kartica poveznica Twittera/X-a, Facebooka, LinkedIne i Discorda prije nego što preuzmete čistu PNG datoteku.
🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.
Rezultat
Open Graph slika je slika koja se prikazuje kad se poveznica zalijepi u chat, tweet ili Slack kanal — a svaka platforma koja je prikazuje očekuje platno veličine otprilike 1200×630 piksela, dimenzije za koje su dizajnirane i Facebookova og:image i Twitterova summary_large_image kartica. Ako promašite dimenzije, slika će biti obrezana, mutna ili stisnuta; ako promašite raspored, naslov će izgledati kao nečitljiv komadić na pretrpanoj fotografiji. Ovaj alat sastavlja sliku u stvarnoj ciljanoj razlučivosti koristeći Canvas 2D API, tako da je ono što vidite u pregledu točna mreža piksela koja odlazi u PNG datoteku.
Odaberite pozadinu — jednobojnu, linearni prijelaz u dvije boje koje sami birate ili učitanu fotografiju koja se obrezuje da ispuni cijeli okvir 1200×630 na način na koji bi to učinio CSS background-size: cover, umjesto da se neproporcionalno rastegne. Upišite naslov i neobavezni podnaslov: oboje se mjere znak po znak prema metrici fonta samog platna, tako da se naslov koji je predug da stane u jedan redak prelama u drugi ili treći redak na pravoj granici riječi umjesto da prelazi rub ili bude nevidljivo odrezan. Odaberite središnje ili lijevo poravnanje, boju teksta koja je čitljiva na vašoj pozadini i po želji postavite logotip u kut u fiksnoj, čitljivoj veličini.
Ispod platna četiri male kartice približno prikazuju kako dovršena slika izgleda nakon što je stvarna platforma uokviri svojim elementima: kartica Twittera/X-a prikazuje samo domenu i podebljani naslov ispod slike bez retka opisa, Facebook dodaje traku s domenom velikim slovima iznad bloka s naslovom i opisom, LinkedIn stavlja domenu ispod naslova bez ikakvog opisa, a Discordov embed prikazuje domenu, naslov i opis iznad slike u vlastitoj tamnoj temi. To su stilizirane aproksimacije u svrhu planiranja — jasno označene kao ilustrativne, s retkom domene koji sami upisujete — a ne dohvat uživo ili snimka zaslona stvarnih platformi, budući da se stvarna kartica generira tek kad podijelite poveznicu i dopustite vlastitom crawleru svake platforme da pročita stvarne og:image i og:title meta oznake vaše stranice.
Sve se iscrtava lokalno na HTML canvas elementu u vašem pregledniku: naslov, podnaslov, učitana pozadina i logotip nikad ne napuštaju vaš uređaj, a izvezena datoteka je čista PNG datoteka iz canvas.toBlob() koja sadrži samo ono što ste sastavili — nikakvi okviri maketa, lažne trake preglednika ili logotipi platformi ne ugrađuju se u preuzetu sliku. Ako naknadno trebate promijeniti veličinu ili pretvoriti izvezenu PNG datoteku, alati za promjenu veličine slike i pretvorbu slika na ovoj stranici nastavljaju točno tamo gdje ovaj alat staje.