David Štaffa

Open Graph tagy: Jak váš web vypadá, když se o něj někdo podělí

Když někdo zkopíruje váš odkaz do WhatsAppu, načte se náhled. Bez Open Graph tagů to vypadá neprofesionálně. S nimi jako prémiový brand.

Co se stane, když někdo sdílí váš odkaz

Když si někdo zkopíruje URL vašeho webu a vloží ji do WhatsAppu, Facebooku, LinkedInu, iMessage nebo Telegramu, platforma automaticky načte náhled. Stáhne stránku, hledá obrázek, nadpis a popisek. A zobrazí je jako kartu.

Ta karta je první dojem. Pokud vypadá dobře — krásný obrázek, jasný nadpis, výstižný popisek — lidé na ni klikají. Pokud vypadá špatně — žádný obrázek, rozbitý nadpis, náhodný text — přejíždí dál. A váš odkaz vypadá neprofesionálně.

Co jsou Open Graph tagy

Open Graph tagy jsou metatagy v hlavičce stránky, které nastavuji, aby říkaly sociálním sítím, jak mají váš odkaz zobrazit. Pocházejí z Facebooku, ale dnes je rozumí všechny platformy — WhatsApp, LinkedIn, iMessage, Telegram, Slack, Discord.

Tři nejdůležitější, které nastavuji:

og:title — Nadpis karty. Měl by být jasný a stručný. Ne stejný jako meta title — ten je pro Google, tenhle je pro sociální sítě.

og:description — Popisek karty. Jeden nebo dva řádky, které vysvětlují, co na stránce najdou.

og:image — Náhledový obrázek. Nejvíc se na něj dívají. Měl by být 1200×630 pixelů, s relevantním obsahem. Ne náhodný obrázek z webu — obrázek, který dává smysl v kontextu sdílení.

Co se stane bez Open Graph tagů

Bez OG tagů, které jsem nastavil, platforma hádá. Vezme první obrázek ze stránky (který nemusí být relevantní), první řádek textu (který může být rozbitý) a zobrazí to. Výsledek vypadá jako nějaký odkaz — ne jako prémiový brand.

Na webech, které stavím, nastavuji OG tagy pro každou stránku zvlášť. Když se klient podělí o odkaz na svou novou chatu, uvidí jeho přátelé krásný náhled s fotkou chaty, nadpisem Chata Koryška — Beskydy a popisem Rezervace bez provize Booking.com. Profesionální, čisté, prodejní.

Twitter Card tagy

Kromě Open Graph tagů existují Twitter Card tagy. Fungují podobně — říkají Twitteru (X), jak má odkaz vypadat. Dnes Twitter podporuje i OG tagy, ale Twitter Card tagy mi dávají větší kontrolu — můžu nastavit typ karty (summary, summary_large_image, player) a specifické obsahy.

Na každém projektu, který stavím, nastavuji oboje — OG tagy pro většinu platforem a Twitter Card tagy pro Twitter/X.

og:image: Nejvíc se na něj dívají

og:image je nejdůležitější OG tag, který nastavuji. Lidé se dívají na obrázek dřív, než čtou nadpis. Pokud je obrázek špatný, neklikají — i když je nadpis skvělý.

Pravidla, která používám:

1200×630 pixelů. Standardní velikost, kterou všechny platformy zobrazují správně.

Relevantní obsah. Fotka chaty pro Chatu Koryška, fotka pizzy pro PizzaKopr, fotka studia pro Ink & Glow. Ne generický obrázek.

Text na obrázku. Název firmy nebo slogan na obrázku pomáhá — když se obrázek načte bez nadpisu (což se stává), text na obrázku zachrání situaci.

Brand konzistence. Stejný styl, barvy, fonty jako na webu. OG obrázek je prodloužení vašeho brandu.

Jak OG tagy pomáhají SEO

OG tagy, které nastavuji, nezlepšují pozici ve vyhledávání přímo. Ale zlepšují proklik — když se o vás někdo podělí a karta vypadá dobře, více lidí kliká. Více prokliků = více návštěvnosti = lepší signál pro Google. Nepřímé SEO.

A co je důležité: když váš web vypadá profesionálně při sdílení, budí důvěru. Lidé si ho pamatují. Vracejí se. A to je víc než SEO.

Často kladené otázky

Co jsou Open Graph tagy?

Metatagy v hlavičce stránky, které říkají sociálním sítím, jak mají váš odkaz zobrazit. Nastavují nadpis, popisek a obrázek, který se načte, když někdo sdílí váš odkaz.

Jaká je ideální velikost og:image?

1200x630 pixelů. Všechny platformy — WhatsApp, Facebook, LinkedIn, iMessage — ji zobrazují správně. Menší obrázky se usekají, větší se zmenší.

Musím mít OG tagy na každé stránce?

Ano. Každá stránka by měla mít vlastní OG tagy — nadpis, popisek i obrázek. Když se někdo podělí o konkrétní stránku, náhled by měl odpovídat obsahu té stránky, ne homepage.

Blog