Jak wdrożyć Meta Tagi Open Graph dla Facebooka

15.10.2019 Angelika Siczek
ikonki Facebooka wewnątrz szklanych baniek

Prowadzenie firmy bez jej obecności na Facebooku jest ogromnym utrudnieniem dla przedsiębiorcy. Doświadczenia wskazują, że wielu użytkowników poszukuje informacji na temat przedsiębiorstwa właśnie z portali społecznościowych. Posiadanie profilu facebookowego jest więc niezwykle istotne do budowania swojej widoczności w sieci oraz do kreowania wizerunku eksperta w danej branży. Co więcej, konto na Facebooku umożliwia kontaktowanie się ze sowimi klientami, nawiązywanie interakcji, uzyskiwanie feedbacku i opinii na temat oferowanych produktów lub usług. Dzięki takiemu działaniu bez większego wysiłku można uzyskać cenne informacje istotne w prowadzeniu i niezbędne do rozwijania firmy.

Jeśli prowadzisz już swój firmowy profil na Facebooku warto przyjrzeć się kwestii Open Graph. Jest to protokół, który umożliwia integrację innych serwisów internetowych z Facebookiem. Gwarantuje kontrolę nad prezentacją Twoich treści w serwisie społecznościowym, zapewniając lepsze interakcje z użytkownikami. Zobacz, w jaki sposób wykorzystać znaczniki Open Graph.

Meta tagi Open Graph dla Facebooka

Do czego służy Open Graph?

Jak już wspomnieliśmy, dzięki protokołowi Open Graph otrzymujesz kontrolę nad tym, w jaki sposób użytkownicy Twojego profilu widzą udostępniane przez Ciebie treści. Zarówno z samego profilu social media, jak i z Twojej strony www. Protokół stworzono po to, aby ułatwić integrację wszystkich serwisów internetowych z Facebookiem tak, aby z łatwością dzielić się treściami zamieszczonymi na stronach, a nie tylko tymi wstawianymi bezpośrednio w formie facebookowych postów.

Jak wygląda Open Graph? Jest to zestaw specjalnych znaczników, które należy umieścić w sekcji head  strony internetowej. Ich zadaniem jest precyzyjne opisanie tego, co znajduje się na danej stronie i sprawienie, że treść będzie widoczna w mediach społecznościowych. Dzięki nim, jeśli użytkownik wejdzie na stronę Twojej firmy i zechce podzielić się znajdującą się na niej treścią, np. wpisem blogowym, wystarczy, że kliknie facebookowy znaczek „lubię to” lub „podziel się” i dana treść ukaże się na jego tablicy na Facebooku.

Protokół stworzono, aby dzielić się różnymi rodzajami treści ze swoich serwisów. Należą do nich wspomniane wpisy blogowe, ale także artykuły, filmiki, zdjęcia, miejsca, osoby czy gry. Umożliwia to zwiększenie zasięgu treści i dotarcie do grona różnych użytkowników. Z rozwiązania Open Graph korzystają też inne media społecznościowe. W tym przede wszystkim LinkedIn, Google+, Instagram i Twitter, który posiada także własne meta tagi – Twitter Cards.

Dlaczego warto skorzystać z meta tagów Open Graph?

Wiadomo, że media społecznościowe w dużej mierze generują ruch w całej sieci. To dzięki nim firmy zyskują nowych klientów, zaciekawiając ich zamieszczanym contentem, chwaląc się swoimi osiągnięciami i prezentując działanie swojej firmy „od kuchni”, ukazując ludzkie oblicze biznesu.

Prezentacja różnego rodzaju treści na Facebooku jest więc bardzo ważną składową prowadzenia firmy. Ogromne znaczenie ma także odpowiednie zaplanowanie publikacji treści. Nie powinno robić się tego w przypadkowy sposób. Lepiej przygotować odpowiednią strategię i harmonogram. W planie należy wziąć pod uwagę także wyświetlanie się materiałów marki na tablicach użytkowników. Zwiększa ono częstotliwość kliknięć w link zewnętrzny, który przeniesie odbiorcę na stronę docelową. Warto więc tworzyć treści tak, aby zachęcały potencjalnego klienta do podzielenia się nimi na Facebooku. Dzięki temu istnieje duża szansa, że inni użytkownicy (znajomi) także zainteresują się udostępnioną treścią i wejdą na naszą stronę. A w końcu na tym każdemu przedsiębiorcy zależy najbardziej.

