Náhled webu na sociálních sítích

Open Graph protocol je část kódu, kterou můžete vložit do HTML vašeho webu. Díky open Graph protokolu můžete získat kontrolu nad tím, jak se odkazy na váš web budou zobrazovat na sociálních sítích. Můžete tak upoutat pozornost a lépe zacílit na své současné i potenciální zákazníky a vytvořit přitažlivý odkaz, na který budou lidi klikat.

Proč používat Open Graph

Především tak zvýšíte své šance, že uživatelé na odkaz kliknou a navštíví váš web a to proto, že jim pomůžete pochopit, co je na zveřejněním odkazu čeká. Můžete tak přímo ovlivnit CTR (Click Through Rate) vašich odkazů. Díky správně nastavenému protokolu budete mít také jistotu, že se vždy zobrazí správný obrázek i popis. Facebook sice umí automaticky najít na webu obrázky a ty vložit do příspěvku, ale ne vždy se na to můžete spolehnout a ne vždy sdílíte odkazy jen na facebooku. 

A než sdílet odkaz bez náhledu, nebo s obrázkem, který o vašem webu nic nevypovídá, to raději nesdílejte odkaz vůbec. Odkazu bez náhledu si totiž buď nikdo nevšimne a pokud ano, tak mu nebude důvěřovat.

Pomocí Open Graph můžete nastavit:

  • Jaký obrázek se má při sdílení na sociálních sítích zobrazit
  • Jaký nadpis má být u odkazu uveden
  • Text který bude uvedený pod nadpisem
  • Jaký je typ obsahu, který sdílíte (webová stránka, článek)
Blog-image-open-graph

Jak správně nastavit Open Graph

OG obrázek

Máte-li přístup na FTP webového serveru, bude to celkem snadné. Nejprve vytvořte náhledový obrázek. Velikosti mohou být různé, ale nejvhodnější bude vytvořit obrázek o rozměru 1200×630 px. Do obrázku můžete vložit například výzvu k akci (CTA). Snažte se aby obrázek korespondoval s grafikou vašeho webu.

HTML kód

Základní OG údaje jsou tyto:

og:title

Slouží pro vytvoření nadpisu vašeho odkazu. Snažte se vytvořit poutavý nadpis, který uživatele zaujme.

og:image

Váš obrázek uložte na FTP vašeho webu a do parametru og:image uveďte celou cestu k vašemu obrázku, včetně protokolu https nebo http.

og:site_name

Zde uveďte název vašeho webu. Je to užitečné především při sdílení podstránek, nebo článků.

og:description

Stručný popisvaší stránky nebo článku. Text bude uvedený pod nadpisem a pomůže lidem pochopit, co na uvedeném odkazu naleznou. Váš text by neměl mít více než 300 znaků.

og:url

Je dobré uvádět i url adresu stránky a to z toho důvodu, že do url se může při kopírování dostat i nechtěný kód v podobě různých parametrů.

Základní Open Graph kód může vypadat takhle:

<meta property="og:title" content="Nadpis vašeho odkazu"/>
<meta property="og:image" content="https://vasestranka.cz/cesta-k-vasemu-obrazku.jpg"/>
<meta property="og:site_name" content="Název vašeho webu"/>
<meta property="og:description" content="Stručně popište, na co je zaměřen váš web, nebo o čem pojednává váš článek"/>
<meta property="og:url" content="https://vasestranka.cz/podstranka">

Tagy které můžete volitelně doplnit:

og:audio

Url cesta k audio souboru na vašem webu.

og:video

Cesta k videosouboru na vašem webu.

og:locale

Výchozí jazyk vašeho webu. Ve vetčině případů to bude v česku “cs_CZ”.

og:locale:alternate

Alternativní jazyk, pokud máte na webu připravený překlad.

Jak nastavit Open Graph ve WordPress

Předpokládám, že většina z vás nepracuje s HTML, nebo ani nemáte vytvořený přístup na FTP vašeho webu. Nezoufejte, protože přesně pro vás tu existuje řešení v podobě pluginů do WordPress. Open Graph si tak můžete jednoduše nastavit v administraci vašeho webu.

WordPress pluginy:

Open Graph and Twitter Card Tags

Tohle je jeden z lepších pluginů pro nastavení Open Graph na vašem webu. Plugin se o základní nastavení postará sám a vy si můžete jednotlivé možnosti upravit. Výhodou je, že nastavuje celé spektrum tagů a máte tak jistotu, že by se na nějaký parametr zapomnělo.

Malou nevýhodou pak je, že většinu údajů, nejste schopni editovat. Plugin totiž automaticky čerpá informace z nastavení wordpress vašeho webu a nemůžete tak například změnit název webu apod.

Plugin si můžete stáhnout zde.

plugin-1
plugin-2

WP Open Graph

Tento plugin vás nechá nastavit základní atributy Open Graph, které vyplníte pomocí jednoduchého formuláře. Nic víc od pluginu ale nečekejte. Pro základní nastavení náhledu jednoduchého webu vám tento plugin jistě postačí. Výhodou pak je, že jednotlivé položky si můžete nastavit podle sebe, a nemusíte se spoléhat na to, co máte nastaveno ve WordPress.

Plugin si můžete stáhnout zde.

OG

Velmi jednoduchý plugin s velice jednoduchým jménem. Tento plugin není třeba nijak nastavovat. Sám doplní potřebný kód do hlaviček jednotlivých stránek a příspěvků. Informace čerpá přímo z obsahu stránky a vy se tak nemusíte o nic starat.
Osobně mám tento plugin nainstalovaný na mém webu. Automaticky mi vytváří náhledy pro příspěvky na mém blogu. Funguje velmi dobře a šetří mi práci.
Osobně mám tento plugin nainstalovaný na mém webu. Automaticky mi vytváří náhledy pro příspěvky na mém blogu. Funguje velmi dobře a šetří mi práci.

Plugin si můžete stáhnout zde.

plugin-3

Jak otestovat Open Graph

Facebook má na testování Open Graph vytvořený debuger, který najdete tady. Stačí zadat url adresu stránky, kterou chcete otestovat a kliknout na tlačítko “Debug”. Následně se vám ukáže náhled odkazu přesně v té podobě, v jaké ho uvidí uživatelé na Facebooku. Uvidíte také všechny informace jako je titulek, popis a url webu. Debuger vás také upozorní, pokud OG není něco v pořádku.

Díky tomuto nástroji můžete váš náhled odladit a vyzkoušet. Doporučuju tedy před každým sdílením odkazu ověřit jeho zobrazení. Můžete tak odhalit problémy s náhledem, dříve než zveřejníte váš příspěvek na sociálních sítích.

debuger

Hurá do toho!

Pokud to myslíte s vaším webem vážně a přejete si, aby se zvýšil počet návštěv vašeho webu ze sociálních sítí, určitě zapracujte na Open Graph protokolu a nastavte správně vše potřebné.

Jestli si nejste nastavením jistí, nebo byste si přáli mít v náhledu pěkný obrázek, tak se mi ozvěte a určitě spolu něco funkčního vymyslíme.

Více článků najdete zde. Můžete si také prohlédnout mou práci v portfoliu…

Přihlaste se k newsletteru

Pokud vás článek zaujal, nenechte si ujít další a přihlaste se k odběru novinek. Pravidelně tak budete dostávat užitečné rady přímo do vaší schránky.

Přihlásit k newsletteru

Komentáře

Zkopírovat obsah