Co jsou Twitter Cards?

Twitter Card markup, nebo zkráceně Twitter Cards, je strukturovaný markup, který můžete přidat do svých HTML dokumentů, abyste dodali kontext svému obsahu a získali kontrolu nad náhledy, které se zobrazí při sdílení vašich URL na Twitteru.

Na následujícím příkladu můžete vidět, jak americká televize CNN využívá Twitter Cards ke kontrolování toho, jak se její blogové příspěvky zobrazují na Twitteru:

Proč by vás Twitter Cards měly zajímat

Stránky optimalizované pomocí Twitter Cards získávají více kliků, liků a retweetů.

Proč?

Protože když má váš příspěvek atraktivní obrázek, upoutá pozornost. A když má k tomu parádní nadpis a popis, šance, že lidé na tento náhled kliknou, je mnohem vyšší.

A nevytváří Twitter tyto náhledy náhodou automaticky?

Ano, vytváří — ale pouze do jisté míry. V 99 % případů však nezvolí ten nejlepší možný obrázek a zobrazí nevhodně osekaný název a popis.

Twitter Cards vám umožní získat kontrolu nad náhledy svých URL na Twitteru, podobně jako to činí markupy Open Graph u platforem jako Facebook či LinkedIn. V SEO jsme posedlí vylaďováním názvů a meta popisů, abychom získali co nejvyšší míru prokliku, avšak lidé v tomto ohledu často zapomínají na sociální sítě. A to je škoda, protože boj o pozornost na sociálních sítích je minimálně stejně tvrdý, ne-li tvrdší.

Zlepší Twitter Cards mou pozici ve vyhledávačích?

Ne, Twitter Cards nemají přímý vliv na vaše pozice. Máme však za to, že vyhledávačům pomáhají určit kontext vašeho obsahu podobně jako Open Graph a Schema.org. A pomineme-li vyhledávače, označení vašeho obsahu pomocí Twitter Cards zlepší vaši viditelnost na Twitteru, což vede k většímu počtu sdílení a linků. Nepřímý pozitivní vliv Twitter Cards na SEO zde tedy skutečně je.

Jaké platformy podporují Twitter Cards

Samozřejmostí je Twitter, jehož vývojáři s Twitter Cards přišli, nicméně podporuje je také Slack.

Po provedení několika testů jsme zjistili, že Facebook, LinkedIn a Google Plus nezobrazují náhledy na základě markupu Twitter Card, a to ani v případě, že nevyužíváte markup Open Graph. Namísto toho své náhledy zobrazují na základě tagů title a meta description a náhodně vybraného obrázku.

Pokud tedy chcete optimalizovat svou viditelnost na Facebooku, LinkedInu a Google Plus, implementujte markup Open Graph.

Jak implementovat Twitter Cards

Jak jsme již zmínili, Twitter Cards lze do stránek implementovat přidáním markupu Twitter Card do HTML dokumentů, konkrétně do sekce <head>. Tento úkon můžete provést manuálně, nebo pomocí pluginů či jiných funkcí v případě, že vaše stránky běží na systému pro správu obsahu (CMS). Pokud tyto pluginy k dispozici nemáte, obraťte se na své vývojáře. Zabudování této funkcionality zpravidla není obtížné.

Různé typy Twitter Cards

Twitter Cards se dělí na čtyři základní typy:

  1. Summary Card
  2. Summary Card with Large Image
  3. App Card
  4. Player Card

Níže se detailně zaměříme na první dva zmíněné typy a určíme, jaké atributy je u Twitter Cards nutné definovat.

Typ 1: Summary Card

Pro platnou implementaci markupu Twitter Card vyžaduje Twitter definování následujících dvou atributů:

  • twitter:card
  • twitter:title

Doporučujeme však přidat také následující tři atributy, které vašemu obsahu poskytnou více kontextu:

  • twitter:site
  • twitter:description
  • twitter:image

Podívejme se na příklad

Takto se při sdílení na Twitteru zobrazí článek o strojovém učení od Search Engine Journal:

