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.
Nálepky:
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 , ale další detaily zůstávají zahaleny rouškou tajemství. Zpátky k současné implementaci.
rel="profile"
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!
Aleš Roubíček
Extrémní programátor webových aplikací v TopMonks. Host a facilitátor českých Code Retreatů.
Zrovna dneska jsem si s tím hrál. Pěkně shrnuto.
Pěkný den,
díky za upozornění na chybku na iDNES.cz, napravíme.
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!
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 ;)
„Jediný subjekt“ to snad být nemusí – ty informace může využívat i kterýkoliv jiný velký nebo malý bratr, nebo ne?
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.
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.
On ty data Facebook najde, protože jeho implementace parseru DOCTYPE neřeší. Dokument pak ale není formálně platný.
po pridani og:type like button nefunguje, netusite niekto v com moze byt problem?
„Nefunguje“ je dost obecný popis chyby. Máte nějaký příklad?
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
Niektory typ funguje iny nie. Nefunguje to cez iframe ale cez <fb:like></fb:like> ano.
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/.
Tento článek není o Graph API, to je jiná technologie než Open Graph. :)
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.
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. :)
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.
Díky. Já vím, typ
articlesnad 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
xmlnsprefixem a neznámým atributemproperty. HTML5 navíc zavádí microdata, která toto mohou řešit, ale jiným způsobem.Tak nepoužívejte HTML serializaci, ale XHTML serializaci (XHTML5)
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. ;)
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.
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 :)).
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í.:)