OpenGraph: Jak zajistit, aby vaše odkazy vypadaly skvěle na sociálních sítích
Sdílíte odkaz na Facebook nebo LinkedIn a místo pěkného náhledu se zobrazí jen holý text? Řešením je OpenGraph protokol. V tomto průvodci vám ukážu, co to je, proč ho potřebujete a jak ho jednoduše nastavit.
Co je OpenGraph?
OpenGraph je internetový protokol, který původně vytvořil Facebook. Umožňuje webovým stránkám „říct“ sociálním sítím, jak má vypadat náhled při sdílení odkazu. Díky němu můžete kontrolovat:
- Titulek – nadpis, který se zobrazí
- Popisek – krátký text pod titulkem
- Obrázek – náhledový obrázek (ten nejdůležitější prvek!)
- URL adresu – odkaz na stránku
Bez OpenGraph tagů si sociální sítě „vymyslí“ náhled samy – a výsledek bývá často nepěkný nebo zavádějící.
Proč je OpenGraph důležitý?
📈 Vyšší proklikovost
Příspěvky s kvalitním náhledovým obrázkem mají výrazně vyšší míru prokliků. Studie ukazují až 100% nárůst engagement u příspěvků s obrázky oproti těm bez nich.
🎨 Profesionální vzhled
Konzistentní a pěkné náhledy budují důvěryhodnost vaší značky. Chybějící nebo rozmazané obrázky působí neprofesionálně.
🔄 Konzistence napříč platformami
OpenGraph podporuje Facebook, LinkedIn, Twitter, Slack, Discord, WhatsApp a mnoho dalších. Jeden standard pro všechny.
Základní OpenGraph tagy
OpenGraph tagy se vkládají do sekce <head> vaší HTML stránky. Zde jsou ty nejdůležitější:
Povinné tagy
| Tag | Popis | Příklad |
|---|---|---|
og:title | Titulek stránky (max. 60 znaků) | Jak vařit italské těstoviny |
og:type | Typ obsahu | website, article, product |
og:image | URL náhledového obrázku | https://example.com/obrazek.jpg |
og:url | Kanonická URL stránky | https://example.com/clanek |
Doporučené tagy
| Tag | Popis | Doporučení |
|---|---|---|
og:description | Popisek stránky | Max. 160 znaků |
og:site_name | Název webu | Např. „Můj blog“ |
og:locale | Jazyk obsahu | cs_CZ pro češtinu |
og:image:width | Šířka obrázku | 1200 |
og:image:height | Výška obrázku | 630 |
og:image:alt | Popis obrázku | Pro přístupnost |
Ukázka kódu
Takto vypadají OpenGraph tagy v praxi:
<head>
<!-- Základní meta tagy -->
<title>Jak vařit pravé italské těstoviny | Můj blog</title>
<meta name="description" content="Naučte se připravit autentické italské těstoviny jako profesionální šéfkuchař.">
<!-- OpenGraph tagy -->
<meta property="og:title" content="Jak vařit pravé italské těstoviny">
<meta property="og:type" content="article">
<meta property="og:url" content="https://mujblog.cz/italske-testoviny">
<meta property="og:image" content="https://mujblog.cz/images/testoviny-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Talíř čerstvých italských těstovin s rajčatovou omáčkou">
<meta property="og:description" content="Naučte se připravit autentické italské těstoviny jako profesionální šéfkuchař.">
<meta property="og:site_name" content="Můj blog">
<meta property="og:locale" content="cs_CZ">
</head>Rozměry obrázků pro různé platformy
Každá platforma má mírně odlišné požadavky, ale existuje univerzální velikost, která funguje všude:
🎯 Doporučená univerzální velikost: 1200 × 630 px
Poměr stran 1.91:1 funguje optimálně na Facebooku, LinkedInu i většině dalších platforem.
Specifické požadavky platforem
| Platforma | Rozměry | Poměr stran | Max. velikost |
|---|---|---|---|
| 1200 × 630 px | 1.91:1 | 8 MB | |
| 1200 × 627 px | 1.91:1 | 5 MB | |
| Twitter/X | 1200 × 675 px | 16:9 | 5 MB |
| 1200 × 630 px | 1.91:1 | 5 MB |
Tip: Používejte formát JPG nebo PNG. Velikost souboru držte ideálně pod 1 MB pro rychlejší načítání.
Twitter Cards – speciální případ
Twitter sice umí číst OpenGraph tagy, ale má vlastní systém tzv. Twitter Cards. Pro nejlepší výsledky na Twitteru přidejte i tyto tagy:
<!-- Twitter Card tagy -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Jak vařit pravé italské těstoviny">
<meta name="twitter:description" content="Naučte se připravit autentické italské těstoviny.">
<meta name="twitter:image" content="https://mujblog.cz/images/testoviny-twitter.jpg">Typy Twitter Cards:
summary– malý náhled s obrázkem vlevosummary_large_image– velký obrázek nad textem (nejčastější)player– pro video obsahapp– pro propagaci aplikací
Jak nastavit OpenGraph ve WordPressu
Dobrou zprávou je, že ve WordPressu nemusíte tagy psát ručně. Existují pluginy, které to udělají za vás:
1. Yoast SEO (doporučeno)
- Nainstalujte a aktivujte plugin Yoast SEO
- Při úpravě příspěvku nebo stránky najděte box „Yoast SEO“
- Klikněte na záložku „Social“ (ikona sdílení)
- Vyberte „Facebook“
- Nastavte vlastní titulek, popis a nahrajte obrázek
2. Rank Math
Podobný postup jako u Yoast SEO – najděte sekci „Social“ v editoru příspěvku.
3. Globální nastavení
V obou pluginech můžete nastavit výchozí obrázek pro celý web (použije se, když stránka nemá vlastní). Najdete ho v:
- Yoast: SEO → Social → Facebook → Default image
- Rank Math: Rank Math → Titles & Meta → Social Meta
Jak otestovat OpenGraph tagy
Po nastavení tagů je důležité ověřit, že vše funguje správně. Použijte tyto nástroje:
| Nástroj | Platforma | Odkaz |
|---|---|---|
| Sharing Debugger | developers.facebook.com/tools/debug | |
| Post Inspector | linkedin.com/post-inspector | |
| Card Validator | Twitter/X | cards-dev.twitter.com/validator |
| OpenGraph.xyz | Univerzální | opengraph.xyz |
Důležité: Pokud změníte OpenGraph tagy, sociální sítě mohou ještě nějakou dobu zobrazovat starou verzi z cache. Použijte „Scrape Again“ ve Facebook Debuggeru pro vynucení aktualizace.
Časté chyby a jak se jim vyhnout
❌ Chybějící nebo příliš malý obrázek
Minimální velikost pro Facebook je 200 × 200 px, ale obrázky menší než 600 px na šířku se zobrazují malé a vlevo od textu. Řešení: Vždy používejte obrázky minimálně 1200 × 630 px.
❌ Relativní URL místo absolutní
<!-- Špatně -->
<meta property="og:image" content="/images/obrazek.jpg">
<!-- Správně -->
<meta property="og:image" content="https://example.com/images/obrazek.jpg">❌ Příliš dlouhý titulek nebo popis
Delší texty se oříznou. Držte se limitů: titulek do 60 znaků, popis do 160 znaků.
❌ Neaktuální cache
Po změně tagů použijte Facebook Sharing Debugger a klikněte na „Scrape Again“.
Shrnutí
✅ Checklist pro správné nastavení OpenGraph
- Nastavte všechny 4 povinné tagy (title, type, image, url)
- Použijte obrázek 1200 × 630 px
- Přidejte popis (og:description) do 160 znaků
- Pro Twitter přidejte twitter:card tagy
- Otestujte pomocí Facebook Debuggeru
- Nastavte výchozí obrázek pro celý web
OpenGraph protokol je jednoduchý, ale účinný nástroj pro zlepšení vzhledu vašich odkazů na sociálních sítích. Investice pár minut do správného nastavení se vám vrátí v podobě vyšší proklikovosti a profesionálnějšího dojmu vaší značky.
Máte dotazy k OpenGraph nebo potřebujete pomoct s nastavením? Napište do komentářů!