Meta Tagi Open Graph dla Facebooka

Facebook Open Graph to protokół, dzięki któremu jesteśmy w stanie ingerować w prezentacje naszych treści w serwisie Facebook wykorzystując sekcję w naszej witrynie. Mamy kontrolę nad tym jak użytkownicy serwisu widzą udostępnione treści z naszej witryny.

Po co stworzono Facebook Open Graph?

Protokół został stworzony w celu ułatwienia integracji serwisów internetowych z Facebookiem, aby każdy właściciel strony mógł wykorzystywać bogate graficznie obiekty z taką samą funkcjonalnością jak inne. Dzięki temu strony zyskują możliwości takie jak: „like”, „share” oraz zliczanie tych zdarzeń co do poszczególnych podstron serwisu. W dzisiejszych czasach inne wielkie media społecznościowe, takie jak Twitter, Linkedin i Google+ również wykorzystują Open Graph. Twitter posiada też swoje meta tagi (Twitter Cards), lecz gdy nie znajduje ich na stronie udostępnianej w obrębie serwisu, wykorzystuje również OG.

Dlaczego warto znać i wykorzystywać meta tagi Open Graph?

Media społecznościowe są ogromnym motorem ruchu w sieci. Prezentacja w nich naszych treści jest bardzo ważna. Dobranie odpowiedniej strategii wyświetlania materiałów marki na tablicach użytkowników może ogromnie zwiększyć częstotliwość kliknięć w link zewnętrzny, co jest oczywiście naszym celem.

Najważniejsze z meta tags OG:

• og:title – jak sama nazwa wskazuje, jest to tytuł, największy nagłówek w naszym obiekcie na tablicy Facebooka. Jedna z ważniejszych rzeczy, gdyż wpada użytkownikowi w oko czasami nawet bardziej niż sam obrazek. Musi być chwytliwy oraz niekoniecznie kompletny, aby zachęcić do wejścia;

<meta property=”og:title” content=”Twój ciekawy tytuł” />

• og:url – jest to link do serwisu, w którym znajduje się treść odpowiadająca za ten obiekt;

<meta property=”og:url” content=”http://www.twojastrona.pl” />

• og:type – tutaj określamy rodzaj prezentowanej treści, czy jest to artykuł, strona internetowa, obrazek etc. Lista wszystkich typów, które można wykorzystać znajduje się tutaj;
• og:description – tag zbliżony do description w HTML, czyli opis zawartości strony, lecz tym razem nie do wyszukiwarki internetowej, a do linku zamieszczonego jako obiekt na portalu Facebook. Nie ma wpływu na SEO, więc nie trzeba się nad nim mocno skupiać, lecz wiadomo, iż jest on wyświetlany jako swego rodzaju reklama, więc powinien być krótki, ciekawy i wyczerpujący temat;

<meta property=”og:description” content=”Tutaj mamy krótki opis strony, który zostanie wyświetlony razem z tytułem, linkiem oraz obrazkiem na Facebooku” />

• og:image – najciekawszy i chyba najważniejszy tag w OpenGraph. Tutaj wybieramy obraz, który ma zostać wyświetlony razem z linkiem do strony. Poprawnie wykorzystując te narzędzie, możemy mocno zwiększyć swoją konwersję:

Gdy nie ustawimy image w Open Graph, Facebook ma dwie opcje:

1. wyświetli same teksty,
2. wyświetli byle jaki obrazek, jaki znajdzie na stronie (zazwyczaj pierwszy).

Pamiętajmy, że gdy nasza strona nie korzysta z żadnego CMS (np. WordPress), gdzie można wykorzystać gotowe wtyczki, którymi można z poziomu panelu administracyjnego zarządzać całą prezentacją postów, to zawsze musimy ustawić najważniejszy obrazek z naszej podstrony. Można również wykorzystywać całkowicie inne zdjęcie, którego na stronie nie ma, aby po stronie social media bardziej zainteresować użytkownika.** Najlepsze rozdzielczości obrazów to ratio 1.91/1 np. 1200x627px**. Limit wielkości to 5 MB. Jeżeli nasze zdjęcie będzie mniejsze niż 400x209px, to nasza miniaturka w obiekcie będzie dużo mniejsza, co za tym idzie, mniej reprezentatywna. Jeżeli wykorzystujesz na obrazku napis, pamiętaj aby wyśrodkować tekst, ponieważ często Facebook ucina obrazek po równo z każdej strony.

<meta property=”og:image” content=”http://www.twojastrona.pl/nazwa-obrazka.jpg” >

Zaawansowane Meta Tagi Open Graph

• og:locale – definiuje język strony (domyślny amerykański angielski);
• og:audio oraz og:video – do dodatkowych mediów na stronie;
• fb:app_id – w celu połączenia witryny z aplikacją Facebooka.

Testowanie wykorzystywanych tagów Facebook Open Graph

Facebook udostępnił narzędzie zwane Open Graph Object Debugger, dzięki któremu możemy podglądać obecnie ustawione tagi, przedstawione już jako gotowy obiekt Facebooka. Zawiera również wiele porad względem tego, co mamy już ustawione, a co być powinno. Drugim przydatnym aspektem jest czyszczenie cache na Facebooku. Standardowo, gdy dla danej podstrony zmienimy np. obrazek, normalnie podczas zmiany i tak będzie wyświetlany stary, gdy użyjemy Debugger’a, portal społecznościowy zaś zbuduje sobie nowy obiekt dla naszego linku.

Facebook Open Graph – Podsumowanie

Open Graph w połączeniu z odpowiednią strategią jest w stanie bardzo pozytywnie wpłynąć na częstotliwość kliknięć w nasze linki przez użytkowników w mediach społecznościowych, a dobra konwersja wpływa pozytywnie na wartość EdgeRank naszej strony na Facebooku — ale o tym następnym razem.