Generátor Open Graph meta tagov

Open Graph tagy sú malé kúsky HTML, ktoré určujú, ako vyzerá vaša stránka po zdieľaní na Facebooku, LinkedIn, Slacku, Discorde alebo X (Twitteri). Nižšie vyplňte titulok, popis, URL, obrázok a niekoľko ďalších možností, sledujte, ako sa náhľad karty okamžite aktualizuje, a skopírujte vygenerované tagy <meta> priamo do <head> vašej stránky. Všetko prebieha vo vašom prehliadači — nič sa neodosiela na server.

Čo je tento nástroj?

Open Graph je protokol, pôvodne vytvorený Facebookom, ktorý umožňuje akejkoľvek webovej stránke opísať samu seba pomocou malej sady tagov <meta property="og:..."> umiestnených v <head> HTML dokumentu. Keď niekto vloží váš odkaz do sociálnej aplikácie, chatového klienta alebo nástroja na odosielanie správ, táto aplikácia prečíta tieto tagy a zostaví z nich náhľadovú kartu — titulok, popis a miniatúru — namiesto toho, aby hádala z obsahu stránky.

Twitter (X) používa príbuznú, ale samostatnú sadu tagov <meta name="twitter:...">, ktorá riadi, ako vyzerá náhľad odkazu konkrétne na tejto platforme. Väčšina webov nastavuje oboje: Open Graph tagy pre širokú kompatibilitu a Twitter Card tagy na doladenie náhľadu na X (napríklad výber veľkej obrázkovej karty namiesto malej súhrnnej karty).

Bez týchto tagov sa zdieľaný odkaz buď zobrazí bez akéhokoľvek náhľadu, alebo sa platforma pokúsi uhádnuť titulok a obrázok zo surového obsahu stránky — pričom často zvolí nesprávny nadpis, náhodný obrázok v texte alebo nič. Explicitné nastavenie og:title, og:description a og:image vám dáva plnú kontrolu nad tým, ako je váš obsah prezentovaný ešte predtým, ako naň niekto klikne.

Prečo ho používať?

Živý náhľad — vidíte presne, ako bude karta na zdieľanie vyzerať už počas písania, ešte pred publikovaním.
Vygeneruje naraz Open Graph tagy (og:title, og:description, og:image, og:url, og:type, og:site_name) aj Twitter Card tagy.
Pokrýva polia, ktoré platformy skutočne čítajú: titulok, popis, kanonickú URL, obrázok, názov stránky, typ obsahu a štýl Twitter karty.
Beží úplne na strane klienta — váš titulok, popis a URL adresy nikdy neopustia váš prehliadač.
Zadarmo, bez prihlasovania, bez obmedzenia — skopírujte výstup a vložte ho do svojho HTML.

Ako sa používa

