Důležité meta tagy pro sociální média

Protože v dnešní době hrají sociální média velkou roli pro sdílení a filtrování obsahu, umisťují se na stránky různé ikonky pro sdílení a doporučování konkrétních dokumentů. Sociální média jsou pak založena na vizuální stránce. Z toho důvodu chceme mít pod kontrolou i konkrétní obsah, který tímto způsobem bude sdílen. V praxi to pak vypadá tak, že chceme při sdílení na facebooku nebo twitteru sdílet konkrétní text a konkrétní doprovodný obrázek.

K tomu nám slouží meta tagy pro sociální média. Pro facebook Open Graph a pro Twitter jsou to kromě Open Graphu i Twitter card tags.

Twitter card
Facebook - meta info

Meta tagy pro Facebook

Pro facebook vznikl protokol „Open Graph“, který se nasazuje na stránky za pomoci meta tagu „og:“. Existuje mnoho vlastností těchto metadat, ale nadále se budeme zabývat jen těmi nejdůležitějšími, které nám přinesou dostatečný efekt.

Důležité vlastnosti OG

  • og:title

    Název objektu (v tomto případě je ideální použít optimalizovaný název dokumentu/stránky).

    Omezení: 70 znaků

  • og:type

    Typ objektu (například website pro stránku, article pro článek, ale také restaurant, school, city, food apod.)

  • og:image

    Cílový obrázek, který chcete zobrazit na facebooku při sdílení. Tato hodnota se hodí v případě, že máte na stránce více obrázků a hrozí, že by si facebbok při sdílení mohl vybrat jiný, než chcete.

    Omezení: minimálně 600×315 px (doporučeno 1200×630 px do 5 MB), doporučeno se držet poměru stran 1,91:1

  • og:url

    Statická respektive trvalá a hlavní adresa stránky. Může totiž nastat, že se někdo dostane na stránku, která není kanonická.

    Doporučení: Kanonická adresa bez dekorování a bez parametrů

  • og: description

    Tento tag nepatří mezi „vyžadované“, avšak myslím si, že z hlediska marketingu může být velmi zajímavý. Umožňuje stejně jako v případě meta description stránky, popsat několika větami, co se na stránce nachází.

    Omezení: 200 znaků

Pro facebook je tento výčet kompletní. Obsahuje jen důležitá meta data. Vyplněním těchto 4 kousků, až tak moc kód nenafouknete, ale jako odměnu dostanete sdílení pod kontrolu. V podstatě těmito čtyřmi metadaty říkáme:

  • Jaký je hlavní název stránky (titulek)

  • Jak s ním má facebook zacházet (resp. jak ho prezentovat)

  • Jaká je jeho hlavní URL adresa

  • Jaký je ten správný doprovodný obrázek

Méně důležitá meta data pro facebook

Můžete samozřejmě dodat i další informace a pro některé konkrétní druhy obsahu mohou mít význam, ale většinou je nevyužijete a v masovém měřítku nasazení tedy ztrácí smysl se jimi zabývat. Mezi ty „volitelné“ pak patří:

  • og: audio

    URL adresa zvukového souboru

  • og:determiner

    To má aspoň trošku význam pro anglicky psané stránky. Objeví se před nadpisem (například a, an, „“ nebo auto)

  • og:locale

    Národní prostředí ve formátu language_TERRITORY (tedy například cs_CZ pro Česko). Defaultně je klasicky angličtina v US.

  • og:locale:alternate

    Pokud existuje více národních prostředí na kterých je daná stránka k dispozici. Klasické Array pole.

  • og:site_name

    Jestliže je tato stránka součástí nečeho většího. Pak dává smysl propagovat jméno tohoto serveru (např. Youtube, IMDb a u nás třeba CSFD apod.)

  • og:video

    URL kde se nachází fyzicky video soubor. Je to stejná vlastnost jako u audio.

Pokud byste se chtěli touto problematikou zbývat ještě více a hledat další vlastnosti, které by mohly natáhnout váš kód, nebo chcete-li doplnit k objektům více informací včetně strukturovaných vlastností, pak doporučuji se podívat na stránku (en) The Open Graph protocol.

Implementace Open Graph

