Open Graph a jeho nasazení
Open Graph je protokol, který umožňuje z obyčejných stránek udělat bohaté objekty v sociálním grafu. Open Graph obohacuje stránku o meta informace, které vyjadřují její postavení v sociálním grafu. Jde tedy o další krok k bájnému sémantickému webu.
Sémantický web
Sémantický web je takový strašák, o jehož implementaci se snaží chytří pánové již spoustu let. Sic, marně. Dnes tu máme RDF, mikroformáty a RDFa. O všech jste se již na Zdrojáku mohli dočíst.
Je Open Graph něco nového? Není. Open Graph staví na infrastruktuře vytvořené v rámci RDFa a inspiruje se gramatikou některých mikroformátů. Zatímco pomocí RDFa vyznačujeme sémanticky bohatá data v obsahu stránky, Open Graph se drží zkrátka a pouze obohacuje stránku o meta informace, které vyjadřují její postavení v sociálním grafu.
Open Graph je protokol vytvořený Facebookem na jeho cestě k opanování internetového světa. Jim totiž nestačí, aby každý měl svůj profil, aby každá firma, každé místo, akce a jiná blbost měla svou FB stránku. Oni chtějí, aby do jejich světa patřily i stránky cizí. Díky Open Graph protokolu můžeme mít rádi nejen lidi a jejich fotečky a statusy, ale i stránky, které vyjadřují věci, jež mají lidi rádi ve světě reálném. Ať už jsou to restaurace, filmy, sporty, nebo i věci zcela imaginární, jako jsou blogísky.
Jak to vypadá v praxi
Mám-li např. nějakou stránku o restauraci, můžu z ní udělat uzel grafu. Ona jím vlastně už dávno je, jen se neví, že je to restaurace, jaký je její název, kde leží apod. Tím, že na stránku vložím tlačítko „Tohle se mi líbí“, se dostane do sociální sítě Facebooku. Funguje to tak, že na profilu člověka, který tlačítko stiskne, se objeví odkaz na danou stránku. Odkaz směřuje na stránku, kde bylo stisknuto tlačítko, a jeho textem je titulek této stránky. Hmm, funkční, ale trošku nepěkné. Ale stačí stránku trošku obohatit o pár tagů a hned to vypadá o něco líp.
Implementace
Prvním krokem bude změna DOCTYPE dokumentu. RDFa je nástavbou nad XHTML, proto změníme DOCTYPE takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> Dále zaregistrujeme jmenný prostor Open Graph protokolu:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"> Tím si zajistíme, že stránka projde validací a splníme formální podmínky pro užití Open Graph protokolu. Pokud se ptáte, jak toto udělat v HTML, potažmo v připravovaném HTML5, neznám zatím odpověď. HTML5 bude umožňovat zalinkovat RDFa profil pomocí elementu link
rel="profile" , ale další detaily zůstávají zahaleny rouškou tajemství. Zpátky k současné implementaci.
Stránku máme připravenou pro bezproblémové vkládání meta informací protokolu Open Graph. Teď už jen zbývá je tam vložit.
Základní údaje
Mezi základní údaje objektu sociálního grafu patří název, typ, URL a obrázek. Název a URL stránky jsou tak nějak dány její podstatou, ale ne vždy je obsah elementu title použitelný a ne vždy je aktuální URL v browseru ta správná. Proto stránku obohatíme o základní meta informace:
<meta property="og:title" content="The Pub – Praha 1" />
<meta property="og:type" content="bar" />
<meta property="og:url" content="http://www.trop.cz/mista/13/the-pub-praha-1-praha-1-stare-mesto" />
<meta property="og:image" content="http://www.trop.cz/images/200x200/venue/185/the-pub-praha-1/959.jpg" /> Ze stránky se nám rázem stal bar se jménem The Pub – Praha 1 a obrázkem. Proč Open Graph nevyužívá mikroformátu rel="canonical" pro detekci správné URL stránky, zůstává otázkou a data musíme pěkně duplikovat…
Rozšířené údaje
Základní údaje nám jasně definují uzel grafu, ale ten můžeme dále obohacovat o další údaje. Mezi obecně doporučované informace patří ještě popis stránky a název web site.
<meta property="og:site_name" content="Trop" />
<meta property="og:description" content="Pilsner Unique Bar na Praze 1" /> Nyní už víme, že stránka baru pochází z Tropu, a máme i popis, což umožňuje Facebooku ukazovat již celkem informačně bohaté příspěvky. Ale můžeme jít ještě dál. V Tropu má každé místo své geo souřadnice a Open Graph protokol pro ně má své místo.
<meta property="og:latitude" content="50.0878662"/>
<meta property="og:longitude" content="14.4160943"/> Samozřejmě, když už máme geo souřadnice, máme i adresu:
<meta property="og:street-address" content="Veleslavínova 3" />
<meta property="og:locality" content="Praha 1 – Satré Město" />
<meta property="og:postal-code" content="110 00" />
<meta property="og:country-name" content="Česká republika" /> Nechybí možnost přidávat další atributy jako je telefon, fax nebo e-mail, ale pro představu to jistě stačí. Cpát všechny tyhle informace do hlavičky mi totiž přijde zcela zbytečné, protože stejná data jsou již ve stránce obsažena a jsou označena patřičným mikroformátem (platí pro detail místa na Tropu). Je dost možné, že v dalších verzích bude Open Graph umět extrahovat data i z těla stránky, ale bojím se, že to bude opět za pomoci RDFa.
Typy objektů
Teď už umíme uzel grafu pěkně popsat, jaké typy objektů umíme popsat? Měly by to být takové věci, které mají lidé rádi nebo je můžou doporučit. Seznam je poměrně dlouhý, ale pár zajímavých si tu můžeme uvést. Jsou to tedy již zmíněné bary ( bar) a restaurace ( restaurant), dále pak školy ( school), města ( city), země ( country), ale i herci ( actor), skupiny ( band), knihy ( book), filmy ( movie), jídlo ( food) a pití ( drink) a v neposlední řadě i sport ( sport). Samozřejmě stránka může být i stránkou ( website), článkem ( article) nebo blogískem ( blog). Kompletní výčet najdete ve specifikaci Open Graph protokolu.
K čemu to je dobré?
Celé to je omáčka k sociálním plug-inům, především k tlačítku líbí se mi. Chodíte po webu a na stránkách dáváte palec nahoru věcem, co se vám líbí. Facebook díky meta informacím ví, co za objekt zájmu to bylo, a může tak rozšiřovat váš profil. Dělá to tak, že rozšiřuje kolekci vašich oblíbených stránek, které navíc přiřazuje do kategorií. Kategorie se kryjí s výše zmíněnými typy objektů. Vaši přátelé pak na vašem profilu vidí, jaké máte rádi filmy, jakou posloucháte hudbu, kam chodíte do hospody, co vám chutná a jakým způsobem rádi týráte své tělo.
Kdo to používá?
Od uvedení Open Graph protokolu uběhly tři týdny a již dnes jej implementovalo přes 100 000 webů. My jsme na Tropu nejprve přidali tlačítko líbí se mi k jednotlivým místům. Nasazení bylo otázkou několika minut a byli jsme mezi prvními. V druhé iteraci jsme přidali meta informace a změnili tlačítko líbí se mi na doporučuji. Ve třetí jsme přidali další sociální plug-iny jako Like Box a Recommendations. Ovšem nejsme jediní.
Díky Open Graphu si můžete při procházení filmů na IMDB klikat na filmy, které se vám líbí, a budou se vám přidávat do profilu. Bohužel česká alternativa ČSFD neimplementuje atribut type, a tak není známa informace, že jejich stránky obsahují filmy (doporučuji doplnit). Na iDnesu sice můžete doporučovat zprávy, ale opět je tu chyba v atributu type, kde je u článků hodnota website, která se hodí spíše na homepage, a v článcích by měl být typ article. Dále pak třeba služba OnTheRoad.to umožňuje oblíbit si cestovní zápisky (opět chybí type article).
Nejrychleji tuto funkci tedy implementovaly osobní blogy a obsahová media, méně již katalogy objektů zájmů, u kterých by tato funkcionalita měla být zajímavější pro obohacování sociálního grafu.
Open Graph nepřináší jen výhody pro samotný Facebook, který tak dokáže rozšířit své znalosti o svých uživatelích, ale je to i zajímavá cesta k propagaci vašich stránek na Facebooku.
Tak šup, implementujte!
Kurzy UX (user experience) - Praha, Brno, Bratislava
- Použitelný web mají návštěvníci rádi a lépe vrací investované peníze.
- Poradíme vám, které metody využít a co vám to přinese.
- Naučíte se, jak rychle a levně otestovat web.
- Pro účastníky školení možnost zdarma vyzkoušet nástroje na zlepšování a testování webu (např. Usabilla, Loop11, OpenHallway a další)
Podívejte se na detaily školení Nástroje a metody UX, workshopu uživatelského testování použitelnosti a workshopu Návrh webu a mobilních aplikací.
Akce: Využijte last minute slevu na školení v Brně a Bratislavě!
Přehled názorů
Tento text je již více než dva měsíce starý. Chcete-li na něj reagovat v diskusi, pravděpodobně vám již nikdo neodpoví. Pro řešení aktuálních problémů doporučujeme využít naše diskusní fórum.