Zadajte titulok svojej stránky a krátky popis (titulok ideálne pod ~60 znakov, popis okolo ~155–160 znakov).
Zadajte kanonickú URL stránky a absolútnu URL náhľadového obrázka (URL obrázka musí byť plne kvalifikovaná, napr. https://example.com/image.jpg, nie relatívna cesta).
Voliteľne nastavte názov stránky, vyberte og:type (website, article, product, profile, video, music) a typ Twitter Card (summary alebo summary_large_image).
Skontrolujte kartu živého náhľadu, aby ste sa uistili, že titulok, popis a obrázok k sebe pasujú.
Kliknite na „Kopírovať“ a vložte vygenerované tagy <meta> do <head> vašej stránky, pred uzatvárací tag </head>.

Príklad

Vstup

Titulok: „10 bezplatných nástrojov pre vývojárov, ktoré naozaj využijete“
Popis: „Vybraný zoznam nástrojov bežiacich v prehliadači pre JSON, regulárne výrazy, UUID a ďalšie — bez inštalácie.“
URL: https://example.com/blog/dev-tools
Obrázok: 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 sa dostanú len vyplnené polia — ak necháte názov stránky prázdny, og:site_name sa vo výstupe jednoducho vynechá.

Časté chyby, ktorým sa treba vyhnúť

Úplne chýbajúci og:image — bez neho väčšina platforiem buď nezobrazí žiadny náhľadový obrázok, alebo použije náhodný obrázok stiahnutý zo stránky, čo zvyčajne vyzerá nedokončene a neprofesionálne.
Použitie relatívnej cesty k obrázku, ako /images/cover.jpg, namiesto plnej URL, ako https://example.com/images/cover.jpg — sociálne crawlery relatívne cesty väčšinou nevedia vyriešiť.
Nesprávny pomer strán obrázka — štvorcový alebo na výšku orientovaný obrázok sa nešikovne oreže, keď ho platformy vtesnajú do krajinného rámca 1,91:1; obrázok na zdieľanie navrhujte vždy čo najbližšie k rozmeru 1200×630.
Titulky alebo popisy, ktoré sa orezávajú — udržujte og:title pod ~60 znakmi a og:description pod ~155–160 znakmi, aby sa na väčšine platforiem nezostrihli s tromi bodkami.
Zabudnutá aktualizácia uložených náhľadov — po zmene og tagov na už publikovanej stránke môže starý náhľad pretrvávať vo vyrovnávacej pamäti Facebooku alebo LinkedIn, kým manuálne nevynútite nové stiahnutie pomocou ich nástrojov na ladenie.

Kde sa ktorý tag používa

og:title, og:description a og:image sú tri tagy, ktoré na zostavenie náhľadu číta takmer každá platforma. og:url hovorí crawlerom, s akou kanonickou adresou má náhľad spojiť, čo je dôležité, ak je rovnaký obsah dostupný pod viacerými URL. og:site_name zobrazuje na niektorých platformách, napríklad na Facebooku, malý štítok (napr. názov publikácie alebo značky) nad titulkom.

og:type mení, aký typ objektu stránka predstavuje pre crawlery podporujúce bohatší objektový model Open Graph — napríklad article sprístupňuje og:article:published_time a og:article:author na platformách, ktoré ich čítajú, hoci väčšina sociálnych náhľadov tieto dodatočné polia ignoruje a používa len základné trio titulok/popis/obrázok.

twitter:card riadi rozloženie konkrétne na X: summary zobrazí malú štvorcovú miniatúru vedľa textu, zatiaľ čo summary_large_image zobrazí obrázok cez celú šírku nad textom — druhá možnosť je takmer vždy lepšia pre obsah s výrazným titulným obrázkom.

Časté otázky

Akú veľkosť by mal mať môj og:image?

Odporúčaná veľkosť je 1200×630px — je dostatočne veľký pre displeje s vysokou hustotou pixelov a zodpovedá pomeru strán približne 1,91:1, na ktorý Facebook, LinkedIn a X obrázok orezávajú. Udržujte súbor pod 5–8 MB, používajte JPG alebo PNG a uistite sa, že URL obrázka je úplná absolútna adresa, nie relatívna cesta — väčšina crawlerov relatívne cesty k obrázkom správne nevyrieši.

Prečo sa mi po zdieľaní odkazu nezobrazuje náhľad?

Najčastejšie príčiny sú: chýbajúci og:image, relatívna namiesto absolútnej URL obrázka, crawler blokovaný súborom robots.txt, alebo platforma zobrazuje uloženú verziu starého náhľadu z vyrovnávacej pamäte. Facebook aj LinkedIn agresívne ukladajú stiahnuté náhľady do vyrovnávacej pamäte — po aktualizácii tagov použite Facebook Sharing Debugger alebo LinkedIn Post Inspector, aby ste vynútili nové stiahnutie.

Aký je rozdiel medzi og: a twitter: tagmi?

og: tagy (og:title, og:description, og:image atď.) sú štandard Open Graph, ktorý číta Facebook, LinkedIn, Slack, Discord, WhatsApp a väčšina ďalších platforiem. twitter: tagy sú vlastný formát Twitteru/X. Ak twitter:title alebo twitter:image chýbajú, X automaticky použije zodpovedajúci og: tag — ale explicitné nastavenie oboch vám dáva väčšiu kontrolu, vrátane voľby summary_large_image pre veľký náhľadový obrázok.

Aký og:type mám použiť?

„website“ je bezpečná predvolená voľba pre väčšinu stránok, vrátane domovských stránok a všeobecného obsahu. Použite „article“ pre blogové príspevky a spravodajské články (odomyká ďalšie tagy špecifické pre články, ako je čas publikovania), „product“ pre e-shopové stránky a „profile“ pre osobné alebo používateľské profily. Typ hlavne ovplyvňuje, ktoré ďalšie vlastnosti Open Graph sú platné, nie to, ako vyzerá základná náhľadová karta.

Ukladá alebo odosiela tento nástroj moje údaje niekam?

Nie. Celé generovanie prebieha lokálne vo vašom prehliadači pomocou čistého JavaScriptu. Nič z toho, čo napíšete, sa neprenáša, nezaznamenáva ani neukladá — zatvorením karty sa všetko vymaže.