OG Generator slika — Izrađivač slika za društveno dijeljenje

Slika Open Graph je slika koja se pojavljuje kada se poveznica zalijepi u chat, tweet ili Slack kanal — a svaka platforma koja renderira očekuje platno veličine otprilike 1200 × 630 piksela, veličine oko koje su dizajnirane kartice og:image na Facebooku i na Twitteru summary_large_image. Pogriješite s veličinom i slika će ispasti izrezana, mutna ili stisnuta; pogriješite u rasporedu i naslov se čita kao nečitak isječak naspram zauzete fotografije. Ovaj alat sastavlja sliku u stvarnoj ciljanoj razlučivosti pomoću Canvas 2D API-ja, tako da ono što vidite u pregledu je točna mreža piksela koja se isporučuje u PNG-u.

Odaberite pozadinu — ravnu boju, linearni gradijent u dva koraka sastavljen od dvije boje koje odaberete ili učitanu fotografiju koja se izrezuje da ispuni cijeli okvir od 1200 × 630 na isti način na koji bi to učinio CSS cover-size: cover, umjesto da bude razvučen izvan proporcija. Upišite naslov i izborni podnaslov: oba se mjere znak po znak u odnosu na vlastitu metriku fonta platna, tako da se naslov koji je predugačak da stane u jedan red prelama u drugi ili treći redak na pravoj granici riječi umjesto da se izlije preko ruba ili bude nevidljivo skraćen. Odaberite središnje ili lijevo poravnanje, odaberite boju teksta koja se čita u odnosu na vašu pozadinu i ispustite dodatni logotip u kut u fiksnoj, čitljivoj veličini.

Ispod platna, četiri male kartice približno prikazuju kako gotova slika izgleda nakon što je stvarna platforma umota u vlastiti krom: kartica Twittera/X-a prikazuje samo domenu i podebljani naslov ispod slike bez retka opisa, Facebook dodaje traku domene velikim slovima iznad bloka naslova i opisa, LinkedIn stavlja domenu ispod naslova bez ikakvog opisa, a Discordov ugrađeni postavlja domenu, naslov i opis iznad slika u vlastitoj mračnoj temi. Ovo su stilizirane aproksimacije za potrebe planiranja — jasno označene kao ilustrativne, s linijom domene koju sami upisujete — a ne dohvaćanje uživo ili snimka zaslona stvarnih platformi, budući da je dijeljenje veze i dopuštanje vlastitom alatu za indeksiranje svake platforme da pročita stvarne meta oznake og:image i og:title vaše stranice ono što zapravo stvara živu karticu.

Sve se renderira lokalno na elementu HTML platna u vašem pregledniku: naslov, podnaslov, učitana pozadina i logotip nikad ne napuštaju vaš uređaj, a izvezena datoteka je čisti canvas.toBlob() PNG koji sadrži samo ono što ste vi sastavili - nema obruba makete, lažnih traka preglednika ili logotipa platforme koji se peku u preuzetu sliku. Ako također trebate promijeniti veličinu ili pretvoriti izvezeni PNG nakon toga, alati za promjenu veličine i pretvorbu slika na ovoj stranici nastavljaju s radom upravo tamo gdje ovaj stane.