Určitě jste si všimli, že při sdílení některých odkazů na sociálních sítích se kromě odkazu zobrazí abstrakt s nadpisem, popisem stránky/článku a obrázkem. Příspěvek tak zabere více místa + může upoutat obrázkem = zvyšuje se šance prokliku.

Ukázka abstraktu stránky při sdílení odkazu na Facebooku

Aby se takový abstrakt stránky (třeba článku) zobrazil, musí ve zdrojovém HTML kódu stránky být metadata (tzn. Open Graph metadata), z nichž se může abstrakt vygenerovat.

Co musí být v HTML kódu stránky?

Ve zdrojovém kódu by tedy mělo být typicky:

<meta property="og:title" content="Velmi poutavý nadpis"/>
<meta property="og:image" content="https://mujsuperweb.cz/img/poutavy-clanek.jpg"/>
<meta property="og:site_name" content="Název mého webu"/>
<meta property="og:description" content="Detailnější popis, co se v článku dozvím"/>

Tyto informace pak převezme většina sociálních sítí při sdílení odkazu v příspěvku. Funguje to například na Facebooku, LinkedIn, Google+ a dalších.

Jak přesně to funguje a jak si nanečisto vyzkoušet, jaká data si Facebook umí z odkazu přečíst, blíže popisuji v krátkém videu níže.

Problém je trošku s Twitterem, který si neumí přečíst rozšířené informace ze standardních OG tagů (ukázka kódu výše), ale vyžaduje vlastní meta tagy.

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Velmi poutavý nadpis" />
<meta name="twitter:description" content="Detailnější popis, co se v článku dozvím." />
<meta name="twitter:image" content="https://mujsuperweb.cz/img/poutavy-clanek.jpg" />   

Jak otestovat?

Zda Facebook a Twitter umí přečíst metadata ze stránky otestujete pomocí těchto nástrojů:

Co když tam ta metadata nemám?

Abyste mohli nastavit nastavit Open Graph metadata, musí to podporovat redakční systém vašeho webu. Pokud používáte open-source CMS (redakční systém), pravděpodobně bude existovat plugin (rozšíření), který umožní nastavení Open Graph metadat.

Pro WordPress lze například použít SEO Ultimate či Yoast SEO.

WordPress SEO Ultimate plugin – Nastavení metadat pro sociální sítě

Chci vědět víc…

Nenech si to pro sebe...

Pokud tě článek zaujal, sdílej ho s ostatními. Díky!

Tento web využívá cookies pro zajištění funkčnosti webu a získání statistik návštěvnosti webu. Více informací

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close