Какво е 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). Приятно гледане:

Ако срещате проблеми с възпроизвеждането на видеото посетете адреса на live streaming видеото от f8 conference на livestream.com

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

Ако се съберете група от хора и всеки хване по едно въже с еднаква дължина, може да разиграете една игра, обясняваща идеята за 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, затова ви препоръчвам след като прочетете тази публикация да сверите написаното в нея с тези два ресурса:

Моите препоръки в използването на 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!

За автора 

Казвам се Иво Илиев. Практикувам в сферата на дигиталния маркетинг и комуникации от 2002г. Управител съм в дигитална агенция "InteractAGE", където аз и екипът ми имаме удоволствието да работим над разнообразни кампании за наши международни и регионални клиенти.
Благодаря ти, за отделеното време над тази статия! Тя е написана за теб и всички читатели на блога с идеята да е от полза. Ще съм ти благодарен, ако решиш да я подкрепиш като я споделиш в социалните мрежи. За мен е важно да чуя твоето мнение по темата от статията, и ще се радвам да го споделиш в коментарите по-долу.
Author: Ivo Iliev

Кратка връзка към публикацията:

Facebook Comments

28 коментара

  • […] знаете, че когато интегрирате Open Graph в сайта си се създава една автоматична фен страница на […]

  • Определено страхотно полезна статия!

    Адмирации!

  • […] се, че Open Graph създава служебна фен страница за вашия сайт, която […]

  • Всичко това го правя на WordPress сайт,но така и не се получава това като се хареса някоя страница да се добавя към дейности на потребителя и да мога да го информирам.За това ли става дума за след 30-тото харесване?Благодаря 🙂

    • не, не е за това.

    • Много бих Ви бил благодарен да се свържем по skype(diemem434575 e моят)…Наистина вече около месец опитвам да направя това нещо,наскоро отрих и Вашият блог,който е супер полезен,но и сега не се получи и съм страшно отчаян.Бих ви платил ако кажете,няма проблем само да ми помогнете.Благодаря предварително!

    • След 30-тия фен фейсбук ви регистрира ваша си собствена фен страница, чиято стена и настройки само вие виждате. В моят блог съм изнесъл тази стена в горната дясна колона като like box. На тази фен страница вие пишете от името на сайта, а го виждат всички, които са кликнали "Харесва ми" за домейна. Когато те (Вашите фенове) кликнат на някой пост от името на сайта Ви във Фейсбук, те автоматично биват прехвърлени в самия сайт. Това прави Фейсбук източник на таргетиран директен трафик от лоялна аудитория – нещо доста ефективно. Вече сме интегрирали Open Graph в различни големи и малки, български и чужди уеб сайтове – ако желаете можем да се свържем за да предложа варианти за интеграция и във Вашия уеб сайт.

    • Да,желая да се свържем.Дал съм Ви в горният пост контакт за връзка.

    • Ок, разбира се. Утре ще поговорим по темата в чата

    • Само ако може да ме ориентирате кога утре горе-долу да съм на линия,за да се засечем?

    • От сутринта след 10:00 горе-долу съм в skype, ще се намерим със сигурност.

    • Добре,до утре тогава.Лека вечер!

    • Лека! 🙂

  • Като цяло полезна статия. Щеше да е перфектна, ако превода на български беше една идея по-добър. Термините „open graph“, „social graph“, „graph theory“ нямат нищо общо с графика, а с математическия термин „граф“.
    http://bg.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D1%84_(%D0%BC%D0%B0%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B0)
    П.С. Надявам се да приемете коментара позитивно 🙂

    • Мерси за уточнението. И на мен ми беше интересно да науча за този математически термин – математиката не ми е била силна страна никога 🙂

  • Мерси, много полезна статия!

  • Привет! Много полезна статия, но имам проблем – в <meta property="og:title" content="ЗАГЛАВИЕ НА СТРАНИЦАТА, ДО 72 СИМВОЛА"/> трябва да се появи заглавие на статия от PHP страница. А то може да е повече от 72 символа. Досещам се, че заглавието на страницата трябва да бъде извлечено от някъде, скрипт, но как?

  • […] Правилно поставен и работещ Open Graph Protocol в страниците на сайта си (всичко по темата ще намерите тук) […]

  • […] и за Google индексирането. За тези, които не знаят – чрез интегриране на Open Graph в сайта Ви Вие можете да получите достъп до неговите Facebook social […]

  • Много полезна статия. И като разяснение и като туториъл Мерси много, Иво Илиев.

  • […] бутон за споделяне и се зареди Feed прозореца, освен споделеното чрез Open Graph Protocol съдържание , да можем да запишем съобщение (message, коментар) от […]

  • Къде се сторват "безименните приложения" от like бутона? Служат ли за подаване на някаква допълнителна информация?

    • В "Моите приложения" във Facebook developers. Не подават никаква информация, освен прихващане на домейн името и включването му в базата данни на graph-а със съответно ID.

    • Благодаря! ПОлезна и изчерпателна статия.

  • Много добра статия мерси отново за ифното.

  • Има ли вариант да подадем повече от едно изображение, чрез og:image?

    • ако не слагате og:image facebook ще кешира каквото намери в кода на страницата. Понякога, обаче, не е вариант да се осланяте на facebook кеша, защото може да пропусне изображения, а и след публикуване на новата страница изисква доста време

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *