Meta Tagi Open Graph dla Facebooka

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

Po co stworzono OG?

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 obiekty w największym portalu. Dzięki czemu strony zyskują możliwości jak. „like”, „share” oraz zliczanie tych zdarzeń co do poszczególnych podstron twojego serwisu. W dzisiejszych czasach inne wielkie serwisy takie jak Twitter, Linkedin, Google+ również wykorzystują Open Graph. Twitter również posiada swoje meta tagi(Twitter Cards),lecz gdy nie znajduje ich na stronie udostępnianej w obrębie ich serwisu, wykorzystują również OG.

Dlaczego warto znać i wykorzystywać Open Graph?

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

Najważniejsze z tagów 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:

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

  • og:type – tutaj określamy rodzaj prezentowanej treści,czy jest to artykuł bloga, 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 jest to 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:

  • og:image – najciekawszy i chyba najważniejszy tag w OpenGraph. Tutaj wybieramy obraz, który ma zostać wyświetlony razem z linkiem do strony. Za pomocą poprawnego wykorzystywania tego narzędzia możemy mocno zwiększyć swoją konwersję:

Przykład og:image Bardziej obrazowy przykład

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 musimy ustawić zawsze najważniejszy obrazek z naszej podstrony.  Można również wykorzystywać całkowicie inne zdjęcie, którego na stronie nie ma, w celu 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 5MB. 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 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ą Facebook’ową

Testowanie wykorzystywanych tagów

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

Tester open graph

Podsumowanie

Open Graph z odpowiednią strategią jest w stanie bardzo mocno wpłynąć pozytywnie na częstotliwość kliknięć użytkowników w mediach społecznościowych. Jakość oraz dobra konwersja wpływa pozytywnie na wartość EdgeRank naszej strony na Facebooku, ale o nim następnym razem.

FacebookTwitterGoogle+LinkedIn