W jaki sposób wykorzystać tagi Open Graph, aby zwiększyć ruch na stronie internetowej

6 min
Zaktualizowano:

Pracujesz z domu?  Zobacz, jakie narzędzia marketingowe mogą pomóc Ci pozostać w kontakcie z klientami i prowadzić biznes online. Pozyskuj leady, zdobywaj klientów, sprzedawaj więcej – gdziekolwiek jesteś, kiedykolwiek chcesz.

Biorąc pod uwagę drastyczny spadek zasięgu Facebooka w ostatnim roku, któż nie chciałby odzyskać części inwestycji w działania marketingowe na tym kanale?

Dzięki meta tagom Open Graph możesz zwiększyć ruch z Facebooka nawet o 50-250%!

Zanim przejdziemy do sposobu implementacji meta tagów Open Graph, przyjrzyjmy się korzyściom jakie przyniosły niektórym firmom:

  • Tumblr zwiększył ruch z Facebook o 250% po wdrożeniu protokołu OG.
  • Neil Patel zwiększył ruch z Facebook o 174%
  • Kobo (serwis internetowy poświęcony ebookom) zwiększył ruch o 50%

Co to są tagi Open Graph?

W zasadzie, tagi Open Graph są to meta tagi stosowane w mediach społecznościowych. Facebook stworzył protokół mikrodanych OG w 2010 r. Stanowi on część struktury oznaczania danych w wyszukiwaniu w socjogramie Facebooka. Jednak jego zastosowanie wykracza daleko poza wyszukiwanie w socjogramie.

Jest jedna podstawowa różnica pomiędzy tagami Open Graph a tradycyjnymi meta tagami – słowa kluczowe. Tagi Open Graph są kierowane do ludzi, nie botów, dlatego nie trzeba poświęcać tak wiele czasu na ich dobieranie (jak w przypadku meta tagów dla wyszukiwarek internetowych).

Optymalizacja słów kluczowych dla tagów OG nie jest obowiązkowa, weź jednak pod uwagę następującą kwestię: treści umieszczone w mediach społecznościowych są coraz częściej rejestrowane przez wyszukiwarki, dlatego warto również optymalizować wpisy w mediach społecznościowych. Należy to jednak robić delikatnie… bardzo delikatnie.

technology-1024x682

Co robią tagi Open Graph?

Tagi Open Graph pozwalają na kontrolę sposobu, w jaki wyświetlane są wpisy na Facebook i innych portalach społecznościowych. Możesz za ich pomocą kontrolować sposób w jaki zaprezentowane zostaną obrazy lub video, tworzyć niestandardowe tytuły i opisy postów, określić lokalizację oraz język, a nawet linkować do aplikacji Facebooka, jak np. komentarze. To oczywiście tylko niektóre możliwości protokołu Open Graph.

Dwukrotne lub trzykrotne zwiększenie ruchu z Facebooka jest możliwe głównie dzięki odpowiedniemu zastosowaniu obrazków – sprawienie by wyświetlany był odpowiedni obrazek w rozmiarze, który gwarantuje większą skuteczność. Jedną z ostatnich historii sukcesu może pochwalić się Marmara – firma z branży turystycznej, która zmieniła tag Open Graph „image” z obrazka na video.

Protokół OG oferuje więcej udoskonaleń, więc obrazy nie są jedyną częścią tej historii.

Oto wpis dotyczący wydarzenia bez tagów Open Graph:

mitx-share-fb

A to jest ten sam wpis z zastosowaniem tagów Open Graph:

mitx-event

Kod, który to wszystko umożliwia

Przyjrzyjmy się jak wygląda kod OG. Jeżeli na widok kodu panikujesz, nie martw się – na końcu artykułu umieściłam krótką listę wtyczek, które pomogą Ci go opanować. Dlatego wystarczy, że spojrzysz na niego tylko raz.

Oto podstawowe tagi Open Graph oraz ich formatowanie dla pliku video:

<meta property=”og:title” content=”The Matrix” />

<meta property=”og:type” content=”video.movie” />

<meta property=”og:image” content=”http://content6.flixster.com/movie/11/16/80/11168096_800.jpg” />

<meta property=”og:image:width” content=”800″ />

<meta property=”og:image:height” content=”1200″ />

<meta property=”og:url” content=”http://www.rottentomatoes.com/m/matrix/” />

<meta property=”og:description” content=”Critics Consensus: An ingenious combination of Hong Kong action, ground-breaking Hollywood FX, and an imaginative vision.” />

A tutaj bardziej zaawansowane tagi:

<meta property=”video:release_date” content=”1999-03-31″ />

<meta property=”video:duration” content=”136″ />

<meta property=”video:director” content=”http://www.rottentomatoes.com/celebrity/andy_wachowski/” />

