Какво е Open Graph Protocol ?

Сигурно сте се чудили как да популяризирате сайта си. Има много начини, но един от най-успешните в последно време е да го интегрирате със социалните мрежи. Едно добро присъствие на сайта в тях определено би повишило трафика на посетители. Facebook безспорно е най-популярната социална мрежа, в която всяка секунда се обменя огромно количество информация между нейните потребители. Всеки от нас е споделял на страницата си песни, филми, снимки и какво ли не със своите приятели. Ако сте обърнали внимание, във всички сайтове има бутони за споделяне и харесване.
Но дали поставянето на един бутон е достатъчно за лесната интеграция със Facebook?

За да бъде един уебсайт напълно подготвен да комуникира с Facebook, е нужно да се използва Open Graph Protocol-a. Почти всички най-големи и популярни уебсайтове го поддържат. Неговата интеграция превръща всяка една страница в обект от т.нар. социален граф. Това позволява на страницата да има същата функционалност като всеки един обект от Facebook. С негова помощ могат да се използват в пълните си възможности всички социални плъгини, които могат да се поставят. Освен това той предоставя пълен контрол над това, каква точно информация се споделя във Facebook. Open Graph Protocol напълно олицетворява идеите, заложени в отдавна популярната платформа WEB 2.0.

Може да звучи сложно но е нещо изключително лесно за имплементиране: Open Graph Protocol-a (OGP) представлява поредица от мета-тагове, които синтезират най-важната информация за страницата и обектите в нея в разбираем за Facebook вид. Те се слагат по същия начин както всички останали мета тагове в head секцията на страницата.

Малък проблем на който може да се натъкнете при имплементирането на OGP е че атрибута 'propery' не се валидира правилно от повечето doctypes. За правилна валидация на страницата е добре да се използва doctype който работи с RDFa като:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01+RDFa 1.0//EN "http://www.w3.org/MarkUp/DTD/html401-rdfa-1.dtd">

Ето какво представляват на практика OGP meta таговете:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Както се вижда, в тези мета тагове е обобщена съществената информация на страницата.

Основните тагове на OGP са следните:

og:title - това е заглавието с което ще се появи обекта в социалния граф;
og:type - типа на страницата - дали е изображение, видео, статия, блог или сайт;
og:image - линк към изображение, което ще представлява страницата в социалния граф; то трябва да е минимум 200х200 пиксела ширина и дължина, както и не трябва да тяхното отношение да е повече от 3 към 1; адресът на изображението трябва да е публичен, така че всеки да може да бъде отворен;
og:url - адреса на страницата;
og:secure_url - защитен адрес към страницата, ако се изисква (https);
og:audio - линк към аудио файл, който съпровожда обекта;
og:description - кратко описание на страницата, което ще показваме;
og:determiner - какъв определителен член ще се сложи пред заглавието (a, an, the);
og:locale - къде се намираме и на какъв език е сайта - formata e: език_ДЪРЖАВА, като по дефолт е en_US, а за българия е bg_BG;
og:site_name - заглавието на сайта, в който се намира страницата;
og:video - линк към видео файл.

Не всички от тези тагове са задължителни, повечето са опционални. Най-важните са: og:title, og:type, og:url, og:image.

Гореописаните тагове са основните, но освен тях има още няколко OGP обекта, които съдържат допълнителна информация. Нека разгледаме най-важните от тях:

og:image:url - адреса на изображението (същото както og:image);
og:image:secure_url - защитеният адрес на изображението;
og:image:type - Mime типа на изображението;
og:image:width - височина;
og:image:height - широчина.

А ето и един пример:

<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" />

Видео обекта og:video има абсолютно същите пропъртита като изображението, но вместо 'image' се слага 'video'.

<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" />

og:audio има същите атрибути, но без широчината и дължината.

Тип на обектите

За правилното представяне на обекта в социалния граф, е нужно да бъде дефиниран неговия тип:

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

Когато бъде измислен нов обект той се добавя в списък от типове, като се използва следния шаблон:

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

Някои от възможните стойности за og:type са:

В музикалния namespace се включват: http://ogp.me/ns/music#

music.song
music.album
music.playlist
music.radio_station

Във video namespace се включват: http://ogp.me/ns/video#

video.movie
video.episode
video.tvshow
video.other

Други популярни типове са статия/книга/профил, които съдържат съответната съществена информация:

article - Namespace URI: http://ogp.me/ns/article#

article:published_time - datetime - датата на публикуване на статията;
article:modified_time - datetime - коя е последно редактираната статията;
article:expiration_time - datetime - кога статията ще е изтекла;
article:author - profile array - автори на статията;
article:section - string - от каква област е тя;
article:tag - string array - тагове, на които статията отговаря.

Обект Книга book - Namespace URI: http://ogp.me/ns/book#

book:author - profile array - кой е автора на книгата;
book:isbn - string - ISBN кода;
book:release_date - datetime - кога книгата е била публикувана;
book:tag - тагове на които отговаря книгата.

Обект Профил profile - Namespace URI: http://ogp.me/ns/profile#

profile:first_name - string - първото име на собственика на профила by a parent or self-chosen;
profile:last_name - string - фамилно име;
profile:username - string - потребителско име;
profile:gender - enum(male, female) - пол.

След като разгледахме основните пропъртита на OGP, следва да си зададем въпроса: По какъв най-лесен начин може да се имплементира той в нашия уебсайт?

За статичните сайтове (ако още има такива) е достатъчно да се напишат на ръка. За феновете на Контент мениджмънт системи като Wordpress, Joomla и други, те имат свои плъгини, които лесно интегрират OGP в уебсайта. Дори да не използвате такава система, всеки програмист може лесно да генерира нужния код, наблюдавайки примерите. Ако все пак искате да не създавате кода от нулата може да потърсите измежду многото налични библиотеки.

В нашия сайт - bgERP.com използваме open source библиотеката
https://github.com/niallkennedy/open-graph-protocol-tools, която се разпространява под GPL3. Тя съдържа реализирани няколко класа, представляващи основните обекти, и предоставя редица методи, които улесняват подаването на информация.

Нейното използване е лесно, само разгледайте примерния код:


// инстанцираме обекта
$ogp = new OpenGraphProtocol();

// определяме езика/държавата
$ogp->setLocale( 'en_US' );

// Името на сайта
$ogp->setSiteName( 'Happy place' );

// Заглавието на страницата
$ogp->setTitle( 'Hello world' );

// Кратко описание
$ogp->setDescription( 'We make the world happy.' );

// Типа на страницата
$ogp->setType( 'website' );

// Адрес на страницата
$ogp->setURL( 'http://example.com/' );

След като сме подготвили обекта, генерирането на html код става по следния начин: