Generátor Open Graph meta tagů

Open Graph tagy jsou malé kousky HTML, které určují, jak vaše stránka vypadá po sdílení na Facebooku, LinkedInu, Slacku, Discordu nebo X (Twitteru). Níže vyplňte titulek, popis, URL, obrázek a pár dalších možností, sledujte, jak se náhled karty okamžitě aktualizuje, a vygenerované tagy <meta> zkopírujte přímo do <head> vaší stránky. Vše probíhá ve vašem prohlížeči — nic se neodesílá na server.

Co je tento nástroj?

Open Graph je protokol, původně vytvořený Facebookem, který umožňuje jakékoli webové stránce popsat samu sebe pomocí malé sady tagů <meta property="og:..."> umístěných v <head> HTML dokumentu. Když někdo vloží váš odkaz do sociální aplikace, chatu nebo messengeru, tato aplikace přečte tyto tagy a sestaví z nich náhledovou kartu — titulek, popis a miniaturu obrázku — místo aby hádala z obsahu stránky.

Twitter (X) používá příbuznou, ale samostatnou sadu tagů <meta name="twitter:...">, kterou řídí, jak vypadá náhled odkazu konkrétně na této platformě. Většina webů nastavuje obojí: Open Graph tagy pro širokou kompatibilitu a Twitter Card tagy pro doladění náhledu na X (například volbu velké obrázkové karty místo malé souhrnné karty).

Bez těchto tagů se sdílený odkaz buď zobrazí bez náhledu vůbec, nebo se platforma pokusí odhadnout titulek a obrázek ze surového obsahu stránky — často zvolí špatný nadpis, náhodný obrázek v textu, nebo nic. Explicitní nastavení og:title, og:description a og:image vám dává plnou kontrolu nad tím, jak je váš obsah prezentován ještě předtím, než na něj někdo klikne.

Proč ho používat?

Živý náhled — vidíte přesně, jak bude karta pro sdílení vypadat, ještě během psaní a před publikováním.
Vygeneruje najednou Open Graph tagy (og:title, og:description, og:image, og:url, og:type, og:site_name) i Twitter Card tagy.
Pokrývá pole, která platformy skutečně čtou: titulek, popis, kanonickou URL, obrázek, název webu, typ obsahu a styl Twitter karty.
Běží zcela na straně klienta — váš titulek, popis a URL adresy nikdy neopustí váš prohlížeč.
Zdarma, bez přihlašování, bez omezení — zkopírujte výstup a vložte ho do svého HTML.

Jak se používá

