SMOKU.net

Mariusz Adam Górski

 
2010-05-26

Wprowadzenie do protokołu Open Graph
( The Open Graph Protocol )

Co to jest protokół Open Graph?

Facebook Platform logo Protokół Open Graph został przedstawiony przez Facebook 21 kwietnia 2010 roku. Ideę przedstawiono w następujący sposób:

"Dziś sieć istnieje głównie jako seria nieustrukturalizowanych linków między stronami. To jest potężny model, ale to naprawdę dopiero początek. Open Graph umieszcza ludzi w centrum sieci. Oznacza to, że sieć może stać się zestawem osobistych i semantycznie sensownych połączeń między ludźmi i przedmiotami."

Według strony internetowej opengraphprotocol.org :

"Protokół Open Graph pozwala dowolnej stronie internetowej stać się bogatym obiektem w społecznym grafie. Na przykład używa się go na stronie Facebook-a aby pozwolić każdej stronie internetowej mieć te same funkcjonalności co strona Facebook-a.

Podczas gdy istnieje wiele różnych technologii i schematów które mogą być łączone ze sobą, nie ma ani jednej technologii, która zapewnia wystarczająco dużo informacji aby bogato zaprezentować w społecznym grafie dowolną stronę internetową. Otóż protokół Open Graph opiera się na tych już istniejących technologiach ale daje programistom jedną rzecz do zaimplementowania. Prostota integracji jest kluczowym celem protokołu Open Graph."

Jednak od począdku...

Semantic Web logo Mimo, że Facebook nie mówi tego wprost, to cała idea wywodzi się z Semantic Web – projektu, który ma przyczynić się do utworzenia i rozpowszechnienia standardów opisywania treści w Internecie w sposób, który umożliwi maszynom i programom (np. tzw. agentom) przetwarzanie informacji w sposób odpowiedni do ich znaczenia. Wśród standardów Semantic Web znajdują się m.in. OWL, RDF, RDF Schema (inaczej RDFS).

Semantic Web jest wizją Tima Bernersa-Lee (twórcy standardu WWW i pierwszej przeglądarki internetowej, a także przewodniczącego W3C). W swoich założeniach Semantic Web ma korzystać z istniejącego protokołu komunikacyjnego, na którym bazuje dzisiejszy Internet. Różnica miałaby polegać na tym, że przesyłane dane mogłyby być 'rozumiane' także przez maszyny. Owo 'rozumienie' polegałoby na tym, że dane przekazywane byłyby w postaci, w której można by powiązać ich znaczenia między sobą a także w ramach odpowiedniego kontekstu.

Informacje przekazywane w ramach Semantic Web wymagałyby nie tylko samych danych, ale także informacji o tychże (tzw. meta-danych). To właśnie meta-dane zawierałyby sformułowania dotyczące relacji między danymi oraz prawa logiki, które można do nich zastosować. Dzięki temu można by:

  • powiązać różne dane znajdujące się w Internecie w ramach wspólnych jednostek znaczeniowych (np. strony dotyczące filmów, dziedzin nauki, kuchni francuskiej, etc.)
  • rozróżnić dane, które dla maszyn są w tej chwili nierozróżnialne ze względu na identyczny zapis tekstowy (np. zamek - urządzenie do zamykania drzwi; urządzenie do łączenia w ustalonym położeniu elementów ubrania; okazała budowla mieszkalno-obronna)
  • przeprowadzać na tychże danych wnioskowania , tzn. otrzymywać informacje na ich temat, które nie są zawarte explicite (np. na podstawie danej "Ewa jest żoną Adama", możemy też dowiedzieć się, że Ewa jest kobietą, Adam mężczyzną, Adam jest mężem Ewy, żaden inny mężczyzna nie jest mężem Ewy, etc.) [Żródło: Wikipedia]

Więc z czym się to je?

The Open Graph Protocol logo Wielu ludzi uważa, że głównym beneficjentem tej technologii bedzie sam Facebook i być może Facebook zbyt daleko idzie w twierdzeniach, że ich protokół (Open Graph) zrewolucjonizuje sieć. Nie zmienia to jednak faktu, że strony które chcą się promować za pomocą Facebook-a, aby robić to skutecznie muszą implementować ten protokół. Na szczęście nie jest to trudne.

Aby zmienić swoją stronę w obiekt społecznego grafu musisz dodać do swojej strony podstawowe metadane. W pierwotnej wersji protokołu używa się RDF, co oznacza, że musisz umieścić dodatkowe <meta> tagi w sekcji <head> twojej strony. Każda strona musi posiadać cztery wymagane właściwości:

  • og:title - Tytuł pod którym obiekt powinien pojawić się w grafie, np., "Wprowadzenie do protokołu Open Graph".
  • og:type - Typ twojego obiektu, np., "article". W zależności od typu jaki określisz inne właściwości mogą również być wymagane.
  • og:image - URL obrazka który powinien reprezentować twój obiekt w grafie.
  • og:url - Kanoniczny URL twojego obiektu który będzie używany jako jego permanentny identyfikator w grafie, np., "http://smoku.net/artykuly/wprowadzenie-do-protokolu-open-graph-the-open-graph-protocol".

