Nie jest niczym nowym, że Facebook niejednokrotnie jest głównym (poza Googlem) źródłem wejść na serwisy www, a znaczniki rekomendacji czy „Lubię to” znajdują się w zasadzie na wszystkich liczących się stronach, którym zależy na ruchu.
Często zdobycie jak największej liczby „lajków” jest celem samym w sobie, ale problem który się tutaj wyłania to brak możliwości kontroli co właściwe zostaje wyświetlone w ramach portalu Facebook po podzieleniu się przez użytkownika linkiem do serwisu.
Rozwiązaniem tego problemu jest protokół Facebook Open Graph.
Facebook Open Graph
Protokół Facebook Open Graph umożliwia web developerom niejako zamienić stronę w obiekt Facebooka, pozwalając tym samym na pewne dostosowanie informacji, które są przekazywane ze strony www do serwisu Facebook w momencie, gdy strona jest rekomendowana, lubiana czy ogólnie gdy użytkownik chce się nią podzielić.
Sama procedura jest bardzo prosta, a polega jedynie na wstawieniu dodatkowych meta tagów w kod źródłowy strony.
Ogólna struktura
Wszystkie META tagi, wykorzystywane przez Facebook Open Graph muszą zaczynać się od prefixu og:, po którym następuje nazwa właściwości, która ma zostać ustawiona. Następnie w atrybucie content ustawiamy wartość dla danej właściwości.
-
<meta property="og:{nazwa}" content="{wartosc}"/>
Szereg tych właśnie prostych META tagów umożliwi wypracowanie schematu jakie obrazki, linki, texty będą się pojawiały w Facebooku w momencie dzielenia się linkiem z naszego serwisu.
Facebook Open Graph Meta Tagi
image
Przekazuje informację o tym jaki obrazek ma zostać wyświetlony przy dzieleniu się stroną:
-
<meta property="og:image" content="http://blog.alchemycode.pl/images/facebooklogo.png"/>
Warto pamiętać, ze facebook wykorzystuje kwadratowe obrazki do wyświetlania informacji o zasobie, także i ten powinien taki być o wymiarach co najmniej 50x50px.
site_name
Atrybut przekazuje nazwę strony:
-
<meta property="og:site_name" content="Blog Alchemycode.pl"/>
Tag bardzo przydatny, ponieważ Facebook nie jest w stanie w inny sposób pozyskać takiej informacji
url
Adres URL strony:
-
<meta property="og:url" content="http://blog.alchemycode.pl/2011/05/29/facebook-open-graph-meta-tagi"/>
title
Atrybut ten jest tekstem linku który zostanie pokazany:
-
<meta property="og:title" content="Facebook Open Graph META Tagi"/>
Najprawdopodobniej chcemy by była to informacja o zasobie czy nawet title samej strony
description
Przekazuje opis strony, który ma zostać wyświetlony na stronie Facebooka:
-
<meta property="og:description" content="Jakiś chwytliwy opis strony, który będzie się pojawiał na Facebooku"/>
type
Przekazuje typ strony, po którym powinna ona zostać skategoryzowana:
-
<meta property="og:type" content="blog"/>
Dostępne typy to: activity, sport, bar, company, cafe, hotel, restaurant, cause, sports_league, sports_team, band, government, non_profit, school, university, actor, athlete, author, director, musician, politician, public_figure, city, country ,landmark, state_province, album , book, drink, food, game, product, song, movie, tv_show, blog, website, article
Inne Facebook Open Graph Meta Tagi
Powyższa lista uważana jest za absolutne minimum, które pozwoli nam efektywnie sterować informacjami wyświetlanymi na serwisie Facebook w momencie dzielenia się użytkowników zasobami na stronie.
Kompletna lista znaczników wraz z dokumentacją dostępna jest na stronie Facebook Developers
Dodatkowo Facebook przygotował specjalne narzędzie Lint tool, które pozwala zweryfikować jakie informacje są wysyłane do Facebooka dla konkretnej strony.
Podsumowując
Facebook Open Graph stanowi świetne narzędzie do sterowania informacjami jakie chcemy by zostały przekazane do Facebooka, umożliwiając pozyskanie jeszcze większej liczby użytkowników serwisu dzięki odpowiedniemu doborowi słów kluczowych i specyficznych informacji dotyczących danego zasobu.




2 komentarze do “Facebook Open Graph Meta Tagi”
Trafiłem na Twój blog dzisiaj i niemal natychmiast pożałowałem że tak późno. Doskonałe artykuły i już wylądował w czytniku.
Co do komentowanego wpisu to warto się temu przyjrzeć i przetestować.
Pozdrawiam
dzięki