Generátor OG obrázků – Tvorba obrázků pro sdílení na sítích

Open Graph obrázek je ten obrázek, který se zobrazí, když vložíte odkaz do chatu, tweetu nebo kanálu na Slacku – a každá platforma, která ho vykresluje, očekává plátno o velikosti zhruba 1200×630 pixelů, tedy rozměr, pro který byly navrženy karty og:image na Facebooku a summary_large_image na Twitteru. Špatná velikost = oříznutý, rozmazaný nebo zdeformovaný obrázek; špatné rozvržení = nečitelný proužek titulku na přeplněné fotografii. Tento nástroj skládá obrázek ve skutečném cílovém rozlišení pomocí API Canvas 2D, takže to, co vidíte v náhledu, je přesně ta pixelová mřížka, která se uloží do PNG.

Vyberte pozadí – jednolitou barvu, dvoubarevný lineární přechod z vámi zvolených barev, nebo nahranou fotografii, která se ořízne tak, aby vyplnila celé políčko 1200×630, podobně jako CSS background-size: cover, místo aby se roztáhla. Napište titulek a volitelný podtitulek: oba jsou měřeny znak po znaku podle metrik písma na plátně, takže titulek, který je na jeden řádek příliš dlouhý, se zalomí na druhý či třetí na skutečné hranici slova, místo aby přetékal z okraje nebo byl tichu oříznut. Zvolte zarovnání na střed nebo doleva, barvu textu, která je na pozadí čitelná, a volitelně umístěte logo do rohu v pevné, čitelné velikosti.

Pod plátnem čtyři malé kartičky přibližně ukazují, jak hotový obrázek vypadá, jakmile ho skutečná platforma obalí svým vlastním rámečkem: karta Twitteru/X zobrazuje pod obrázkem jen doménu a tučný titulek bez řádku s popisem, Facebook přidává nad titulek a popis proužek s doménou velkými písmeny, LinkedIn umisťuje doménu pod titulek, a to bez jakéhokoli popisu, a embed Discordu ve svém tmavém motivu dává doménu, titulek i popis nad obrázek. Jde o stylizované přiblížení pro plánování – jasně označené jako ilustrační, s řádkem domény, který sami vyplníte – a ne o živé načtení ani snímek obrazovky skutečných platforem. Živou kartu vytvoří až sdílení odkazu, když si crawler každé platformy přečte skutečné og:image a og:title meta značky vaší stránky.

Vše se vykresluje lokálně na HTML canvas prvku ve vašem prohlížeči: titulek, podtitulek, nahrané pozadí i logo nikdy neopustí vaše zařízení a exportovaný soubor je čisté PNG z canvas.toBlob(), obsahující pouze to, co jste složili – do staženého obrázku se nepřidávají žádné okraje maket, falešné lišty prohlížeče ani loga platforem. Pokud budete chtít exportované PNG později změnit velikost nebo ho převést, nástroje na změnu velikosti a převod obrázků na těchto stránkách navazují přesně tam, kde tento nástroj končí.