OG Image Generator — Social Share Image Maker

Obrázok Open Graph je obrázok, ktorý sa zobrazí po vložení odkazu do chatu, tweetu alebo kanála Slack – a každá platforma, ktorá vykresľuje, očakáva plátno s rozmermi približne 1200 × 630 pixelov, veľkosťou og:image Facebooku a sumárnej_obrázkovej karty Twitteru. Nesprávna veľkosť a obrázok bude orezaný, rozmazaný alebo stlačený; nesprávne rozloženie a názov sa číta ako nečitateľný kúsok oproti rušnej fotke. Tento nástroj zloží obrázok v skutočnom cieľovom rozlíšení pomocou Canvas 2D API, takže to, čo vidíte v náhľade, je presná pixelová mriežka, ktorá sa dodáva v PNG.

Vyberte si pozadie – rovnú farbu, dvojkrokový lineárny prechod vytvorený z dvoch farieb, ktoré si vyberiete, alebo nahranú fotografiu, ktorá sa orezá tak, aby zaplnila celý rám s rozmermi 1 200 × 630 rovnakým spôsobom, ako by to bolo pri obálke s veľkosťou pozadia CSS, namiesto toho, aby bola nadmerne roztiahnutá. Zadajte názov a voliteľný podnadpis: obe sa merajú znak po znaku podľa vlastných metrík písma na plátne, takže nadpis, ktorý je príliš dlhý na to, aby sa zmestil na jeden riadok, sa zalomí do druhého alebo tretieho riadku na skutočnej hranici slova, namiesto toho, aby sa rozlial cez okraj alebo sa neviditeľne orezal. Vyberte zarovnanie na stred alebo doľava, vyberte farbu textu, ktorá sa číta na pozadí, a do rohu vložte voliteľné logo v pevnej, čitateľnej veľkosti.

Pod plátnom sú štyri malé kartičky približné tomu, ako hotový obrázok vyzerá, keď ho skutočná platforma zabalí do vlastného chrómu: karta Twitter/X zobrazuje iba doménu a tučný názov pod obrázkom bez riadku s popisom, Facebook pridá pásik domény s veľkými písmenami nad blok názvu a popisu, LinkedIn umiestni doménu pod názov bez akéhokoľvek popisu a názov vloží do vlastného obrázka Discord a temný obrázok. Ide o štylizované aproximácie na účely plánovania – jasne označené ako ilustračné, s riadkom domény, ktorý napíšete sami – nejde o živé načítanie alebo snímku obrazovky skutočných platforiem, pretože zdieľanie odkazu a ponechanie vlastného prehľadávača každej platformy čítať skutočné metaznačky og:image a og:title vašej stránky je to, čo skutočne vytvára aktívnu kartu.

Všetko sa vykresľuje lokálne na element plátna HTML vo vašom prehliadači: názov, podnadpis, nahrané pozadie a logo nikdy neopustia vaše zariadenie a exportovaný súbor je čistý súbor canvas.toBlob() PNG obsahujúci iba to, čo ste vytvorili – do stiahnutého obrázka sa nezapekajú žiadne okraje makety, falošné pruhy prehliadača ani logá platformy. Ak následne potrebujete zmeniť veľkosť alebo konvertovať exportovaný PNG, nástroje na zmenu veľkosti obrázkov a prevodník obrázkov na tejto stránke budú pokračovať tam, kde končí.