Połączenie potencjału Facebooka i Twittera ze stroną internetową może zapewnić jeszcze większy wzrost ruchu i zysków. Takim spoiwem pomiędzy nimi mogą być znaczniki Open Graph. To dzięki nim zyskujesz kontrolę nad tym, jak wyglądają linki udostępniane w social mediach, dotyczące Twojej strony czy sklepu online. Sprawdź zatem, jak w kilku krokach wdrożyć protokoły Open Graph na swojej witrynie.

Artykuł odpowiada na pytania:

• Czym są znaczniki Open Graph i dlaczego warto je wdrożyć?
• W jaki sposób wdrożyć znaczniki Open Graph na swojej stronie internetowej?
• W jaki sposób przetestować wdrożone znaczniki Open Graph za pomocą testera?

Open Graph – co to jest?

Open Graph są meta tagami opracowanymi w 2010 roku przez Facebooka. Obecnie wykorzystywane już nie tylko na potrzeby Facebooka, ale też innych mediów społecznościowych. Ich zadaniem jest integracja pomiędzy stroną internetową a social mediami. Znaczniki Open Graph sprawiają, że zyskujesz kontrolę nad wyglądem linków, jakie wyświetlane są na portalach społecznościowych. Możesz wybrać dokładny tytuł, opis oraz zdjęcie, jakie będzie wyświetlane tuż obok linku, co ma zachęcić kolejnych użytkowników do przejścia na Twoją witrynę.

Protokoły Open Graph w praktyce

Przejdźmy teraz do części praktycznej, aby dowiedzieć się, jak wdrożyć protokoły Open Graph. Gdy chcesz czerpać korzyści związane z zastosowaniem tych meta tagów, musisz dokonać kilka zmian w kodzie strony. Nie obawiaj się, cały proces jest naprawdę bardzo łatwy. Jeśli masz stronę internetową na WordPressie, możesz wykorzystać w tym celu wtyczkę Yoast SEO.

Bez wtyczki musisz jedynie przejść do kodu źródłowego witryny i do sekcji , aby dodać meta tag, który będzie wyglądał następująco:

Znacznik og:title to jedynie przykład, dotyczący wyświetlanego tytułu, poniżej znajdziesz także inne rodzaje znaczników oraz podpowiedzi, jak zmienić kod w zależności od tego, jakie znaczniki chcesz dodać lub zmienić.

Znaczniki Open Graph

Wśród podstawowych znaczników Open Graph możemy wyróżnić:

og:title – znacznik odnosi się do tytułu strony, gdzie prowadzi link. Możesz utożsamiać go trochę z meta title (wyświetlany w wyszukiwarce internetowej), gdyż w obu przypadkach zachęcają do kliknięcia linku i nie mogą być zbyt długie. Najlepiej, żeby og:title miał nie więcej niż 40-60 znaków ze spacjami (ze względu na urządzenia mobilne lepiej trzymać się granicy 40 znaków) oraz ściśle dotyczył zawartości strony.

Przykład znacznika Open Graph title:

og:url – ten znacznik informuje o tym, na jaki adres URL zostanie przekierowany użytkownik, gdy kliknie link lub post. Wystarczy, że skopiujesz adres strony i umieścić go w następujący sposób:

og:type – kolejnym znacznikiem Open Graph, jaki warto dodać na każdą stronę jest og:type.

Określa rodzaj udostępnianej treści. Informuje o tym, czy link dotyczy:

• artykułu – article;
• piosenki – music.song;
• profilu danej osoby – profile;
• filmu – video.movie;
• strony internetowej – website lub blog;
• aktorów – video:actor;
• firmy – company lub konkretnie bar, hotel, cafe, restaurant;
• miejsca – city, country;
• książki – book.

Sprawdź pełną listę tagów, jakie możesz dopasować do linku, a także określ ich jeszcze bardziej szczegółowe parametry – przejdź w tym celu na stronę internetową ogp.me/#type.

Przykładowy kod będzie wyglądał następująco:

Jako ciekawostkę dodam, że jeśli nie dodasz tego znacznika, to Facebook domyślnie odznaczy Twój link jako stronę internetową (website).

og:image – to jeden z najważniejszych znaczników, który ma realny wpływ właśnie na budowanie atrakcyjności postu, wyświetlanego w social mediach. Dlatego bardzo ważne staje się to, abyś wybrał zdjęcie, które przyciągnie uwagę, zostało wykonane w wysokiej jakości, a także będzie ściśle powiązane z tematem. Jeśli zignorujesz dodanie adresu zdjęcia, to Facebook lub inne portale społecznościowe mogą wybrać losowe zdjęcie za Ciebie bądź też w ogóle nie wczytają zdjęcia.