Które tagi Open Graph są najważniejsze?

Pierwszym niezwykle ważnym tagiem OG jest title. Zgodnie z nazwą jest on tytułem, czyli największym nagłówkiem na tablicy Facebooka. To często on najbardziej przykuwa uwagę użytkownika. Warto więc stworzyć go w taki sposób, by był chwytliwy i budził zainteresowanie. Istnieje szereg strategii, które sprawdzają się przy tworzeniu takich nagłówków. Między innymi możesz zastosować tzw. lukę informacyjną. Podać jedynie część informacji i tym samym skłonić użytkownika do wejścia na stronę, by dowiedział się więcej. Pamiętaj, że stworzone hasło musi nieść ze sobą obietnicę, która zostanie spełniona po przeniesieniu na stronę docelową. Zwróć więc uwagę, żeby nagłówek był adekwatny do prezentowanej treści.

Struktura og:title: <meta property=”og:title” content=”Twój interesujący tytuł” />

Kolejnym ważnym tagiem Open Graph jest og:url. To znacznik, który zawiera link do serwisu, w którym znajduje się content, który ma być dostępny dla użytkownika. Dzięki temu tagowi, po kliknięciu, odbiorca przeniesie się na stronę docelową.

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

Tagiem, który określa rodzaj prezentowanej treści jest OG type. Dzięki niemu wiadomo, czy jest to artykuł, wpis blogowy, konkretna strona internetowa, filmik, czy obrazek lub inny rodzaj treści. Istnieją różne typy, które możesz wykorzystać na swojej stronie. Pamiętaj tylko, aby odpowiednio je przyporządkować.

OG description to bardzo ważny tag, który przypomina description w języku HTML. Jest opisem zawartości strony. Jednak w tym przypadku nie odnosi się do wyszukiwarki internetowej, ale do linku zamieszczonego jako obiekt w serwisie Facebook. W przeciwieństwie do HTML descriptions nie ma wpływu na SEO. Pamiętaj jednak, że jest on pewnego rodzaju reklamą zawartości Twojej stronny, dlatego powinien być ciekawy i wyczerpywać temat, ale także być krótki i prosty w odbiorze.

Struktura og: description: <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 to najważniejszy i zarazem najciekawszy tag w protokole Open Graph. To dzięki niemu możesz znacznie zwiększyć konwersję na swojej stronie. Ustawiając og:image wybierz obraz, który ma być wyświetlany wspólnie z linkiem do danej strony. Zdjęcie powinno być oczywiście wyraźne i przykuwające uwagę użytkownika.

Co, jeśli nie ustawi się image w Open Graph?

W przypadku pominięcia tego kroku Facebook ma dwie możliwości. Albo wyświetli jedynie samą treść, albo pokaże użytkownikowi losowo wybrany obrazek spośród wszystkich widniejących na stronie. Najczęściej jest to pierwszy z nich.

Pamiętaj, że jeśli nie korzystasz z żadnego CMS-a, gdzie możesz użyć gotowej wtyczki do zarządzania prezentacją postów z panelu administracyjnego, musisz ustawić najważniejszy obrazek na podstronie. W tym celu możesz wykorzystać zupełnie nowe zdjęcie, którego nie ma na danej podstronie. Dzięki temu, jeśli dobierzesz je odpowiednio, zainteresujesz swojego odbiorcę w social mediach.