Jako przykład, kod protokołu Open Graph dla strony którą właśnie oglądasz: 

<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<title>Wprowadzenie do protokołu Open Graph ( The Open Graph Protocol )</title>
<meta property="og:title" content="Wprowadzenie do protokołu Open Graph" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://smoku.net/artykuly/wprowadzenie-do-protokolu-open-graph-the-open-graph-protocol" />
<meta property="og:image" content="http://smoku.net/smokunet_res/open_graph_protocol_logo.png" />
...
</head>
...
</html>

Poniższe właściwości są opcjonalne dla każdego obiektu społecznego grafu, ale jednocześnie są polecane:

  • og:description - Dwa lub trzy zdania opisu twojego obiektu.
  • og:site_name - Jeśli twój obiekt jest częścią większej strony internetowej to powinieneś podać nazwę która będzie wyświetlana dla całej tej strony. np., "smoku.net".

Na przykład: 

<meta property="og:type" content="article" />
<meta property="og:description" content="Dziś sieć istnieje głównie jako seria nieustrukturalizowanych linków między stronami. To jest potężny model, ale to naprawdę dopiero początek. Open Graph umieszcza ludzi w centrum sieci. Oznacza to, że sieć może stać się zestawem osobistych i semantycznie sensownych połączeń między ludźmi i przedmiotami." />
<meta property="og:site_name" content="smoku.net" />

Określanie lokalizacji (położenia)

Protokół Open Graph wspiera możliwość określenia lokalizacji dla twojego obiektu. Jest to przydatne jeżeli twój obiekt ma związek z twoją firmą lub z czymś innym istniejącym w świecie realnym. Możesz określić położenie poprzez długość i szerokość geograficzną, przez pełny adres albo za pomocą obydwu tych rzeczy.
Aby określić długość i szerokość geograficzną użyj następujących właściwości:

  • og:latitude - np., "37.416343".
  • og:longitude - np., "-122.153013".

Jeśli chcesz określić adres czytelny dla człowieka powinieneś umieścić pięć następujących właściwości:

  • og:street-address - np., "1601 S California Ave"
  • og:locality - np, "Palo Alto"
  • og:region - np., "CA"
  • og:postal-code np., "94304"
  • og:country-name - np., "USA"

Na przykład: 

<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
...
<meta property="og:latitude" content="37.416343" />
<meta property="og:longitude" content="-122.153013" />
<meta property="og:street-address" content="1601 S California Ave" />
<meta property="og:locality" content="Palo Alto" />
<meta property="og:region" content="CA" />
<meta property="og:postal-code" content="94304" />
<meta property="og:country-name" content="USA" />
...
</head>

Określanie informacji kontaktowych

Protokół Open Graph wspiera możliwość określenia informacji kontaktowych dla twojego obiektu. Prawdopodobnie przyszłe wersje protokołu będą wspierały wyciąganie tych informacji z treści strony. Możesz określić informacje kontaktowe wstawiając przynajmniej jedną z poniższych właściwości:

  • og:email - np., "me@example.com".
  • og:phone_number - np., "+1-650-123-4567".
  • og:fax_number - np., "+1-415-123-4567".

Na przykład: 

<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
...
<meta property="og:email" content="me@example.com" />
<meta property="og:phone_number" content="650-123-4567" />
<meta property="og:fax_number" content="+1-415-123-4567" />
...
</head>

Typy obiektów

Aby twój obiekt był reprezentowany w grafie musisz określić jego typ. Robi się to za pomocą właściwości og:type: 

<meta property="og:type" content="product" />

Podstawowy schemat zawiera następujące typy. Możliwe, że poszczególne sieci społecznościowe zdecydują się wspierać jedynie pewną grupę tych typów albo stworzą własne dodatkowe typy bazujące na ich niszach.

  • Aktywności: activity, sport
  • Biznes (firmy): bar, company, cafe, hotel, restaurant
  • Grupy: cause, sports_league, sports_team
  • Organizacje: band, government, non_profit, school, university
  • Ludzie: actor, athlete, author, director, musician, politician, public_figure
  • Miejsca: city, country, landmark, state_province
  • Produkty i rozrywka: album, book, drink, food, game, movie, product, song, tv_show

Produkty posiadające kod/numer UPC lub numer ISBN możesz dodatkowo określić uzywając właściwości og:upc lub og:isbn. Z kolei poniższe właściwości (typy) mogą pomóc stworzyć bardziej konkretne powiązania pomiędzy grafami:

  • Strony internetowe: article, blog, website

Poprawność wprowadzenia metadanych można sprawdzić za pomocą parserów:

Po więcej informacji odsyłam na stronę domową projektu: opengraphprotocol.org