Przykładowy kod będzie prezentował się w tym przypadku w następujący sposób:

Nie wiesz, skąd zabrać adres URL zdjęcia, aby prawidłowo uzupełnić znacznik image? Metod jest sporo, ale tym razem podzielę się z Tobą dwoma najczęściej stosowanymi.

Po pierwsze możesz skopiować zewnętrzny link do zdjęcia, np. przechodząc na stronę pixabay.com, gdzie dostępne są zdjęcia na darmowej licencji. Wybierz tam zdjęcie, które znajdzie się na stronie np. w artykule, a następnie kliknij prawym przyciskiem myszy i kliknij opcję „Kopiuj adres zdjęcia”. Następnie wklej link do meta tagu.

Drugą metodą jest dodanie zdjęcia na własny serwer. W przypadku strony internetowej na WordPressie możesz przejść do sekcji „Media”, a następnie znajdź zdjęcie, które zostało już użyte na stronie lub dodaj nowe. Po wybraniu zdjęcia ukażą Ci się szczegóły załączonego pliku, a z prawej strony rubryka pt. „Adres URL pliku” z adresem URL zdjęcia. Skopiuj go i wklej do meta tagu.

og:description – kolejnym znacznikiem Open Graph jest description, czyli opis. Słusznie kojarzony z meta description, który wyświetla się w wynikach wyszukiwarki. Jednak tym razem treść znacznika pojawia się w mediach społecznościowych. Jeśli chcesz zaoszczędzić czas, możesz po prostu skopiować meta description i w obu miejscach użyć tego samego tekstu.

Pamiętaj, jednak, aby:

• tekst zachęcał do kliknięcia linku, najlepiej, aby był napisany językiem korzyści;
• ściśle wiązał się z linkiem;
• najlepiej też, aby nie był zbyt długi, gdyż zostanie ucięty, na Facebooku długość tekstu nie powinna przekraczać ok. 200 znaków ze spacjami.

Przykładowy znacznik Open Graph description:

Wszystkie powyższe znaczniki Open Graph koniecznie dodaj do każdej podstrony, którą teraz lub w przyszłości będziesz udostępniać w social mediach. Pamiętaj, że znaczniki powinny znaleźć się na Twojej stronie, nawet jeśli nie prowadzisz profili firmowych w mediach społecznościowych. Będą odgrywały one swoją rolę także wtedy, gdy inni użytkownicy udostępnią na Facebooku czy Instagramie link do Twojej strony lub sklepu.

Dodatkowe znaczniki Open Graph

Oprócz powyższych meta tagów zyskujesz możliwość zastosowania również wielu innych znaczników, takich jak np.:

• informacje kontaktowe – możesz wskazać różne dane kontaktowe, takie jak e-mail, adres, nazwa kraju, kod pocztowy, numer telefonu oraz numer faxu, wtedy użyj kodu , wartość „:email” możesz podmienić na –:street_adress, :postal_code, :locality, :country_name, :phone_number, :fax_number;
• dodaj do linku plik audio – wykorzystaj w tym celu znacznik og:audio;
• wskaż język strony – og:locale, w jako content wpisz “pl_PL”.

Jak dodać znaczniki Open Graph na WordPressie?

Jak już wcześniej pisaliśmy, żeby ułatwić sobie proces dodawania protokołów Open Graph na swojej stronie internetowej na WordPressie, możesz wykorzystać w tym celu wtyczkę Yoast SEO. Nie każdy wie, że ten plugin nie tylko świetnie sprawdza się do optymalizacji treści na stronie, ale też właśnie do dopracowania znaczników wykorzystywanych przez social media. Już nie musisz znać się na kodzie i ryzykować awarii strony.

Po prostu zainstaluj wtyczkę i postępuj według poniższych wskazówek:

• Edytuj wybraną stronę, produkt czy wpis na blogu;
• Zjedź na sam dół, gdzie na pewno od razu zobaczysz sekcję pt. „Yoast SEO”;
• Następnie przejdź do zakładki „Media społecznościowe”, gdzie uzyskasz możliwość dodania tytułu, opisu i zdjęcia, które będą wyświetlane przy linku, prowadzącym do tej konkretnej strony czy wpisu blogowego;
• Po uzupełnieniu wszystkich rubryk i dodaniu zdjęć kliknij przycisk „Aktualizuj”;
• Yoast SEO umożliwia dostosowanie znaczników Open Graph zarówno dla Facebooka, jak i dla Twittera.

Open Graph na Twitterze