<meta property=”video:actor” content=”http://www.rottentomatoes.com/celebrity/keanu_reeves/” />
Jeżeli chcesz poznać wszystkie możliwości zastosowania tagów OG, odwiedź stronę protokołu Open Graph lub zapoznaj się z dokumentacją tagów Open Graph Facebooka.

5 darmowych wtyczek Open Graph

Jeżeli Twoja strona została zbudowana na silniku WordPressa, możesz wykorzystać jedną z pięciu przedstawionych poniżej darmowych wtyczek, bez konieczności kodowania:

1) WordPress SEO, Yoast

Ta uniwersalna wtyczka SEO ma o wiele więcej do zaoferowania niż obsługa mikrodanych, jednak doskonale nadaje się do dodawania tagów, które sprawią, że Twoje wpisy w mediach społecznościowych zyskają na popularności. Kliknij tutaj i zapoznaj się z dyskusją w jaki sposób optymalizować tagi OG za pomocą WordPress SEO.

2) WP Facebook Open Graph protocol

Jest to popularna wtyczka obsługująca mikrodane, która jest rekomendowana przez Neil’a Patel’a. Obsługuje Facebook, Google+ oraz LinkedIn.

3) webZunder Open Graph Plugin

Ta nowa wtyczka może być warta wypróbowania – została zaprojektowana pod kątem obsługi Google+. Posiada jednak pewną wadę – autorzy zalecają zamknięcie innych wtyczek, które obsługują Google Authorship, Twitter Cards lub tagi Open Graph.

4) WP Open Graph

Ta wtyczka nie była aktualizowana od roku, więc należy ją ostrożnie stosować. Jednak wiele osób mogło ją wykorzystać w momencie, gdy inne zawiodły. Jest o wiele prostsza w obsłudze od pozostałych pluginów wspomnianych w tym artykule. Może być to zaletą, w momencie gdy inne wtyczki Open Graph wchodzą w konflikt z już zainstalowanymi na Twojej stronie.

5) Open Graph Metabox

Czy potrzebujesz jeszcze prostszej wtyczki? Ta jest niemal tak prosta, jak tylko się da. Oferuje interfejs, w którym należy wpisać treści OG, następnie umieszcza je w formie tagów Open Graph na stronie.

Po zdefiniowaniu tagów, użyj Facebookowego debuggera, aby upewnić się, że wszystko wyświetla się prawidłowo.

writing-1024x677

Nie tylko Facebook

Jak już domyśliłeś się z powyższych opisów wtyczek, mikrodane nie dotyczą już wyłącznie Facebooka. Standardowo stosuje je większość platform społecznościowych, niektóre stosują je awaryjnie, jeżeli nie są w stanie odnaleźć odpowiedniego formatu.

Tagi Open Graph w Twitter Cards

Wykorzystanie istniejących tagów Open Graph w Twitter Cards wymaga trochę pracy, jeżeli jednak posiadasz już ustawione tagi OG oszczędzisz czas. Twitter automatycznie użyje tagów Open Graph, jeżeli nie znajdzie tagów preferowanych. Jeżeli Twoje tagi Open Graph zostały ustawione prawidłowo, nie musisz wdrażać Twitter Cards.

Dokumentację Twittera dla tagów Open Graph znajdziesz tutaj:
https://dev.twitter.com/docs/cards/getting-started#open-graph

Narzędzie do walidacji Twitter Cards znajdziesz tutaj:
https://dev.twitter.com/docs/cards/validation/validator

Tagi Open Graph w Pinterest

Jeżeli stosujesz piny rozszerzone na Pinterest, masz pewną przewagę. Możesz w łatwy sposób dostosować tagi Open Graph lub oznaczenie Schema.org do formatu oEmbed, który jest preferowanym formatem Pinterest.

Wszystkie szczegóły dotyczące integracji mikrodanych z pinami rozszerzonymi (przewiń około 40% w dół strony, aby zapoznać się z instrukcją Open Graph oraz przykłady kodu).

Przetestuj swoje strony w walidatorze pinów rozszerzonych, tutaj:
http://developers.pinterest.com/rich_pins/validator/

Tagi Open Graph w Google+

Google preferuje znaczniki mikrodanych Schema.org, jednak obsługuje wybrane tagi open graph (tytuł, obraz oraz opis). Przejdź na stronę Google developer, aby dowiedzieć się w jaki sposób formatować tagi Open Graph dla Google+. Następnie wykorzystaj narzędzie Structured Data Testing Tool, aby upewnić się, że wszystko wygląda prawidłowo.

Teraz posiadasz już podstawowe informacje potrzebne do zastosowania tagów Open Graph. Czy już je zastosowałeś? Czy zaobserwowałeś wzrost ruchu z Facebook na poziomie 50-250%?