Open Graph se implementuje, stejně jako ostatní meta informace, do hlavičky dokumentu. Tedy mezi párové značky <head>. Jednoduchý příklad implementace:

Copy to Clipboard

Pokud si potřebujete ověřit nasazení jednotlivých stránek u facebooku, použijte debugger: Debugger – facebook for developers. Zde si nejen develepořei ověří nasazení Open Graphu na stránce, ale i konzultanti, jestli jsou posílaná data v pořádku.

Strýček google nám dává k dispozici nástroj na testování strukturovaných dat, kde si můžete ověřit správné nasazení i z tohoto pohledu.

Twitter Card Tag

Stejně jako u Open Graph pro facebook, existují tagy pro Twitter. Jsou si velmi podobné, ale Twitter má i své specialitky, které slouží k provázání s účtem. Co se týká omezení, tak ty má Twitter trošku jiné než facebook.

Pokud již máte a nebo budete nasazovat Open Graph, pak nemusíte řešit zdvojeně všechny meta informace i pro Twitter. Jedná se o:

  • og:url
  • og:title
  • og:description
  • og:image

Pokud je pro vás Twitter a optimalizace pro sdílení obsahu na něm důležitá, speciálně použijte aspoň tyto tři tagy:

  • twitter:card

    Typ karty, který je vyžadován (s hodnotami „summary“, „summary_large_image“. „app“ nebo „player“).

    Použití je pak:

    • Summary Card: Titulek, popis a náhled obrázku.
    • Summary Card with Large Image: Podobné jako u Summary, ale určeno pro velké obrázky.
    • App Card: Karta určena pro přímé stahování aplikace.
    • Player Card: Karta, která umožňuje přehrát video/audio.
  • twitter:site

    Uživatelské jméno (@user) pro stránku (zobrazí se v patičce karty). Není vyžadováno

  • twitter:creator

    Jméno autora obsahu (@uzivatel). Není vyžadováno.

Jak bylo řečeno na začátku dokmentu o Twitter kartách, jsou u OG trošku jiná omezení než u facebooku. Pro Twitter jsou následující:

  • Omezení pro Twitter og:title: 70 znaků

  • Omezení pro Twitter og:description: 200 znaků

  • Omezení pro Twitter og:image (vlastní obrázek): 280×150 px (max 1 MB)

Stejně jako u facebooku, tak i u Twitteru je možné si ověřit správnost i kvalitu nasazení meta informací na webu. To je možné ověřit na Card-validator | Twitter developer kde zadáte konkrétní URL vašeho webu a uvidíte jak bude vypadat sdílení.

Další vlastnosti pro Twitter karty, které nejsou nutné, ale spíše pro minoritu (nemají také ekvivalent v OG):

  • twitter:site – @uzivatelske_jmeno stránky

  • twitter:site:id – stejné jako „site“ jen se místo jména použije ID

  • twitter:image:alt – Alt obrázku (max. 420 znaků)

  • twitter:player – https url (iframe)

  • twitter:player:width – šíře iframe v pixelech

  • twitter:player:height – výška iframe v pixelech

  • twitter:player:stream – URL na „syrové“ video/audio

  • twitter:app:name:iphone – název iPhone aplikace

  • twitter:app:id:iphone – ID aplikace v iTunes

  • twitter:app:url:iphone – vlastní URL aplikace (včetně //)

  • twitter:app:name:ipad – název aplikace optimalizované pro iPad

  • twitter:app:id:ipad – ID aplikace v iTunes

  • twitter:app:url:ipad – vlastní URL aplikace

  • twitter:app:name:googleplay – název aplikace pro Android

  • twitter:app:id:googleplay – ID aplikace v Google Play Store

  • twitter:app:url:googleplay – vlastní URL aplikace

Implementace Twitter Cards

Implementace karet pro Twitter je podobná jako u ostatních meta tagů. Umisťuje se do hlavičky dokumentu mezi párový HTML.

Copy to Clipboard

Nezáleží na pořadí umístění jednotlivých meta informací. Tedy zda použijete první Open Graph a druhý Twitter card.

Další meta informace, které jsou důležité a nebo vhodné z hlediska optimalizace neleznete v článku Meta tagy.