Open Graph: jak nastavit náhled odkazu na Facebooku, LinkedInu a WhatsAppu

Co je Open Graph a proč ho řešit

Open Graph je protokol, který původně vytvořil Facebook a dnes ho čte skoro každá aplikace, která umí zobrazit náhled odkazu. Když někdo pošle adresu vaší stránky do skupiny na Facebooku, do zprávy na WhatsAppu, do příspěvku na LinkedInu nebo do firemního Slacku, aplikace si stránku stáhne a v hlavičce hledá značky začínající og:.

Náhled rozhoduje, jestli na odkaz někdo klikne. Porovnejte dvě situace. Účetní kancelář v Ostravě sdílí článek o daňovém přiznání a v náhledu je výstižný titulek, srozumitelný popisek a obrázek s logem. Nebo je v náhledu obecný název webu, první náhodná věta z patičky a ikona platební karty, kterou aplikace našla jako první obrázek. Obsah je stejný, výsledek úplně jiný.

Pro pozice ve vyhledávání Open Graph přímo nerozhoduje. Google si titulek a popisek bere ze značek title a meta description, o kterých píšeme v článku title a meta description. Open Graph ale ovlivňuje, kolik lidí přijde ze sociálních sítí a ze sdílení mezi lidmi, a to je u mnoha malých firem významný zdroj návštěv.

Které značky potřebujete

Pět značek nahoře (title, description, image, url, type) je základ, který by měla mít každá stránka. Značky og:image:width a og:image:height s rozměry obrázku pomáhají aplikacím vykreslit náhled hned při prvním sdílení, ještě než obrázek stáhnou.

Ukázka HTML

Takhle může vypadat hlavička stránky služby autoservisu v Liberci:

<head>
  <title>Servis klimatizace Liberec | Autoservis Příklad</title>
  <meta name="description" content="Plnění a dezinfekce klimatizace do hodiny, bez objednání.">
  <link rel="canonical" href="https://www.autoservis-priklad.cz/klimatizace">

  <meta property="og:type" content="website">
  <meta property="og:title" content="Servis klimatizace do hodiny">
  <meta property="og:description" content="Plnění a dezinfekce klimatizace v Liberci, bez objednání.">
  <meta property="og:url" content="https://www.autoservis-priklad.cz/klimatizace">
  <meta property="og:image" content="https://www.autoservis-priklad.cz/og/klimatizace.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Mechanik plní klimatizaci osobního auta">
  <meta property="og:site_name" content="Autoservis Příklad">
  <meta property="og:locale" content="cs_CZ">

  <meta name="twitter:card" content="summary_large_image">
</head>

Všimněte si, že značky Open Graph používají atribut property, zatímco běžné meta značky a značky pro X používají name. Většina aplikací toleruje obojí, ale držte se standardu.

Obrázek og:image: rozměry a pravidla

Obrázek je nejviditelnější část náhledu, a proto si zaslouží nejvíc péče.

• Rozměr 1200 × 630 px (poměr zhruba 1,91 : 1) funguje na Facebooku, LinkedInu i X ve velkém formátu. Menší obrázky se mohou zobrazit jen jako malá miniatura vedle textu.
• Důležité věci doprostřed. Některé aplikace obrázek ořezávají do čtverce nebo jiného poměru. Text a logo dejte do středu s okrajem ze všech stran.
• Rozumná velikost souboru. Komprimovaný JPEG nebo PNG v řádu stovek kilobajtů. Podle zkušeností WhatsApp u velkých souborů náhled někdy nezobrazí vůbec.
• Formát JPEG nebo PNG. WebP a AVIF jsou skvělé pro web, ale ne všechny aplikace je v náhledech podporují. Pro og:image je bezpečnější klasický formát.
• Absolutní adresa s HTTPS. Relativní cesta /og/obrazek.jpg nefunguje, aplikace potřebuje celou adresu včetně domény.
• Vlastní obrázek pro důležité stránky. Jeden obecný obrázek s logem pro celý web je lepší než nic. Pro hlavní služby, produkty a články ale vytvořte vlastní, ať se náhledy od sebe liší.

Jak obrázky pro náhledy připravit bez grafika

1. V libovolném grafickém editoru si vytvořte šablonu 1200 × 630 px s barvami a logem firmy. Logo dejte do rohu, ale ne úplně k okraji.
2. Pro každou důležitou stránku do šablony vložte fotku a krátký nadpis, nejvýš pět až šest slov.
3. Exportujte jako JPEG s kvalitou kolem 80 % a zkontrolujte, že soubor nemá několik megabajtů.
4. Soubory pojmenujte podle stránky (og-klimatizace.jpg, ne IMG_2034.jpg) a nahrajte je na web.
5. Adresu obrázku zadejte v SEO pluginu nebo šabloně a náhled ověřte v ladicím nástroji Facebooku.

