OG tag generátor pokrývá Open Graph protokol, ovšem kompletní nastavení náhledů při sdílení obsahu vyžaduje znalost druhého systému: Twitter Cards. Weby, které implementují pouze Open Graph, fungují správně na Facebooku, LinkedInu a Slacku, ovšem na platformě X (dříve Twitter) se spoléhají na záložní chování, které nemusí přinést optimální výsledky. Chybějící nebo nesprávně nastavené Twitter Cards patří přitom mezi technické nedostatky, které analyzátor SEO problémů u e-shopů pravidelně odhaluje. Tento článek vysvětluje, v čem se oba systémy liší, kde se překrývají a jak je správně nastavit tak, aby sdílený obsah vypadal dobře na všech platformách najednou.

Jak Open Graph a Twitter Cards vznikly a proč existují oba

Open Graph protokol představil Facebook v roce 2010 jako způsob, jak webovým stránkám dát strukturovaná metadata pro sdílení. Protokol se rychle rozšířil a dnes ho čte naprostá většina platforem – Facebook, LinkedIn, Pinterest, Slack, WhatsApp, iMessage a řada dalších.

Twitter Cards vznikly jako samostatný systém Twitteru, dnes platformy X, vydaný v roce 2012. Twitter se rozhodl vytvořit vlastní standard namísto přijetí Open Graph, pravděpodobně z důvodu větší kontroly nad formátem zobrazení a možnosti nabídnout typy karet bez přímé analogie v Open Graph.

Výsledkem jsou dva paralelní systémy se stejným cílem, ovšem různou syntaxí a různými možnostmi. Oba systémy žijí vedle sebe v hlavičce stránky a platformy si berou ten, který znají.

Kde se oba systémy překrývají

Twitter při načítání náhledu sdíleného odkazu nejprve hledá vlastní Twitter Cards tagy. Pokud je nenajde, sáhne po Open Graph tazích jako záložním zdroji. Web s korektně implementovaným Open Graph bez Twitter Cards tak bude na platformě X zobrazovat náhledy, jen ne nutně optimálně nastavené.

Konkrétně Twitter použije og:title jako titulek náhledu, og:description jako popis a og:image jako obrázek. Pro základní funkčnost tedy Open Graph postačí. Problém nastane tehdy, kdy chcete využít specifické možnosti Twitter Cards, které Open Graph nemá, nebo kdy chcete mít explicitní kontrolu nad tím, co Twitter zobrazí nezávisle na nastavení pro ostatní platformy.

Tagy, které se přímo překrývají

Mapování mezi oběma systémy pro základní tagy vypadá takto.

  • og:title odpovídá twitter:title.
  • og:description odpovídá twitter:description.
  • og:image odpovídá twitter:image.
  • og:url nemá přímý ekvivalent v Twitter Cards.

Pokud tedy máte na stránce vyplněné OG tagy a chcete Twitter Cards nastavit na stejné hodnoty, stačí přidat twitter:card s typem karty a zbytek Twitter doplní z OG tagů automaticky.

Kde se oba systémy liší

Typy karet

Open Graph nemá koncept typů karet. Definuje typ obsahu prostřednictvím og:type (article, website, product), ovšem způsob zobrazení náhledu závisí na platformě samotné.

Twitter Cards nabízejí čtyři typy s odlišným vizuálním formátem.

  • summary zobrazí malý čtvercový náhled obrázku vedle textu, vhodný pro obecný obsah a krátké zprávy.
  • summary_large_image zobrazí velký obdélníkový obrázek nad textem, vhodný pro blogové články, zprávy a obsah, kde vizuální dojem hraje roli.
  • app slouží pro propagaci mobilních aplikací s přímým odkazem na App Store nebo Google Play.
  • player umožňuje přehrávání videa nebo audia přímo v náhledu bez opuštění platformy.

Volba twitter:card je proto první a nejdůležitější rozhodnutí při nastavování Twitter Cards. Bez ní Twitter zobrazí záložní formát na základě dostupných OG tagů.

Rozměry obrázků

Open Graph doporučuje rozměry og:image 1200 × 630 pixelů, poměr stran přibližně 1,91:1. Tento rozměr funguje dobře pro Facebook, LinkedIn a většinu dalších platforem.

Twitter Cards mají odlišné požadavky podle typu karty. Pro summary je optimální čtvercový obrázek minimálně 144 × 144 pixelů, maximálně 4096 × 4096 pixelů. Pro summary_large_image platí poměr stran 2:1 s minimem 300 × 157 pixelů a doporučeným rozměrem 1200 × 628 pixelů.

Stránky, které sdílíte na obou platformách a záleží vám na vizuální kvalitě náhledu, proto ideálně definují separátní twitter:image optimalizovanou pro formát Twitter Cards nezávisle na og:image.

Atribut twitter:site a twitter:creator

Twitter Cards nabízejí dva tagy bez přímé analogie v Open Graph: twitter:site obsahuje Twitter handle účtu, na který se váže obsah webu, a twitter:creator handle konkrétního autora článku. Tyto tagy umožňují Twitteru propojit sdílený obsah s konkrétními účty a mohou se zobrazit jako součást náhledu.

Pro mediální weby, blogy s více autory nebo weby, kde se aktivně pracuje s Twitter přítomností, mají tyto tagy praktický přínos. Pro ostatní weby jsou volitelné.

Jak oba systémy nastavit najednou

Nejefektivnější přístup kombinuje oba systémy s minimální redundancí. Základ tvoří kompletní sada OG tagů pokrývající většinu platforem. K nim se přidá twitter:card definující typ karty a případně twitter:image, pokud chcete na Twitteru zobrazit jiný obrázek než na ostatních platformách. Volitelně twitter:site a twitter:creator pro weby s aktivní Twitter přítomností.

Zbytek Twitter doplní z OG tagů automaticky, aniž by bylo třeba duplicitně zadávat stejné hodnoty. Výsledná hlavička stránky je přehledná a spravovatelná.

Jak OG a Twitter tagy sestavit bez ruční práce s kódem

Ruční psaní obou sad tagů pro každou stránku je časově náročné a náchylné k překlepům. OG Tag Generátor jakožto součást nástroje TopRankerTools sestaví kompletní sadu Open Graph i Twitter Cards tagů na základě zadaných hodnot a vygeneruje kód připravený ke vložení do šablony stránky. Výsledek pokryje obě platformy najednou bez nutnosti znát syntaxi obou systémů.

Dva systémy, jeden cíl, jedno nastavení

Open Graph a Twitter Cards řeší stejný problém dvěma různými cestami. Weby, které implementují pouze jeden z nich, fungují, ovšem ne optimálně na všech platformách zároveň. Správné nastavení obou systémů přitom nevyžaduje dvojnásobnou práci: základ tvoří OG tagy, Twitter Cards ho doplní o typově specifické informace. A máte sdílený obsah, který vypadá dobře všude, kde ho uživatelé sdílí.

Vojtěch Bartík
Latest posts by Vojtěch Bartík (see all)

Související příspěvky:

Analýza obsahu webu se SEOtest.online – co odhalí a jak vám pomůže? Proč je optimalizace obrázků online užitečná a Google ji bere vážně? 3 fáze zájemce o nabídku zjistíte při SEO konzultaci nejen v Brně Tvorba webu na míru z něj udělá internetovou stálici