Zadejte titulek své stránky a krátký popis (titulek ideálně pod ~60 znaků, popis kolem ~155–160 znaků).
Zadejte kanonickou URL stránky a absolutní URL náhledového obrázku (URL obrázku musí být plně kvalifikovaná, např. https://example.com/image.jpg, nikoli relativní cesta).
Volitelně nastavte název webu, vyberte og:type (website, article, product, profile, video, music) a typ Twitter Card (summary nebo summary_large_image).
Zkontrolujte kartu živého náhledu, abyste se ujistili, že titulek, popis a obrázek k sobě pasují.
Klikněte na „Kopírovat“ a vložte vygenerované tagy <meta> do <head> vaší stránky, před uzavírací tag </head>.

Příklad

Vstup

Titulek: „10 bezplatných nástrojů pro vývojáře, které opravdu využijete“
Popis: „Vybraný seznam nástrojů běžících v prohlížeči pro JSON, regulární výrazy, UUID a další — bez instalace.“
URL: https://example.com/blog/dev-tools
Obrázek: https://example.com/images/dev-tools-cover.jpg

Výstup

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Do výstupu se dostanou jen vyplněná pole — pokud necháte název webu prázdný, og:site_name se ve výstupu prostě vynechá.

Časté chyby, kterým se vyhnout

Úplně chybějící og:image — bez něj většina platforem buď nezobrazí žádný náhledový obrázek, nebo použije náhodný obrázek stažený ze stránky, což obvykle vypadá rozbitě a neprofesionálně.
Použití relativní cesty k obrázku, jako /images/cover.jpg, místo plné URL, jako https://example.com/images/cover.jpg — sociální crawlery relativní cesty většinou neumí vyřešit.
Špatný poměr stran obrázku — čtvercový nebo na výšku orientovaný obrázek se nešikovně ořízne, když ho platformy vtěsnají do krajinného rámce 1,91:1; obrázek pro sdílení navrhujte vždy co nejblíže rozměru 1200×630.
Titulky nebo popisy, které se ořezávají — udržujte og:title pod ~60 znaky a og:description pod ~155–160 znaky, aby se na většině platforem neusekly a nezobrazily se s třemi tečkami.
Zapomenutá aktualizace cachovaných náhledů — po změně og tagů na již publikované stránce může starý náhled přetrvávat v cache Facebooku nebo LinkedInu, dokud ručně nevynutíte nové stažení jejich nástroji pro ladění.

Kde se který tag používá

og:title, og:description a og:image jsou tři tagy, které pro sestavení náhledu čte téměř každá platforma. og:url říká crawlerům, s jakou kanonickou adresou má náhled spojit, což je důležité, pokud je stejný obsah dostupný pod více URL. og:site_name zobrazuje na některých platformách, například na Facebooku, malý štítek (třeba název publikace nebo značky) nad titulkem.

og:type mění, jaký typ objektu stránka představuje pro crawlery podporující bohatší objektový model Open Graph — například article zpřístupňuje og:article:published_time a og:article:author na platformách, které je čtou, ačkoli většina sociálních náhledů tato dodatečná pole ignoruje a používá jen základní trojici titulek/popis/obrázek.

twitter:card řídí rozvržení konkrétně na X: summary zobrazí malou čtvercovou miniaturu vedle textu, zatímco summary_large_image zobrazí obrázek přes celou šířku nad textem — druhá volba je téměř vždy lepší pro obsah s výrazným titulním obrázkem.

Časté dotazy

Jakou velikost by měl mít můj og:image?

Doporučená velikost je 1200×630px — je dost velký pro displeje s vysokou hustotou pixelů a odpovídá poměru stran zhruba 1,91:1, na který Facebook, LinkedIn a X obrázek ořezávají. Udržujte soubor pod 5–8 MB, používejte JPG nebo PNG a ujistěte se, že URL obrázku je úplná absolutní adresa, ne relativní cesta — většina crawlerů relativní cesty k obrázkům správně nevyřeší.

Proč se mi po sdílení odkazu nezobrazuje náhled?

Nejčastější příčiny jsou: chybějící og:image, relativní místo absolutní URL obrázku, crawler blokovaný souborem robots.txt, nebo platforma zobrazuje cachovanou verzi starého náhledu. Facebook i LinkedIn agresivně cachují stažené náhledy — po aktualizaci tagů použijte Facebook Sharing Debugger nebo LinkedIn Post Inspector, abyste vynutili nové stažení.

Jaký je rozdíl mezi og: a twitter: tagy?

og: tagy (og:title, og:description, og:image atd.) jsou standard Open Graph, který čte Facebook, LinkedIn, Slack, Discord, WhatsApp a většina dalších platforem. twitter: tagy jsou vlastní formát Twitteru/X. Pokud twitter:title nebo twitter:image chybí, X automaticky použije odpovídající og: tag — ale explicitní nastavení obou vám dává větší kontrolu, včetně volby summary_large_image pro velký náhledový obrázek.

Jaký og:type mám použít?

„website“ je bezpečná výchozí volba pro většinu stránek, včetně domovských stránek a obecného obsahu. Použijte „article“ pro blogové příspěvky a novinové články (odemyká další tagy specifické pro články, jako je čas publikace), „product“ pro e-shopové stránky a „profile“ pro osobní nebo uživatelské profily. Typ hlavně ovlivňuje, které další vlastnosti Open Graph jsou platné, ne to, jak vypadá základní náhledová karta.

Ukládá nebo odesílá tento nástroj moje data někam?

Ne. Veškeré generování probíhá lokálně ve vašem prohlížeči pomocí čistého JavaScriptu. Nic z toho, co napíšete, se nepřenáší, nezaznamenává ani neukládá — zavřením záložky se vše smaže.