sobota 30. května 2015

Facebook Open Graph nastavení a použití

Získejte kontrolu nad zobrazením sdílených stránek na Facebooku

Open graph protokol patří mezi meta tagy a je potřeba jej vložit na stránce mezi <head></head> tagy, aby dobře fungoval.


V tomto článku nebudu vysvětlovat každou specifikaci Open Graphu, ale ukážu na příkladu tak, aby jste mohli tento postup okopírovat a s minimální náročností úspěšně aplikovali pro sebe. Kdo se bude chtít o Open Graph zajímat více, na konci článku uvádím zdroje na další dokumentace.

Definováním jednotlivých polí můžeme krásně ovlivnit způsob zobrazení webu (pokud jej někdo bude sdíle na své timeline Facebooku). Můžeme tedy zajistit, aby sdílený link našeho webu byl na Facebooku zobrazen se specifickým obrázkem, nebo popiskem a dalšími prvky, jak si přijeme.

Získáme tak naprostou kontrolu nad způsobem zobrazení našeho webu v příspěvku, když jej bude někdo sdílet na Facebooku.

Jak vypadá OG zápis ve zdrojovém kódu


<meta property="og:title" content="SEO test, který změří sílu tvého SEO zdarma! | Síla SEO" />
<meta property="og:description" content="Síla SEO je aplikace pro test SEO na webu. Zjistíte základní parametry a chyby, které na webu můžete opravit." />
<meta property="og:site_name" content="Síla SEO" />
<meta property="og:image" content="http://www.silaseo.cz/img/seo-test-webu.png" />

og:title

Slouží k přepisu hlavního nadpisu příspěvku na Facebooku.

og:description

Slouží k přepisu popisu příspěvku na Facebooku.

og:image

Slouží k vložení vlastního obrázku, který Facebook při sdílení odsud vyloví.

Výsledný vzhled na Facebooku

Pokud se nezobrazí nové údaje z OG protokolu na Facebooku hned, můžete vyzkoušet jejich debugovací TEST: https://developers.facebook.com/tools/debug/og/object/


Můžete se pokusit obnovit nové nastavení pomocí "Fetch new scrape information" a následně zobrazit jak vypadá aktuální stav "Show existing scrape information".

Proč OG protokol? Protože chceme zvýšit míru prokliku: Takto hezky může vypadat i Vás web při sdílení na Facebooku. Integrujte svůj OG protokol na web a při správném použití můžete docílit vyšší míry proklikovosti.

Zdroje:
http://ogp.me
https://developers.facebook.com/docs/sharing/best-practices

Video o Open Graph




Žádné komentáře:

Okomentovat