Open Graph je protokol, kterým stránka pomocí značek <meta> v hlavičce určí titulek, popis, obrázek a adresu pro náhled odkazu při sdílení na Facebooku, LinkedInu a v dalších službách. Bez těchto značek si služba vybere titulek a obrázek ze stránky sama a výsledek často neodpovídá tomu, co chcete ukázat.
Zahradnictví sdílí stránku jarní akce. Do hlavičky stránky patří:
<meta property="og:title" content="Jarní akce na ovocné stromky">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.cz/akce/jaro">
<meta property="og:image" content="https://www.example.cz/img/og-jaro-2027.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Mladé jabloně v květináčích před skleníkem">
<meta property="og:description" content="Sleva 20 % na vybrané ovocné stromky do 30. 4.">
<meta property="og:locale" content="cs_CZ">
Po nasazení vložíte adresu do Ladicího nástroje pro sdílení a zkontrolujete, jaký titulek a obrázek Facebook načetl.
Protokol vznikl ve Facebooku a popisuje ho web ogp.me. Povinné jsou čtyři vlastnosti og:title, og:type, og:image a og:url, přičemž og:url má být kanonická adresa stránky; volitelně přidáte og:description (jedna až dvě věty), og:site_name, og:locale (pro češtinu cs_CZ, výchozí je en_US) a u obrázku og:image:width, og:image:height a og:image:alt. Meta doporučuje obrázek 1200 × 630 px s poměrem stran zhruba 1,91 : 1, pro velký náhled aspoň 600 × 315 px, absolutní minimum 200 × 200 px a nejvýše 8 MB. Rozměry obrázku zapište do značek, aby se náhled zobrazil správně hned při prvním sdílení. Obrázek si Facebook ukládá do mezipaměti podle jeho adresy, nový proto nahrajte pod novou URL a stránku obnovte v Ladicím nástroji pro sdílení (Sharing Debugger), který zároveň ukáže chyby ve značkách. LinkedIn čte og:image také, náhled zkontrolujete v nástroji LinkedIn Post Inspector a po změně může trvat až týden, než se nový náhled projeví.
Časté chyby
- Obrázek chybí nebo je menší než 600 × 315 px, takže sdílený odkaz dostane jen malý náhled.
- Nový obrázek nahraný pod stejnou adresou, takže Facebook dál zobrazuje ten starý z mezipaměti.
- Šablona webu dává všem stránkám stejný og:title a og:image, takže každý sdílený odkaz vypadá stejně.