HTML triky 1: Open Graph protokol časť. 1

V prvom dieli HTML trikov sa pozrieme na veľmi jednoduché riešenie, ako vďaka Open Graph protokolu prednastaviť obrázok a názov vašej webstránky, keď ju niekto zdieľa na Facebooku a zároveň vyriešime problém, kedy sa žiaden obrázok nezobrazuje.

Mnohí ste sa s tým už určite stretli. Zdieľali ste si pomocou služby Facebook svoju či vašu obľúbenú stránku, avšak- náhľadový obrázok sa nie a nie načítať.

Výsledok v takom prípade vyzerá takto:

Ako tomu predísť? Odpoveďou je Open Graph protokol.

Open Graph protokol

Čo je to Open Graph protokol? Pomôžme si wikipediou: Open Graph je Facebook API (rozhranie pre programovanie aplikácií), ktoré umožňuje webstránkam vykresliť úplne nové informácie o objektoch na stránke, t.j. dovolí nám používať našu webstránku ako hociktorý objekt, ktorý nájdeme na Facebooku.

Hlavnou myšlienkou pre koncového užívateľa (nás), je udržať jednoduchosť sémantiky a integrácie protokolu do našej webstránky.

Ako to vyzerá v praxi

Ako si môžete všimnúť, stránka http://thewitcher.sk/zajtra/html1/ je úplne prázdna, no vďaka nastavenému Open Graphu vám aj tak vygeneruje pri zdieľaní obsah pre Facebook.

Integrovanie Open Graph protokolu

Integrácia je úplne jednoduchá- do <head> vašej webovej prezentácie vložíte dáta s vlastnosťami Open Graphu.

Zápis vlastností je vždy rovnaký:
<meta property="og:nazov_vlastnosti" content="obsah_pre_vlastnost">

Ukážka základných vlastností:

Pre lepšie pochopenie si každú z vlastností vysvetlíme

og:title - title nám umožňuje nastaviť názov aktuálnej stránky na ktorej sa nachádzame a ktorú zdieľame
og:url - url nám umožňuje nastaviť kanonickú url stránky na ktorej sa práve nachádzame a teda link, ktorý sa zobrazí na Facebooku pri zdieľaní.
og:image - image nám umožňuje nastaviť obrázok, ktorý sa načíta ako základný náhľad zdieľanej stránky.
POZOR! Pre správne fungovanie vždy uvádzajte úplnú cestu k obrázku, napr. http://www.zajtra.sk/images/zajtra_logo_150.png
og:site_name - site_name nám umožňuje nastaviť názov celého webu, je to Open Graph obdoba html tagu <title>
og:type - type nám umožňuje nastaviť typ dokumentu/stránky, na ktorej sa práve nachádzame, čo nám otvorí veľa možností k ďalším funkciám Open Graphu (viac o nich v ďalšom článku)
og:description - description nám umožňuje jednou-dvoma vetami popísať obsah stránky, ktorú zdieľame.

Má Open Graph protokol zmysel?

V dnešnej "sociálnej" dobe určite má. Treba si uvedomiť, že zdieľanie je v súčastnosti tou najlepšou reklamou, pretože si vytvára vzťah medzi vami a užívateľom, ktorý vašu stránku/článok/produkt zdieľa a to je omnoho hodnotnejšie, ako vaša reklama na googli. Zvýšte preto kvalitu zdieľaných informácií pomocou Open Graph protokolu, vďaka ktorému môžete mať zdielané informácie priamo pod kontrolou.

V ďalšej časti seriálu HTML triky sa pozrieme na pokročilé vlastnosti Open Graph protokolu, vrátane rôznych možností pri publikovaní videa a hudby.

Zdroje:
http://ogp.me/

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest

Ernest Sawyer

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)

Hodnoť článok:
18 3

5 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:

0 0 Bokos 24.8.2012 15:56:28
Možno je super spomenúť aj tento debuger http://developers.facebook.com/tools/debug ,pri chybe pekne zobrazí čo nedokázal spracovať :).

1 0 Ernest Sawyer 7.8.2012 07:33:08
@Milan Vodička všetko príde postupne na pretras, aj Google :) V tomto seriály sa idem venovať hlavne HTML5 a FB/GOOGLE API.