OpenGraph - proniknutí na sociální sítě

Jedny data pro všechny

Facebook vyvinul OpenGraph v roce 2010. Díky otevřenosti tohoto protokolu jej implementovaly na většině sociálních sítích jako jsou Facebook samozřejmě, Twitter, Google Plus a LinkedIn. Twitter používá také své vlastní TwitterCard, pokud je nenalezne, používá data z OpenGraph.

To je pro nás velké zjednodušení, protože nám stačí data připravit jednou, ať uživatel sdílí stránku kdekoli.

Implementace OpenGraph

OpenGraph toho umí opravdu hodně, my si nyní ukážeme základní použití. Data se zapisují jako meta tagy do hlavičky stránky. Základní tagy, které bychom neměli opomenout jsou následující.

<meta property="og:title" content="Titulek">
<meta property="og:description" content="Popisek">
<meta property="og:image" content="http://mujweb.cz/obrazek.jpg">
<!-- K obrázku můžete přiloži doplňující informace -->
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="800">

Raději víc, než míň a u obrázku dvojnásob

Podle best practies bychom měli uvést ještě OG tagy url,  type a mnoho dalšího. Třeba localization slouží k automatickému překladu. Osobně vyplňuji pouze url a type. 

Důležitější podle mě je správná velikost obrázku. Pokud chceme, aby náhled byl velký, musí mít obrázek alespoň 600x315px. Doporučeno je však 1200x630 kvůli displejům s velkým rozlišením.

Pokud bude obrázek menší, zobrazí se pouze jeho miniatura nalevo od popisku a titulku. Pozor na změny, v roce 2012 stačil pro velký náhled obrázek o rozměrech 400x209.

Když jeden obrázek nestačí

Meta tagů s obrázky za sebe můžeme vložit hned několik. Poté Facebook umožní při sdílení vybrat, který chceme k příspěvku připojit.

og:type

Tento tag je jeden z mnoha, ale dokáže pěkná kouzla. Zmíněný ČSFD má tento tag nastaven na video:movie, což vám na Facebooku umožní ukládat si filmy do historie.

<meta property="og:type" content="video.movie">

Možností je opravdu hodně, a kompletní seznam naleznete na stránce ogp.me. Tato stránka je věnována plně tomuto protokolu. Některé mi ale Facebook označil jako nepodporované.

Pozor na meta author

Všimli jste si na obrázku, kde je znázorněn velký náhled autora? S kolegou jsme tak tvořili web, a když jsem začal testovat sdílení na sociálních sítích, nestačil jsem se divit. Facebook totiž rád vypíše autora, který je v metatagu:

<meta name="author" content="Toto bude taky na FB" />

Možná kdybych vyplnit OG tag author, tento by se nepoužil. Případně jej z hlavičky můžeme vypustit úplně.

Debugging zadaných dat

Je dobré otestovat, jestli vše funguje. Facebook pro nás připravil testovací nástroj, který vám i ukáže náhled příspěvku. Přiložené obrázky si také cachuje, takže někdy je nutné v debuggeru vynutit znovunačtení.

Debugger tu nebudu popisovat, je to intuitivní a naleznete jej na adrese developers.facebook.com/tools/debug/

---

Obrázek použitý v úvodu stáhnutý z  Freepik