Open Graph je sada značek v kódu stránky, které určují, jak vypadá náhled odkazu při sdílení. Nastavují titulek, popis, obrázek a adresu, které ukáže Facebook, LinkedIn nebo chatovací aplikace. Protokol původně vytvořil Facebook a dnes ho čte většina sociálních sítí i aplikací.
Open Graph jednoduše
Když odkaz vložíte do příspěvku, síť si stránku stáhne a hledá, co ukázat. Open Graph jí to řekne přesně. Bez něj si síť vybere sama a často sáhne vedle: logo z patičky, první větu z cookie lišty.
Značky, které potřebujete
- og:title titulek náhledu. Může být jiný než title tag, třeba bez názvu značky.
- og:description krátký popis. Když chybí, sítě často použijí meta description.
- og:image obrázek náhledu. Má největší vliv na to, jestli lidé kliknou.
- og:url hlavní adresa stránky.
- og:type typ obsahu, třeba „article“ u článku.
Pro X (Twitter) se přidávají obdobné značky twitter:card, twitter:title a další.
Příklad: články na tomto blogu
Každý článek na toonja.cz má vyplněné og:title, og:description, og:image, og:url, og:type i og:locale. Článek WordPress a Webflow odzvonilo má jako og:image vlastní ilustraci s náhrobky obou platforem, takže při sdílení je na první pohled jasné, o čem je.
Jak napsat popisek, který funguje ve vyhledávání i při sdílení, popisuju v článku Jak psát meta description.
Na co si dát pozor
- Obrázek musí mít plnou adresu. Relativní cesta jako „../obrazek.jpg“ sítím nestačí.
- Každá stránka vlastní náhled. Stejný obrázek všude znamená, že sdílení vypadají jako jedno a totéž.
- Text v obrázku čitelný i na mobilu. Náhled bývá malý.
Než článek sdílíte, pošlete si odkaz sami sobě do chatu. Za deset vteřin víte, jestli náhled prodává, nebo se stydí.
Časté otázky
Jaký obrázek použít?
Obdélník na šířku, nejčastěji doporučovaný rozměr je 1200 × 630 px. Důležitý obsah dejte doprostřed, některé sítě okraje ořezávají.
Proč se po změně pořád ukazuje starý náhled?
Sítě si náhled ukládají. Na Facebooku pomůže nástroj Sharing Debugger, na LinkedInu Post Inspector. Oba stránku načtou znovu.
Ovlivňuje Open Graph SEO?
Přímo ne. Ale lepší náhled znamená víc kliků ze sdílení a víc lidí, kteří se o stránce dozví.
Online marketingový konzultant. Přes 10 let dělám marketing e-shopům a startupům a weby si stavím s AI. Ve slovníku vysvětluju pojmy, se kterými denně pracuju.