Když se podíváme na zdrojový kód, vypadá implementace markupu Twitter Card následovně:

Typ 2: Summary Card with Large Image

Požadované a doporučené atributy pro typ Summary Card with Large Image jsou stejné jako pro Summary Card.

Podívejme se na příklad

Zde jsou dobrým příkladem všechny naše články, protože u všech využíváme právě typ Summary Card with Large Image. Například náš článek o tagu hreflang vypadá při sdílení na Twitteru takto:

Když se podíváme na zdrojový kód, vypadá implementace markupu Twitter Card následovně:

Detailní rozbor atributů Twitter Cards

twitter:card

Atribut twitter:card udává, který ze čtyř zmíněných typů Twitter Cards budete využívat:

  1. Summary Card: text s menším čtveratým obrázkem.
  2. Summary Card with Large Image: text s velkým obdélníkovým obrázkem.
  3. App Card: pro propagaci aplikací.
  4. Player Card: pro sdílení videí. Abyste však tento typ mohli využívat, musí váš obsah nejprve projít schválením.

Ukázkový fragment kódu

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

Požadavky

Musíte si zvolit jeden ze čtyř typů Twitter Cards.

Co se stane, když tento atribut nenadefinuejte

Pokud nenadefinujete atribut twitter:card, nebude Twitter vědět, jaký typ Twitter Cards chcete pro zobrazení svého obsahu použít, a tak s vaší URL bude zacházet stejně, jako kdyby neobsahovala žádný Twitter Card markup.

twitter:site

Atribut twitter:site popisuje twitterový účet dané stránky.

Ukázkový fragment kódu

<meta name="twitter:site" content="@contentking" />

Požadavky

Atribut twitter:site by měl odkazovat na fungující twitterový účet dané webové stránky. Můžete definovat buď atribut twitter:site, nebo twitter:site:id, který vám umožní vložit Twitter ID vaší stránky. Twitter ID je unikátní číselný kód, který identifikuje váš twitterový účet. Své Twitter ID můžete vyhledat zde: http://mytwitterid.com/. Ukázkový fragment kódu by tedy v našem případě vypadal takto:

<meta name="twitter:site:id" content="15467325" />

Co se stane, když tento atribut nenadefinuejte

Nevytvoříte spojení mezi svým obsahem a přidruženým twitterovým účtem. Nedefinování tohoto atributu sice nemá přímý dopad na funkčnost Twitter Cards, nicméně i tak doporučujeme twitter:site definovat.

twitter:creator

Atribut twitter:creator popisuje twitterový účet autora.

Ukázkový fragment kódu

<meta name="twitter:creator" content="@stevenvvessum" />

Požadavky

Atribut twitter:creator by měl odkazovat na fungující twitterový účet. Můžete definovat buď twitter:creator, nebo twitter:creator:id. Své Twitter ID můžete vyhledat zde: http://mytwitterid.com/. Ukázkový fragment kódu by tedy v případě Stevena vypadal takto:

<meta name="twitter:siteid" content="8728882" />

Co se stane, když tento atribut nenadefinuejte

Nevytvoříte spojení mezi obsahem a twitterovým účtem jeho autora. Nedefinování tohoto atributu nemá přímý dopad.

twitter:title

Atribut twitter:title popisuje název dané Twitter Card podobně jako atribut title u webové stránky.

Ukázkový fragment kódu

<meta name="twitter:title" content="Hreflang: ranking the right pages for multi-language sites" />

Požadavky

Při optimalizování náhledu svého obsahu pro Twitter myslete na to, že pokud bude váš název delší než 55 znaků, nevejde se na jeden řádek. Twitter sice doporučuje maximální délku 70 znaků, nicméně při našich testech takto dlouhé názvy nikdy nezobrazil.

Co se stane, když tento atribut nenadefinuejte

Twitter jako první možnost použije tag og:title, případně title jako druhou možnost.

twitter:description

Atribut twitter:description definuje popis Twitter Card. Jedná se o krátký popis, který říká, o čem daná stránka je.

