Какво е Open Graph и защо е необходим за сайта ни?

Малко предистория, малко теория

Според теорията за графиките в социалните сфери, „социалната графика“, още позната като, „социална карта“ описва глобално всички хора и как те са свързани помежду им. С други думи „социалната карта“ е схема на множество от хора (точки в картата) и серия от връзки и взаимодействия (линии) между тях.

През 24.май.2007г. компанията Facebook провежда събитието f8 Conference, което е ежегодна конференция на Facebook и свързаните с платформата технологии. На f8 конференцията от компанията обясняват идеята за www.facebook.com като сходна на идеята за създаване на дигитална социална карта. Нещо повече, Фейсбук имат амбицията чрез своята платформа да създадат най-подробната и обширна социална карта в света.

Особеното на тази дигитална карта на социалните връзки е, че в нея са включени не само всички хора, но и всякакви други уеб обекти, например уеб сайтове, страници от уеб сайтовете, страници от Фейсбук и др. Тук идва и големият проблем за Фейсбук – как да се предоставят различни социални инструменти и начини за социална интеракция между хората, и как резултатите от тях да бъдат включени автоматично към social graph (социалната карта).

Google излизат с частично решение още в началото на 2008г. – те създават т.нар. Social Graph API, който предоставя специални „идентификатори“, с които уеб сайтовете могат да описват линковете помежду си. Един от най-популярните идентификатори е „rel=“ (идва от relation). Атрибутът rel е част от XHTML Friends Network (XFN), като Google ползват и Friend of a Friend (FOAF) markup, както и още няколко програмни декларатора на публични връзки.

През 2010г. Фейсбук вече са изградили най-голямата социална карта на света в дигитален вид. Тя не само съдържа най-голям обем обекти и хора в себе си, но и е най-описателна от гл.т. на връзките между тях. Още същата година, на традиционната f8 конференция, Facebook анонсират Graph API и Open Graph Protocol. Най-просто казано Graph API дава възможността на уеб сайтовете да оперират с информация не само за хората в социалната карта, но и за доста обекти – снимки, страници, събития, тематични групи и пр. Нещо повече – Graph API предоставя и поток от информация относно връзките между хората и обектите.

От друга страна Open Graph Protocol е начинът да се включите към социалната карта на Facebook и да станете част от взаимовръзките в нея, като я допълвате с наличната информация от вашия сайт. По-надолу ще намерите конкретни обяснения за Open Graph Protocol и ползите от интегрирането му във вашия уеб сайт.

Сега предлагам да видите официалния анонс на Марк Зукърбърг, CEO и създател на Facebook и неговата концепция за social graph и Open Graph Protocol (OGP). Приятно гледане:

За социалната карта

Ако се съберете група от хора и всеки хване по едно въже с еднаква дължина, може да разиграете една игра, обясняваща идеята за social graph.
Всеки от групата трябва да хване със свободната си ръка въжетата на своите близки приятели – по този начин те трябва да са по-близко до него, за да може да достигне въжетата им. Когато хване някое въже, ръката му разделя това въже на две части и до определена степен скъсява неговата дължина.

Ако въжето е нашата социална комуникация с другите, ние сме обект от social graph също както всичко други, с които осъществяваме социален контакт. Там, където хванем въжето – там е резултатът от нашата комуникация – в случая с играта това е приятелството, но в интернет това може да е общ уеб сайт, фен страница във фейсбук, форум и пр. Когато хванем въжето то условно се разделя на две части – всяка от тях символизира социалните „оръжия“ или инструменти, които сме ползвали за да създадем съответната социална връзка.

В нашата групова игра ще се получи така, че всички участници, след като хванат въжетата на другите ще се окажат по-близко един до друг и ще са се хванали ръка за ръка, като между захватите им ще са въжетата им.
Както става ясно social graph описва нашия социален живот, но в дигиталната среда, която предлага интернет.

Конкретно в случая на Facebook въжетата са всички онези социални инструменти, които вече несъзнателно използваме: бутон „Харесва ми“, споделянето на стената, фен страниците, facebook коментарите и пр., и пр. Те предизвикват социални връзки, които Facebook регистрира в social graph.

Web 2.0

„We think that the future of the web will be filled with personalized experiences“ – Марк Зукърбърг

Доста се изкриви понятието web 2.0, особено говорейки за web 2.0 design. Web 2.0 включва сайтове, където посетителите имат инструментариум и съответно възможност да споделят и разпространяват съдържание. В тази връзка Web 2.0 се описва като Social Web и няма как да се развива без наличие на подробна social graph.

Факт е, че с иновативните си подходи Facebook и Google развиха доста Web 2.0. Потребителското съдържание (user generated content) е нещо нормално в наши дни, но то поражда доста притеснения относно сигурността на информацията и достоверността на информацията.

Със сигурност ако преди години никой не се интересуваше от онлайн репутация, сега инвестициите в това са сериозни. Мнението на хората е критично важно.

Как да включим сайта си в social graph?

За да сте част от социалната карта е необходимо да имате Open Graph Protocol, интегриран в страниците на вашия сайт.

Ще започна с официалната документация и анонс на Facebook:
The Open Graph Protocol Design Decisions

Интеграцията на Open Graph Protocol (OGP) е доста елементарна на пръв поглед, но всъщност, от опита който имам с тази програмна разработка бих ви посъветвал да поискате от вашия програмист сами, ръчно(от администраторския панел на сайта) да можете да зададете нужната на OGP информация.

