29 / 11 / 2016 Developers

Meta Tagi Open Graph dla Facebooka

Czym jest Open Graph?

Jest to protokół, dzięki któremu jesteśmy w stanie ingerować w prezentacje naszych treści w serwisie Facebook wykorzystując sekcję <meta> 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.
<meta property=”og:title” content=”Twój ciekawy tytuł” />
  • og:url
    Jest to link do serwisu, na 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ł 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
<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. Za pomocą poprawnego wykorzystywania tego narzędzia możemy mocno zwiększyć swoją konwersję.

Meta Tagach Open Graph dla Facebooka (1)
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. 1200×627 [px]. Limit wielkości to 5MB. Jeżeli nasze zdjęcie będzie mniejsze niż 400×209 [px] 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.

Meta Tagach Open Graph dla Facebooka (2)
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