Facebook Open Graph Meta Tagi




Facebook Open Graph Meta Tagi

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.

  1. <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ą:

  1. <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:

  1. <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:

  1. <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:

  1. <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:

  1. <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:

  1. <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.

Related Posts with Thumbnails
Prześlij dalej:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

2 komentarze do “Facebook Open Graph Meta Tagi”

commenter

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

Zostaw komentarz:

Imię (wymagane):
Email:
Strona www:
Komentarz (wymagany):
XHTML: W komentarzach możesz korzystać z nastepujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
-