Osnove Open Graph protokola

Open Graph protokol (OGP) je set instrukcija čija je namena da naglasi naslov, opis, URL i sliku web sajta, a koji se deli putem društvene mreže Facebook.

Open Graph protokol je kreiran od strane inženjera kompanije Facebook 2010. godine i koristi se samo i isključivo za kontrolu povezivanja i deljenja sadržaja na ovoj društvenoj mreži.

Osnovna svrha OGP protokola

Osnovna svrha ovog protokola jeste da naglašeni sadržaj integriše i prikaže na Facebook društvenoj mreži i kontroliše njegov izgled, odnosno kako će naglašeni sadržaj biti prikazan.

Facebook uz pomoć OG protokola preuzima naslov (og:title), opis (og:decription), URL adresu (og:url), sliku (og:image) i dimenzije slike (og:image:width, og:image:height), jezik (og:locale), tip objekta (og:type), naziv web sajta (og:site_name), broj stranice administratora Facebook profila (fb:admin) i broj Facebook aplikacije koju je kreirao administrator (fb:app_id) web sajta, web stranice, bloga ili blog članka koji će biti preuzet prilikom deljenja (URL share) ili lajkovanja stranice (Page like).

Integracija OGP protokola u web stranicu

OGP se integriše u web stranicu tako što se dodaje u njen <head> meta element. Za integraciju ogp protokola potrebno je uneti prefiks i definisati attribute što možete učiniti ukoliko budete sledili tutorial koji smo napisali u 9 jednostavnih koraka:

  1. Prvi korak je da naglasimo i dodamo prefiks u <head> meta elementu i na taj način naglasimo da je OGP prisutan u kodu stranice:
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">


  2. Zatim je potrebno da dodamo naslov web sajta ili web stranice:
    <meta property="og:title" content="Website title" />


  3. Treći korak bi bio dodavanje opisa web sajta (najbolje do 156 karaktera uključujući razmake):
    <meta property="og:description" content="Website description" />


  4. Četvrti korak je da unesemo tag sa URL adresom stranice:
    <meta property="og:url" content="Website URL address" />


  5. Zatim je potrebno da naglasimo i odredimo URL slike koja će biti upotrebljena prilikom deljenja ili lajkovanja stranice na Facebook društvenoj mreži:
    <meta property="og:image" content="Website image URL" />


  6. Ovde je potrebno upisati dimenzije slike iz prethodnog koraka:
    <meta property="og:image:width" content="Website image width" />
    <meta property="og:image:height" content="Website image height" />


  7. Sedmi korak je upisivanje naziva web sajta, bloga, privatnog lica ili kompanije:
    <meta property="og:site_name" content="Website name" />


  8. Osmi korak predstavlja dodavanje i određivanje tipa objekta, to podrazumeva odabir taga koji najbolje opisuje da li je u pitanju websajt, lični portfolio, autor, knjiga, restoran, blog ili blog članak i td:
    <meta property="og:type" content="Website type" />

    Trenutno dostupni objekti su (website, article, book, books.author, books.genre, business.business, fitness.course, music.album, music.musician, music.playlist, music.radio_station, music.song, object, place, product, product.group, product.item, profile, quick_election.election, restaurant, restaurant.menu, restaurant.menu_item, video.episode, restaurant.menu_section, video.movie, video.tv_show, video.other).
    *Moguća je izmena postojećih ili dodavanje novih atributa objekata usled kontinuiranog razvoja Open Graph Protokola.



  9. Poslednji korak je dodavanje ID broja privatnog Facebook profila administratora sa kojeg je kreirana Facebook stranica kompanije:
    <meta property="fb:admins" content="Facebook admin Id number" />

    ili dodavanje ID broja Facebook aplikacije koju ste kreirali sa administratorskog Facebook profila:
    <meta property="fb:app_id" content="Facebook application Id number" />

Open Graph Facebook isečci

Primer kako izgleda stranica koja se deli na Facebook društvenoj mreži:


Connecting the website with Facebook profile via #OpenGraph Protocol

Posted by PopArt STUDIO on Friday, September 11, 2015



Primer kako izgleda Open Graf protokol u kodu stranice na kojoj se trenutno nalazite:

<head lang="sr" prefix="og: http://ogp.me/ns#">
<meta property="og:title" content=" Šta je (OGP.me) Open Graph Protokol " />
<meta property="og:type" content="website" />
<meta property="og:url" content=" https://www.popwebdesign.net/sta-je-ogp.html " />
<meta property="og:image" content=" https://www.popwebdesign.net/img/open-graph-protocol.png " />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="PopArt Studio" />
<meta property="fb:admins" content="100000505383935" />
<meta property="og:description" content=" Open Graph protokol (OGP) je set instrukcija
koje služe za naglašavanje naslova, opisa, URL i slike web sajta a koji se deli putem društvene mreže Facebook." />




Pročitajte još:

Spoljašnje veze i izvori:

  • Zvanična stranica na kojoj možete naći detaljne instrukcije OGP protokola.

Dobar dan. Kako možemo da vam pomognemo?

back btn

Naručite uslugu

Ovo polje je obavezno.
Web dizajn Web development Web aplikacija Internet marketing Copywriting Grafički dizajn Ovo polje je obavezno.
Ovo polje je obavezno.

back btn

Pridružite nam se.

Ovo polje je obavezno.
UI/UX dizajner Community Manager Front-end Developer Back-end Developer Grafički Dizajner Copywriter SEO Ovo polje je obavezno.
Priložite CV/Portfolio
Ovo polje je obavezno.

back btn

Tu smo za vas.

Ovo polje je obavezno.
Ovo polje je obavezno.