U e-shopu s tisíci produkty ruční příprava nedává smysl. Tam stačí kvalitní hlavní fotka produktu na světlém pozadí, ze které platforma náhled vytvoří sama. Vlastní obrázky připravte jen pro úvodní stránku, hlavní kategorie a články.

Jak náhled vypadá na jednotlivých platformách

Pro X nemusíte značky duplikovat. Když chybí twitter:title nebo twitter:image, použije odpovídající značky Open Graph. Stačí přidat řádek twitter:card, který určí velikost náhledu.

Jak Open Graph nastavit ve WordPressu a na Shoptetu

Ručně psát značky do HTML potřebujete jen u webů na míru. Redakční systémy a e-shopové platformy je obvykle generují samy:

• WordPress: SEO pluginy Yoast SEO, Rank Math i SEOPress v bezplatné verzi generují značky Open Graph automaticky z titulku, popisku a hlavního obrázku stránky. U každé stránky můžete titulek, popisek i obrázek pro sociální sítě přepsat. Nastavte i výchozí obrázek pro stránky, které vlastní nemají. Celkové nastavení najdete v článku SEO pro WordPress.
• Shoptet a jiné pronajaté e-shopy: značky obvykle vznikají automaticky z názvu a obrázku produktu nebo kategorie. Zkontrolujte, co platforma skutečně generuje, a hlavně kvalitu hlavních fotek produktů, protože právě ty se v náhledu objeví.
• Weby na míru: značky musí generovat šablona pro každou stránku zvlášť. Nejčastější chyba je, že všechny stránky mají stejné značky z úvodní stránky.

Ladicí nástroje a mezipaměť

Nejčastější situace: opravíte obrázek, sdílíte odkaz znovu a v náhledu je pořád ten starý. Důvodem je mezipaměť (cache). Facebook, LinkedIn i další platformy si náhled po prvním načtení uloží a nějakou dobu ho stránku znovu nestahují.

1. Facebook Sharing Debugger (developers.facebook.com/tools/debug): vložte adresu a nástroj ukáže, které značky Facebook vidí, jak vypadá náhled a jaké hlásí chyby. Tlačítkem pro nové načtení vynutíte aktualizaci.
2. LinkedIn Post Inspector (linkedin.com/post-inspector): stejná funkce pro LinkedIn. Po kontrole se náhled obnoví i pro nové příspěvky.
3. WhatsApp a další aplikace veřejný ladicí nástroj nemají. Pokud se náhled neobnoví, pomůže změnit adresu obrázku, například přejmenovat soubor nebo přidat parametr ?v=2.
4. Zdrojový kód stránky: v prohlížeči zobrazte zdroj stránky a vyhledejte og:. Uvidíte, jestli značky na stránce opravdu jsou a jestli neobsahují chybu.

Náhled, který už je v dříve odeslaných příspěvcích a zprávách, se obvykle nezmění. Ladicí nástroje ovlivní jen nová sdílení.

Časté chyby

• Chybí `og:image`. Aplikace vybere první obrázek, který najde, třeba logo platební brány nebo ikonu v patičce.
• Relativní adresa obrázku nebo adresa přes http:// místo https://.
• Obrázek je příliš malý, takže se zobrazí jen jako miniatura, nebo naopak příliš velký soubor, který se nestáhne.
• Všechny stránky mají stejné značky. Sdílený produkt pak vypadá jako úvodní stránka.
• Robot sociální sítě je zablokovaný. Facebook stahuje stránky robotem facebookexternalhit, LinkedIn robotem LinkedInBot. Pokud je firewall, bezpečnostní plugin nebo nastavení proti botům odmítne, náhled nevznikne. Stejný problém umí zablokovat i AI roboty, víc v článku o robots.txt a AI botech.
• `og:url` ukazuje jinam než kanonická adresa, například na úvodní stránku nebo na verzi s parametry. Sjednocení popisuje článek o kanonické URL.
• Obrázek za přihlášením nebo na testovací doméně, kam se robot nedostane.

Jak ověřit nastavení na celém webu

U jedné stránky stačí ladicí nástroj Facebooku. Na celém webu je rychlejší crawler: Screaming Frog SEO Spider (zdarma do 500 adres) vypíše značky Open Graph u všech stránek a ukáže, kde chybí nebo se opakují. Open Graph je také součástí kontroly v SEO audit checklistu.

Rychlou kontrolu konkrétní stránky udělá i bezplatný sken webu od Zmínky. Mezi 21 kontrolami ověří, jestli stránka má značky Open Graph, a zároveň zkontroluje title, meta popisek, strukturovaná data a přístup AI robotů.

Open Graph a strukturovaná data schema.org se často pletou. Open Graph slouží náhledům při sdílení, schema.org popisuje obsah stránky vyhledávačům a AI. Na dobrém webu mají své místo obojí.