Uvod

Open Graph protokol omogućuje bilo kojoj web stranici da postane bogati objekt u društvenom grafu. Na primjer, ovo se koristi na Facebooku kako bi se omogućilo bilo kojoj web stranici da ima istu funkcionalnost kao i bilo koji drugi objekt na Facebooku.

Iako postoji mnogo različitih tehnologija i shema koje se mogu kombinirati, ne postoji niti jedna tehnologija koja pruža dovoljno informacija za bogato predstavljanje bilo koje web stranice unutar društvenog grafa. Open Graph protokol temelji se na tim postojećim tehnologijama i daje programerima jednu stvar za implementaciju. Jednostavnost za programere ključni je cilj Open Graph protokola koji je utjecao na mnoge odluke o tehničkom dizajnu .

Osnovni metapodaci

Da biste svoje web stranice pretvorili u grafovske objekte, morate dodati osnovne metapodatke svojoj stranici. Početnu verziju protokola temeljili smo na RDFa , što znači da ćete postaviti dodatne <meta>oznake u <head>svoju web stranicu. Četiri potrebna svojstva za svaku stranicu su:

  • og:title- Naziv vašeg objekta kako bi se trebao pojaviti unutar grafa, npr. "Stijena".
  • og:type- Vrsta vašeg objekta, npr. "video.movie". Ovisno o vrsti koju navedete, mogu biti potrebna i druga svojstva.
  • og:image- URL slike koja bi trebala predstavljati vaš objekt unutar grafa.
  • og:url- Kanonski URL vašeg objekta koji će se koristiti kao njegov trajni ID u grafu, npr. "https://www.imdb.com/title/tt0117500/".

Kao primjer, slijedi oznaka protokola Open Graph za The Rock na IMDB-u :

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Neobavezni metapodaci

Sljedeća svojstva su opcionalna za bilo koji objekt i općenito se preporučuju:

  • og:audio- URL audio datoteke koja prati ovaj objekt.
  • og:description- Opis vašeg objekta u jednoj do dvije rečenice.
  • og:determiner- Riječ koja se pojavljuje prije naslova ovog objekta u rečenici. Nabrajanje od (a, an, the, "", auto). Ako autoje odabrano , korisnik vaših podataka trebao bi birati između "a" ili "an". Zadano je "" (prazno).
  • og:locale- Lokalizacija u kojoj su ove oznake označene. Formata language_TERRITORY. Zadano je en_US.
  • og:locale:alternate- Ova stranica je dostupna na nizu drugih lokacija.
  • og:site_name- Ako je vaš objekt dio veće web stranice, naziv koji bi se trebao prikazivati ​​za cijelu stranicu. npr. "IMDb".
  • og:video- URL do video datoteke koja nadopunjuje ovaj objekt.

Na primjer (prijelom retka isključivo u svrhu prikaza):

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

RDF shema (u Turtleu ) može se pronaći na ogp.me/ns .

Strukturirana svojstva

Neka svojstva mogu imati dodatne metapodatke pridružene njima. Oni se određuju na isti način kao i drugi metapodaci s propertyi content, ali propertyće imati dodatne :.

Nekretnina og:imageima neka opcionalna strukturirana svojstva:

  • og:image:url- Identično kao og:image.
  • og:image:secure_url- Alternativni URL koji će se koristiti ako web stranica zahtijeva HTTPS.
  • og:image:type- MIME tip za ovu sliku.
  • og:image:width- Broj piksela širine.
  • og:image:height- Visok broj piksela.
  • og:image:alt- Opis onoga što je na slici (ne natpis). Ako stranica navodi og:image, treba navesti og:image:alt.

Primjer cijele slike:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

Oznaka og:videoima identične oznake kao og:image. Evo primjera:

<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

Oznaka og:audioima dostupna samo prva 3 svojstva (budući da veličina nema smisla za zvuk):

<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Nizovi

Ako oznaka može imati više vrijednosti, jednostavno stavite više verzija iste <meta>oznake na svoju stranicu. Prva oznaka (od vrha prema dnu) ima prednost tijekom sukoba.

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

Strukturirana svojstva stavite nakon što deklarirate njihovu korijensku oznaku. Kad god se parsira još jedan korijenski element, to strukturirano svojstvo se smatra dovršenim i pokreće se drugo.

Na primjer:

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

znači da na ovoj stranici postoje 3 slike, prva slika je 300x300, srednja ima neodređene dimenzije, a posljednja je 1000visoka px.

Vrste objekata

Da bi se vaš objekt prikazao unutar grafa, morate odrediti njegov tip. To se postiže pomoću og:typesvojstva:

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

Kada se zajednica složi oko sheme za tip, on se dodaje na popis globalnih tipova. Svi ostali objekti u sustavu tipova su CURIE tipovi oblika

<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

Globalni tipovi su grupirani u vertikale. Svaka vertikala ima svoj vlastiti imenski prostor. Vrijednosti og:typeza imenski prostor uvijek imaju prefiks imenskog prostora, a zatim točku. To je kako bi se smanjila zbrka s korisnički definiranim tipovima s imenskim prostorom koji uvijek imaju dvotočke.

Glazba

og:typevrijednosti:

music.song

  • music:duration- cijeli broj >=1 - Duljina pjesme u sekundama.
  • music:album- niz music.album - Album s kojeg je ova pjesma.
  • music:album:disc- cijeli broj >=1 - Na kojem se disku albuma nalazi ova pjesma.
  • music:album:track- cijeli broj >=1 - Koja je ova pjesma.
  • music:musician- niz profila - Glazbenik koji je stvorio ovu pjesmu.

music.album

  • music:song- music.song - Pjesma na ovom albumu.
  • music:song:disc- cijeli broj >=1 - Isto kao music:album:disci obrnuto.
  • music:song:track- cijeli broj >=1 - Isto kao music:album:tracki obrnuto.
  • music:musician- profil - Glazbenik koji je stvorio ovu pjesmu.
  • music:release_date- datetime - Datum izlaska albuma.

music.playlist

  • music:song- Identično onima na music.albumu
  • music:song:disc
  • music:song:track
  • music:creator- profil - Autor ove liste za reprodukciju.

music.radio_station

  • music:creator- profil - Tvorac ove stanice.

Video

og:typevrijednosti:

video.movie

  • video:actor- niz profila - Glumci u filmu.
  • video:actor:role- niz - Uloga koju su igrali.
  • video:director- niz profila - Redatelji filma.
  • video:writer- niz profila - Scenaristi filma.
  • video:duration- cijeli broj >=1 - Duljina filma u sekundama.
  • video:release_date- datetime - Datum izlaska filma.
  • video:tag- niz stringova - Riječi oznaka povezane s ovim filmom.

video.episode

  • video:actor- Identično kao video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series- video.tv_show - Kojoj seriji pripada ova epizoda.

video.tv_show

Višeepizodna TV emisija. Metapodaci su identični kao video.movie .

video.other

Videozapis koji ne pripada nijednoj drugoj kategoriji. Metapodaci su identični onima video.movie .

Nema vertikalne

To su globalno definirani objekti koji se jednostavno ne uklapaju u vertikalu, ali se ipak široko koriste i oko njih se prihvaća.

og:typevrijednosti:

article- URI imenskog prostora:https://ogp.me/ns/article#

  • article:published_time- datum i vrijeme - Kada je članak prvi put objavljen.
  • article:modified_time- datetime - Kada je članak zadnji put izmijenjen.
  • article:expiration_time- datum/vrijeme - Nakon čega članak zastari.
  • article:author- niz profila - Autori članka.
  • article:section- string - Naziv sekcije visoke razine. Npr. Tehnologija
  • article:tag- niz stringova - Riječi oznaka povezane s ovim člankom.

book- URI imenskog prostora:https://ogp.me/ns/book#

payment.link- URI imenskog prostora: https://ogp.me/ns/payment#🚧 Samo beta verzija

  • payment:description- niz znakova - Opis poveznice za plaćanje.
  • payment:currency- niz znakova - Šifra valute ISO 4217plaćanja.
  • payment:amount- float - Iznos zatražen na poveznici za plaćanje u decimalnom formatu.
  • payment:expires_at- datum i vrijeme - Datum i vrijeme, uključujući minute i sekunde, kada istječe veza za plaćanje.
  • payment:status- enum (PENDING, PAID, FAILED, EXPIRED) - Status plaćanja.
  • payment:id- niz znakova - Jedinstveni identifikator povezan s poveznicom za plaćanje za određeni sustav plaćanja ili pružatelja usluga.
  • payment:success_url- url - Važeći URL koji se preusmjerava kada je plaćanje uspješno.

profile- URI imenskog prostora:http://ogp.me/ns/profile#

  • profile:first_name- niz znakova - Ime koje pojedincu obično daje roditelj ili ga je sama odabrala.
  • profile:last_name- niz znakova - Ime naslijeđeno iz obitelji ili braka i pod kojim je pojedinac općepoznat.
  • profile:username- niz znakova - Kratki jedinstveni niz znakova za njihovu identifikaciju.
  • profile:gender- enum (muški, ženski) - Njihov spol.

website- URI imenskog prostora:https://ogp.me/ns/website#

Nema dodatnih svojstava osim osnovnih. Svaka neoznačena web stranica treba se tretirati kao og:typeweb-mjesto.

Vrste

Sljedeći tipovi se koriste pri definiranju atributa u Open Graph protokolu.

Tip

Opis

Literali

Booleov

Boolean predstavlja vrijednost true ili false

istina, laž, 1, 0

Datum i vrijeme

DateTime predstavlja vremensku vrijednost sastavljenu od datuma (godina, mjesec, dan) i opcionalne vremenske komponente (sati, minute)

ISO 8601

Nabrajanje

Tip koji se sastoji od ograničenog skupa konstantnih nizova vrijednosti (članova nabrajanja).

Nizovna vrijednost koja je član nabrajanja

Plovak

64-bitni predznačeni broj s pomičnim zarezom

Svi literali koji odgovaraju sljedećim formatima:

1.234
-1.234
1.2e3
-1.2e3
7E-10

Cijeli broj

32-bitni predznačeni cijeli broj. U mnogim jezicima cijeli brojevi veći od 32 bita postaju float, stoga ograničavamo Open Graph protokol radi lakšeg korištenja na više jezika.

Svi literali koji odgovaraju sljedećim formatima:

1234
-123

Niz

Niz Unicode znakova

Svi literali sastavljeni od Unicode znakova bez escape znakova

URL

Niz Unicode znakova koji identificiraju internetski resurs.

Svi valjani URL-ovi koji koriste protokole http:// ili https://

Implementacije

Zajednica otvorenog koda razvila je brojne parsere i alate za objavljivanje. Javite Facebook grupi ako ste i vi izgradili nešto sjajno!

Protokol Open Graph izvorno je stvoren na Facebooku, a inspiriran je Dublin Coreom , link-rel canonicalom , mikroformatima i RDFa . Specifikacija opisana na ovoj stranici dostupna je u okviru Ugovora Open Web Foundation, verzija 0.9 . Ova web stranica je otvorenog koda .