Meta tagi Open Graph są wykorzystywane nie tylko na Facebooku, ale też na wielu innych portalach społecznościowych. Niekiedy mogą one jednak mieć nieco inną formę. Dobrym przykładem jest Twitter, który owszem, automatycznie ładuje standardowo używane Open Graph, ale posiada też nieco odrębny zestaw meta tagów, spersonalizowany typowo pod specyfikę Twittera.

Zatem, jeśli Twitter jest Twoim głównym portalem społecznościowym, gdzie gromadzi się grupa docelowa Twojej firmy, to więcej korzyści zyskasz, gdy wdrożysz odrębne znaczniki, takie jak:

• twitter:card – to rodzaj treści, jaka jest udostępniana na Twitterze, do wyboru masz 4 rodzaje treści – Player Card (posty z muzyką lub filmami), App Card (przeznaczone do szybszego pobrania aplikacji mobilnej, Summary Card (dotyczy innych rodzajów postów) oraz Summary Larg Image (dotyczy różnych typów publikacji, a dodatkowo wyświetla duże zdjęcie);
• twitter:title – oznacza dokładnie to samo co znacznik og:title;
• twitter:description – oznacza to samo co og:description;
• twitter:site – ukazuje nazwę konta strony wykorzystywaną na Twitterze;
• twitter:image – możesz wskazać, jakie zdjęcie ma wczytać Twitter przy poście, waga obrazka nie może przekraczać 1 MB.

Przykładowy kod powinien mieć postać:

Dlaczego warto wdrożyć Open Graph na stronie?

Zyskaj kontrolę nad tym, co wyświetlają social media
Szczególnie w sklepach internetowych Open Graph pełni bardzo ważną funkcję. Użytkownicy chętnie dzielą się linkami do produktów, które polecają na grupach na Facebooku czy w komentarzach na Instagramie bądź Twitterze. Twoim zadaniem jako sprzedawcy jest sprawić, aby link do produktu czy grupy produktów był maksymalnie zachęcający. Dlatego dodaj zdjęcie, tytuł, opis dokładnie takie, jakie są zgodne ze strategią contentową Twojej marki i potrzebami Twojej grupy docelowej.

Wzrost ruchu na stronie
Dobrze dopracowane znaczniki Open Graph sprawiają, że użytkownicy chętniej klikają link. To z kolei sprawia, że generujesz ruch na swojej stronie czy w sklepie online. Pamiętaj, aby nie spocząć na laurach, gdyż później duże znaczenie będą odgrywały zasady UX, a także wysokiej jakości zdjęcia produktów oraz opis produktów napisany językiem korzyści. Dzięki temu wzrost ruchu przełoży się też na wzrost zysków.

Częstsze udostępnianie linków
Atrakcyjne linki pod względem wizualnym i tekstowym są znacznie częściej udostępniane w Social Mediach. Zatem stosując znaczniki Open Graph, możesz bez ponoszenia kosztów zwiększyć zasięg swojej marki, sklepu czy produktów.

Tester Open Graph – sprawdź, czy dobrze wdrażasz meta tagi

Jeśli chcesz, możesz sprawdzić, czy prawidłowo wdrażasz znaczniki Open Graph. Nie potrzebujesz do tego płatnych narzędzi, po prostu wklej adres URL strony, którą chcesz przetestować, na poniższe portale:

• tutaj sprawdź poprawność znaczników na Facebooku – https://developers.facebook.com/tools/debug/
• poprawność znaczników na Twitterze – https://cards-dev.twitter.com/validator
• poprawność znaczników na LinkedIn – https://developers.pinterest.com/tools/url-debugger/
• poprawność znaczników na Pinterest – https://developers.pinterest.com/tools/url-debugger/

Dla przykładu kliknij pierwszy link, żeby zobaczyć, w jaki sposób przedstawiane są znaczniki Open Graph na Facebooku. Wklej adres URL strony, którą później chcesz udostępnić i kliknij przycisk „Debug”. Przejdź niżej do sekcji pt. „Based on the raw tags, we constructed the following Open Graph properties”, która odnosi się właśnie do tego, jak będą prezentowały się zapisane przez Ciebie wcześniej znaczniki. Sprawdź, czy teksty nie mają błędów, czy dobrze został określony rodzaj strony, a także skopiuj link do zdjęcia i upewnij się, że ma ono dobrą jakość i pasuje do strony.

Innym sposobem przetestowania znaczników Open Graph będzie zainstalowanie rozszerzenia do przeglądarki Google Chrome – Open Graph Preview. Wykonaj taki test najlepiej, jeszcze zanim udostępnisz jej link w mediach społecznościowych. Dzięki temu zyskasz pewność, że maksymalnie wykorzystujesz potencjał, jaki zapewniają protokoły Open Graph.

 

Poszukujesz agencji SEO w celu wypozycjonowania swojego serwisu? Skontaktujmy się!