Na jakie obrazy postawić? Najlepiej sprawdzają się te w rozdzielczości ratio 1.91/1, np. 1200 x 627 px,  w limicie wielkości do 5 MB. Jeśli wybierzesz zdjęcia mniejsze niż 400 x 209 px to miniaturka w wyświetlanym obiekcie będzie niewielka. Spowoduje to, że nie będzie wyglądać estetycznie i nie przyciągnie wzroku użytkownika. Pamiętaj też, że jeśli na obrazku chcesz zamieścić slogan, warto ustawić go na środku. To ważne, ponieważ Facebook często przycina obrazki po równo z każdej strony. Jeśli więc Twój napis będzie z boku, może nie wyświetlać się w całości.

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

 

Jak podczas wyświetlania wygląda kolejność tagów Open Graph?

Na samej górze użytkownik widzi zdjęcie, czyli og:image. Pod zdjęciem znajduje się nagłówek (tytuł) napisany większym niż reszta treści fontem. To og: title. Tuż pod nim znajduje się treść mniejszego rozmiaru, przedstawiająca zawartość strony. Jest to og: descriptions. A na samym końcu widoczny jest adres linku docelowego, czyli og:url.

Jeśli zależy Ci większych możliwościach prezentacji postów, skorzystaj z zaawansowanych tagów Open Graph. Umożliwią Ci one zdefiniowanie języka, dodanie dodatkowych mediów na stronie i połączenie Twojej witryny z facebookową aplikacją.

Wśród nich znajdziesz:

1. og: locale – odowiada za zdefiniowanie języka strony (domyślnie amerykański angielski),

2. og: audio i og:video – umożliwia dodanie dodatkowych mediów na stronie,

3. fb:app_id – tag, który łączy stronę www z aplikacją Facebooka.

Jak sprawdzić, czy tagi Open Graph działają prawidłowo?

Ustawiłeś już swoje wybrane tagi, ale chcesz upewnić się, czy wszystko działa tak, jak powinno? Aby umożliwić Ci to zadanie Facebook udostępnił użytkownikom narzędzie Open Graph Object Debugger. Dzięki niemu możesz podglądać ustawione już tagi. Są one przedstawione jako gotowy obiekt Facebooka. Jeśli nie posiadasz tego narzędzia podczas zmiany np. obrazka dla danej strony, wyświetla się stara grafika. Natomiast, gdy skorzystasz z Debugger’a, na portalu społecznościowym powstanie nowy obiekt dla Twojego linku.

Narzędzie zawiera też wiele wskazówek odnośnie tego, jak ustawić tagi. Wskazuje, na podstawie tego, co jest już ustawione, jak powinno wyglądać i co ewentualnie trzeba poprawić. Co więcej, Open Graph Object Debugger czyści cache na Facebooku.

Odpowiednia strategia planowania działań na Facebooku w połączeniu z protokołem Open Graph pozytywnie wpływa na wzrost konwersji. Zwiększa się liczba i częstotliwość kliknięć użytkowników mediów społecznościowych w linki. Ponadto wysoka konwersja dobrze wpływa na wartość Twojego profilu w Edge Rank (ER), czyli na algorytm, decydujący o widoczności Twojej firmy w rankingu mediów społecznościowych. Warto więc poświęcić uwagę na dopracowanie znaczników OG. Zainwestowany czas z pewnością zwróci Ci się w postaci nowych użytkowników Twojego profilu.

Cyfrowe newsy / Bądź na bieżąco

Od początku 2022 roku wchodzimy w skład Unity Group. Teraz zapisując się do naszego newslettera, będziesz na bieżąco z informacjami całej naszej organizacji.

    Wypełniając formularz wyrażasz zgodę na wysyłkę newslettera przez Unity S.A. z siedzibą we Wrocławiu. Zgodę możesz wycofać w każdej chwili. Więcej informacji na ten temat znajdziesz w naszej polityce prywatności.

    *Wymagane

    Andrzej-kurs-programowania

    Andrzej Szylar

    Chief Executive Officer

    E-mail:

    a.szylar@global4net.com
    Magda2

    Magdalena Paczyńska-Kamienik

    HR Manager

    Aleksandra

    Aleksandra Bielawska-Clegg

    HR Business Partner

    E-mail:

    Michal

    Michał Duława

    New Business Developer

    E-mail:

    Katarzyna

    Katarzyna Zajchowska

    Marketing Partner

    E-mail: