Přejít k navigační liště

Zdroják » Webdesign » Open Graph a jeho nasazení

Open Graph a jeho nasazení

Články Webdesign

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!

Komentáře

Subscribe
Upozornit na
guest
23 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
veena

Zrovna dneska jsem si s tím hrál. Pěkně shrnuto.

ThebestofMiB

Pěkný den,
díky za upozornění na chybku na iDNES.cz, napravíme.

martinsousek

Open Graph je pěkný, ale tak nějak netuším (a se mnou mnoho dalších lidí), co je na něm to „open“. Což by se snad aspoň na rootu řešit mohlo!
Ve skutečnosti to je jen cesta k velkému bratru. Jediný subjekt dostává cenné informace a má nad nimi plnou kontrolu. Dokonce ani samotný web, který tohle zaimplementuje, nemá k těmto informacím lehký přístup.
Kdyby vznikl dnes web, tak by všechno leželo na clusteru jedné firmy a ta by rozhodovala o všem. Přijde vám to absurdní? Tak jim na ten „open graph“ neskočte a na své stránky to nedávejte!

Aleš Roubíček

Otevřený je v tom, že ta data právě nejsou v clusteru jedné firmy, ale každý poskytovatel obsahu je má u sebe. Zároveň se každý do grafu může a nemusí přidat, to už záleží na něm. BTW Zdroják není až zas tak moc Root ;)

pas

„Jediný subjekt“ to snad být nemusí – ty informace může využívat i kterýkoliv jiný velký nebo malý bratr, nebo ne?

Murdej

No když ten velký bratr „pošle“ třeba do hospody kterou tím propaguji víc lidí tak proč mu o tom „neříct“.
Beru to jako další možnost propagace.

Mikuláš Dítě

Zkoušel jsem Open Graph i při hezkého doctypu z html5 a všechny informace si facebook najde dobře. Téměř jistě budou fungovat i doctypy strict a dalších.

Aleš Roubíček

On ty data Facebook najde, protože jeho implementace parseru DOCTYPE neřeší. Dokument pak ale není formálně platný.

suk

po pridani og:type like button nefunguje, netusite niekto v com moze byt problem?

Aleš Roubíček

„Nefunguje“ je dost obecný popis chyby. Máte nějaký příklad?

suk

mal som vyplnene og:title, og:site_name, og:image, og:description
LB fungoval no po pridani og:type LB vyhlasi error ale nepise kod chyby ani nic podobne tak som bol trosku prekvapeny

suk

Niektory typ funguje iny nie. Nefunguje to cez iframe ale cez <fb:like></fb:li­ke> ano.

janhorna

No ono s tim open ci ne-open je to hodne dlouhou diskusi. Zcela urcite nelze oznacit Graph API za 100% otevrene. Hezka sbirka linku na toto tema je napr. v clanku R. Scoble na http://scobleizer.com/2010/04/22/facebook-ambition/, nema cenu to zde opakovat.
Jinak pokud nekoho zajimava vice vizualni navod (= vcetne screenshotu), jak implementovat „Like“, tak jsem psal nedavno http://www.hosting.cz/2010/04/libi-se-vam-tlacitko-like-od-facebooku-dejte-si-ho-na-stranky/.

Aleš Roubíček

Tento článek není o Graph API, to je jiná technologie než Open Graph. :)

janhorna

Diky za upozorneni, jsem uz trochu pre-Facebookovanej :) Pochopitelne jsem chtel napsat nebo jsem aspon mel na mysli Open Graph v souvislosti s implementaci tlacitka Like a souvisejicich metadat, o tom je take muj clanek, ktery odkazuji a ktery doplnuje minimalne screenshoty Vas text.

Aleš Roubíček

Můj článek popisuje protokol Open Graph, váš nasazení tlačítka Like (jednoho ze social plug-inů), kde se jeho funkčnost dá pomocí protokolu Open Graph značně obohatit. :) Díky za doplnění, ikdyž je to trochu k jinému tématu. :)

Michal Blaha

Alesi, gratuluji k dobremu clanku dik za pripomenuti chybejiciho type u OnTheRoad.To.
Prvni dva dny po spusteni v tom mel FB slusnej hokej a specialne u typu nebylo jasne, co nejlepe pouzit. Ted uz to jasne je.
Co se HTML5 tyka, Facebook dlabe na kontrolu doctype a jmenych prostoru, takze s HTML5 problem neni.

Aleš Roubíček

Díky. Já vím, typ article snad přibyl dokonce o týden později. Ale ten stejně dnes moc nemá vliv na zařazení, narozdíl třeba od filmů nebo hudby. :)
Moje poznámka k HTML5 vychází z dokumentu http://dev.w3.org/html5/rdfa/rdfa-module.html, je to problém hlavně s xmlns prefixem a neznámým atributem property. HTML5 navíc zavádí microdata, která toto mohou řešit, ale jiným způsobem.

Bauglir

Tak nepoužívejte HTML serializaci, ale XHTML serializaci (XHTML5)

Honza Sládek

Pěkný článek, dobře a jasně vystihuje jak implementace funguje. Díky za něj. Jen rel=„canonical“ není Mikroformát, ale vymyšlenost Google.
Ale stejně se mi implementace OGP moc nelíbí. Uvažoval jste někdo nad tím, zda dávat další data do hlavičky je dobrý nápad? Co já si pamatuji, tak naposledy se neviditelné věci pořádně zneužívaly (keywords, description). Osobně doufám, že se brzy přesuneme do doby, kdy si OGP bude tahat data přímo ze stránky, která budou označena pomocí RDFa. Mít volnost použít Microdata či Mikroformáty by bylo krásné, ale zatím asi bláhové.
Mimochodem asi nikdo nesledujete mailing list vývoje OGP, že byste věděli, proč je povinný obrázek? Znám Facebook a vím, jak jej použije, ale přeci jen mi přijde, že by se mohl obejít bez něj a nenutit jej autory generovat. Tedy udělat z něj volitelný atribut. Ale to jen tak uvažuji. ;)

Imrich

k tlačítku „páči sa mi to“ mali pridať aj tlačítko „je to na piču“ a palec dole takto je to FB hodnotenie moc neobjektívne.

pas

Však to také nemá sloužit jako hodnocení. Kdyby mělo, tak by udělali hvězdičky. To by jim pak ovšem strhalo servery. „Líbí se mi“ jim to tolik nestrhá (zvláště v Česku :)).

none_

Myslím si, že je to přesně takhle udělané schválně. Když by tam byl i palec dolů, tak by se mohly objevit články, které by měly hodně negativní hodnocení a to přece nikdo nechce.
Představte si např. zmíněný iDnes. Tam se 100% objevují i články, které by měly záporné hodnocení. Takhle na to ale klikne jen někdo, komu se to opravdu libí a o ty, kterým se to nelíbí, nikdo nestojí.:)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.