OGP се слага в сайтовете не само за да сте част от social graph, но и за да:

• Имате достъп до Facebook Insights статистиките за сайта
• Използвате в пълната си функционалност и потенциал всички social plugins като бутон „харесва ми“, „изпрати“, facebook коментари и пр.
• Бъде възприета всяка страница от сайта ви като facebook страница, което в даден момент ще ви даде възможност да пишете от името на сайта си и да привличате по-голям органичен трафик чрез фейсбук
• Имате пълен контрол над съдържанието, което се споделя във Facebook от вашия сайт

Добавянето на OGP става в точно две стъпки или по-точно интегриране на код на две места в сайта ви:

1. OGP използва Resource Description Framework – in – attributes (RDFa) , което изисква да замените <html> тага и всички негови атрибути със следния:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">

Тези атрибути ще позволят поддържането на необходимите за OGP метатагове.

2. Преди </head> трябва да поставите минимум основно изискуемите метатагове за OGP:

<meta property="og:title" content="ЗАГЛАВИЕ НА СТРАНИЦАТА, ДО 72 СИМВОЛА"/>
<meta property="og:type" content="КЛИКНЕТЕ ТУК ЗА ДА ВИДИТЕ ВСИЧКИ ТИПОВЕ И ДА ИЗБЕРЕТЕ ПОДХОДЯЩ"/>
<meta property="og:url" content="URL АДРЕС ДО СТРАНИЦАТА С HTTP:// ОТПРЕД"/>
<meta property="og:image" content="URL АДРЕС ДО КАРТИНКА С МИНИМАЛЕН РАЗМЕР 50х50 ПИКСЕЛА"/>
<meta property="og:site_name" content="КРАТКО ЗАГЛАВИЕ НА САЙТА"/>
<meta property="og:description" content="КРАТКО ОПИСАНИЕ НА СТРАНИЦАТА, ДО 200 СИМВОЛА"/>

На мястото на информацията в content=““ запишете данни по избор, според съдържанието на страницата. Тези данни ще се публикуват във Facebook, когато някой споделя страници от сайта ви там. Не предоставяйте невярна информация – Facebook наказват целия domain.

Важно е да посочите кой facebook потребител (или потребители) е(са) администратор на сайта. Това се декларира с този метатаг:

<meta property="fb:admins" content="USER_ID1,USER_ID2"/>

Където USER_ID1 и USER_ID2 са потребителски фейсбук номера на съответно двама администратора (кликнете тук за да видите своя номер). Може да посочите няколко администратора, като изписвате номерата им със запетаи, както в примера. Администраторите имат достъп до facebook insights статистиките и до възможностите да пишат от името на авто-генерираните фен страници на сайта.

За да визуализирам метатаговете малко по-ясно – ето един от слайдовете на лекцията ми за SocialMe Workshop #3 във Варна (кликнете на схемата за да я увеличите в голям размер):

Обърнете внимание на написаното „1 Like button = 1 FB app“ . Отскоро Facebook решиха да създават служебни facebook applications (фейсбук приложения) всеки път, когато генерирате код за бутон „Харесва ми“ оттук. Това за мен е доста дразнеща функция, защото после трябва да си трия „безименните приложения“, които са били служебно създадени по този начин.

Описаните по-горе характеристики е възможно да бъдат променяни и допълвани от Facebook, затова ви препоръчвам след като прочетете тази публикация да сверите написаното в нея с тези два ресурса:

• Open Graph Protocol – официален сайт;
• Facebook Social Plugins – официална документация.

Моите препоръки в използването на OGP

1. Не обръщайте толкова внимание на ключови думи и фрази в OGP информацията. Най-важното е информацията да е най-лесна за възприемане, ясно поставена и по възможност по-провокативна. Целта ви е да провокирате социална активност
2. Поставете стандартен вариант на бутон „Харесва ми“ за главната страница на сайта си(бутон „Харесва ми“ за домейна ви) и с og:type website или (ако е блог) blog. След 30-тия харесал домейна ще видите интересни допълнителни опции до бутона 😉
3. Разчитайте най-много на добрите снимки и картинки, които посочвате в OGP. Според статистиките хората обръщат най-голямо внимание на тях
4. Ако сайта ви предлага медия (видео, аудио и пр.) – вижте в официалната документация какви са OG метатаговете за споделянето й – така вместо снимка хората ще споделят цял плеър във фейсбук
5. Преди да сложите social plugins в сайта си създайте facebook приложение, което да ползвате за тях
6. Ако промените в последствие OGP информация от някоя страница не забравяйте, че facebook ще я кешира наново преди да се актуализира, което понякога изисква малко повече търпение.
7. Ако ви притеснява това, че W3C не валидира страницата заради OG метатаговете, използвайте Docutype, който поддържа RDFa, например: <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML+RDFa 1.0//EN“ „http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd“>

Успех с влизането в social graph!

Иво Илиев

___ Повече за автора четете от тук | YouTube канал | Facebook страница ___ Иво Илиев e управител на дигиталните маркетинг компании BOLANDILA и InteractAGE. ___ Иво Илиев е практик в сферата на маркетинга, рекламата и комуникациите от 2003г. Има богат опит в маркетинга и рекламата на международни компании. Практикува като консултант, водещ на корпоративни обучения, лектор. ___ View all posts by Иво Илиев