Ukázkový fragment kódu

<meta name="twitter:description" content="Learn how to implement hreflang to get search engines to rank the right pages for your multi-language site. Check it out now!" />

Požadavky

Při optimalizování náhledu svého obsahu pro Twitter myslete na to, že pokud bude váš popis delší než 125 znaků, nevejde se na jeden řádek. Twitter sice doporučuje maximální délku 200 znaků, nicméně při našich testech takto dlouhé popisy nikdy nezobrazil.

Co se stane, když tento atribut nenadefinuejte

Twitter jako první možnost použije tag og:description, případně description jako druhou možnost.

twitter:image

Atribut twitter:image definuje obrázek, který se zobrazí ve vašem náhledu. Výběru tohoto obrázku věnujte náležitou pozornost. Roli zde hrají velikost, kvalita i rozměry.

Ukázkový fragment kódu

<meta name="twitter:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Požadavky

Při používání atributu twitter:image společně s typem Summary Card je nutné dodržet následující požadavky:

  • Poměr stran: 1:1
  • Minimální velikost: 144 x 144 pixelů
  • Maximální velikost: 4096 x 4096 pixelů
  • Maximální velikost souboru: 5 MB
  • Podporované formáty: JPG, PNG, WEBP, a GIF (u animovaných GIFů bude použit pouze první snímek). Formát SVG není podporován.

Při používání atributu twitter:image společně s typem Summary Card with Large Image je nutné dodržet následující požadavky:

  • Poměr stran: 2:1
  • Minimální velikost: 300 x 157 pixelů
  • Maximální velikost: 4096 x 4096 pixelů
  • Maximální velikost souboru: 5 MB
  • Podporované formáty: JPG, PNG, WEBP, a GIF (u animovaných GIFů bude použit pouze první snímek). Formát SVG není podporován.

Co se stane, když tento atribut nenadefinuejte

Twitter první zkontroluje, zda máte definovaný tag og:image, a pokud ne, použije náhodný obrázek z vaší stránky.

twitter:image:alt

Atribut twitter:image:alt vám umožní opatřit obrázek twitter:image textovým popisem pro zrakově postižené uživatele.

Ukázkový fragment kódu

<meta name="twitter:image:alt" content="Hreflang image that symbolizes different languages" />

Požadavky

Dodržujte maximální délku textu 420 znaků.

Co se stane, když tento atribut nenadefinuejte

Nic, v tomto případě se jedná pouze o volitelný atribut. Doporučujeme ho však definovat, protože tak zrakově postiženým uživatelům umožníte snadněji porozumět vašemu obsahu.

Další typy a atributy Twitter Cards

Dále jsou zde ještě dva typy Twitter Cards: App a Player. Tyto typy jsou však spíše vzácné a u většiny stránek nejsou aplikovatelné. Více informací o těchto dvou typech najdete zde:

Ověřte si implementaci Twitter Cards v nástroji Card Validator

Pro ověření správnosti implementace Twitter Cards můžete použít nástroj přímo od Twitteru zvaný Card Validator. Tento nástroj vám však umožní zkontrolovat pouze jednu URL po druhé. Pokud však potřebujete zkontrolovat větší množství URL, je dobré mít škálovatelné řešení pro hromadnou kontrolu. A zde vám může pomoci ContentKing: umožní vám totiž provést audit implementace Twitter Cards napříč celými vašimi stránkami, a to v reálném čase:

Nejlepší postupy při práci s Twitter Cards

Při práci s Twitter Cards se držte následujících osvědčených postupů:

  1. Definujte minimálně všechny povinné atributy, ideálně však také ty doporučené.
  2. U atributu twitter:title nepřekročte 55 znaků.
  3. U atributu twitter:description nepřekročte 125 znaků.
  4. Pro atribut twitter:image používejte obrázky vysoké kvality s minimálními rozměry 144 x 144 u Summary Card a 300 x 157 pixelů u Summary Card with Large Image, maximálními rozměry 4096 x 4096 pixelů a velikostí souboru do 5 MB. Podporované formáty jsou: JPG, PNG, WEBP a GIF.
  5. Při implementaci markupu Twitter Card vždy ověřte její správnost v nástroji Card Validator, kde si zobrazte náhled její URL a ujistěte se, že obsahuje všechna potřebná data. Vylepšujte a vylaďujte to, až do chvíle, kdy se bude zobrazovat správně. Dalším přínosem zde je, že náhled se vám uloží také do pre-cache, takže budete mít jistotu, že se při prvním sdílení zobrazí správně.
  6. Ujistěte se, že ve svém souboru robot.txt nemáte zablokovaný Twitterbot, protože musí mít možnost navštívit vaše stránky, aby mohl načíst a následně zobrazit váš Twitter Card markup včetně obrázku twitter:image, který jste si zvolili, takže s blokováním buďte opatrní.
  7. Pokud jste udělali nějakou chybu, kterou jste následně napravili, a chcete, aby Twitter vygeneroval nový náhled, jděte do Card Validatoru a načtěte data z Twitter Card znovu. Tím se obnoví cache. Nicméně u obrázku toto automatické obnovení neplatí. Zde je třeba definovat novou twitter:image URL a načíst data z Twitter Card znovu v Card Validatoru. Doporučujeme za twitter:image přidat řetězec dotazu, díky čemuž budete moci jednoduše obnovovat obrázek v náhledu prostřednictvím změn hodnoty řetězce dotazu.

Často kladené otázky ohledně Twitter Cards

  1. Jakou velikost obrázku mám pro Twitter Cards použít?
  2. Mé obrázky v Twitter Cards se nezobrazují. Co je špatně?
  3. Validator říká, že nenachází žádné meta tagy. Co je špatně?

1. Jakou velikost obrázku mám pro Twitter Cards použít?

Pro rok 2018 platí jako nejlepší velikosti obrázků pro Twitter Cards následující:

Summary Card: 1024 x 1024 (nutno zachovat poměr stran 1:1)
Summary Card with Large Image: 1024 x 512 (nutno zachovat poměr stran 2:1)

Tyto rozměry zajistí, že vaše obrázky nebudou rozmazané.

Dále dodržujte následující:

  • Maximální velikost souboru: 5 MB
  • Podporované formáty: JPG, PNG, WEBP, a GIF (u animovaných GIFů bude použit pouze první snímek). Formát SVG není podporován.

2. Mé obrázky v Twitter Cards se nezobrazují. Co je špatně?

Pokud se váš obrázek v Twitter Cards nezobrazuje, mohl dojít k několika různým problémům:

  1. Nenadefinovali jste správnou URL obrázku (včetně protokolu, HTTP nebo HTTPS).
  2. Váš obrázek nemá správné rozměry, nebo překračuje maximální velikost souboru 5 MB.
  3. Váš obrázek není v podporovaném formátu. Mezi nepodporované formáty patří například BMP a SVG.
  4. Zablokovali jste přístup Twitterbot k vašim stránkám. Zkontrolujte, zda má Twitterbot povolen přístup k vašim stránkám v souboru robots.txt. Mějte na paměti, že Twitterbot zablokujete také příkazem User-agent: *.

3. Validator říká, že nenachází žádné meta tagy. Co je špatně?

Existuje několik důvodů, proč k této situaci může dojít, a to zejména:

    1. Vaše stránka neodesílá zpět HTTP status 200. Zajistěte, aby ho odesílala.
    2. Vaše stránka nevrací data z Content-type:text/html v záhlaví. Zajistěte, aby je vracela.
    3. Načítání markupu Twitter Card probíhá pomocí Javascriptu. Twitterbot nepodporuje Javascript. Meta tagy musí být statické. Implementujte markup Twitter Card do sekce <head> section jako statické meta tagy.

Získejte zkušební verzi na 14 dní zdarma

Začněte během 20 vteřin

Vložte platnou doménu, prosím (www.priklad.cz).
  • Platební karta není potřeba
  • Není třeba žádná instalace
  • Bez závazků