Open Graph – jak i po co wdrożyć go na stronie internetowej?

Kategoria:

Opublikowane: 14-10-2021

Czas czytania

: 7 min

Udostępnianie treści w mediach społecznościowych to świetny sposób na zwiększenie zasięgów. Jak jednak zadbać o to, aby Twój content w social media, który jest powiązany ze stroną internetową, prezentował się jak najlepiej? Z pomocą przychodzi open graph. W tym artykule dowiesz się, czym jest, dlaczego warto z niego korzystać oraz jak go wprowadzić na swojej stronie.

Open graph – co to jest?

Tagi open graph (w skrócie OG) zostały wprowadzone przez Facebooka w 2010 roku. Ich celem było ułatwienie integracji treści zawartych na stronie internetowej z najpopularniejszą platformą społecznościową na świecie.

Dzięki open graph właściciel strony ma pełną kontrolę nad tym, jak content z jego witryny będzie prezentował się w social media, gdy jest on tam udostępniany. Oprócz tego tagi te umożliwiają dodanie na witrynie takich funkcji jak „like”, „share” oraz zliczanie tego typu interakcji z treścią. Tagi open graph nie są stosowane jedynie przez Facebooka – korzystają z nich inne znane serwisy społecznościowe, jak Twitter czy LinkedIn.

Z technicznego zaś punktu widzenia open graph to kawałek kodu, który znajduje się w sekcji <head> danej strony internetowej. Poprzedzony jest on właściwością og:.

Tagi open graph – dlaczego warto z nich korzystać?

Jeśli komuś spodobał się content zawarty na Twojej stronie, zapewne będzie chciał go udostępnić. Warto maksymalnie ułatwić ten proces i zadbać o to, aby taka treść w social media prezentowała się najlepiej, jak to możliwe. Oprócz tego stosowanie OG pozwala lepiej zrozumieć platformie społecznościowej, czego dotyczy dany content, dzięki czemu istnieje większa szansa, że zostanie on zarekomendowany odpowiednim osobom.

Warto także pamiętać o tym, że OG pomaga przy tworzeniu atrakcyjnych miniaturek, gdy link do contentu zostanie przesłany w bezpośredniej wiadomości za pomocą takich komunikatorów jak Messenger, WhatsApp, iMessage czy Slack.

Co się jednak dzieje, gdy Twoja strona nie korzysta z tagów open graph? Poszczególne platformy społecznościowe postarają się samodzielnie zaciągnąć odpowiednie informacje, aby zaprezentować ów content. Nie będzie to oczywiście wyglądać tragicznie, jednak tracisz wtedy okazję na zaprezentowanie treści w taki sposób, jaki chcesz.

Podstawowe tagi Open Graph

Jeśli zamierzasz implementować na stronie OG, powinieneś wiedzieć, które z nich należy obowiązkowo określić. Przyjrzyjmy się im bliżej.

og:title

Bardzo ważny tag, gdyż to właśnie on decyduje o tym, jak będzie prezentować się tytuł contentu w mediach społecznościowych. Jego odpowiednikiem jest metatag title w kodzie HTML strony. Pamiętaj, że dzięki temu osobnemu tagowi tytuł artykułu w mediach społecznościowych może być inny od tego domyślnego określonego na stronie. Warto wykorzystać tę możliwość, pamiętając o tym, że poszczególne social media mają różne limity dotyczące długości tytułów.

og:url

Kolejny tag jest odpowiedzialny za ustawianie kanonicznego adresu URL strony. Zadbaj o konfigurację tego elementu, jeśli Twój URL ma różne parametry.

og:type

Za pomocą og:type określasz rodzaj udostępnianego contentu. Zwykle będzie to strona – Facebook open graph właśnie w ten sposób uzupełnia ów tag, jeśli nie zostanie on ustawiony. Do wyboru masz jednak pod tym względem sporo możliwości jak książka, gra, miasto, kraj, aktor, polityk, firma, restauracja i wiele więcej. Pełną listę tego typu tagów znajdziesz tutaj.

og:description

og:description to odpowiednik standardowego tagu meta description. Odpowiada on zatem za to, jak będzie prezentować się krótki opis zawartości linkowanej strony. Podobnie jak w przypadku og:title, funkcjonuje on samodzielnie, dzięki czemu opis w social media może być inny od tego głównego.

og:image

Bardzo ważny element, gdyż to właśnie on odpowiada za to, jaki obrazek będzie powiązany z publikowanym contentem. Jak już wspomniano w przypadku kilku poprzednich tagów, gdy nie zostaną one określone, platformy społecznościowe są po części w stanie w miarę sprawnie same zaciągnąć odpowiednie dane.

Nie jest tak jednak w przypadku tego tagu open graph. Platformy społecznościowe wybierają nieraz zupełnie dowolne zdjęcie z tych, które znajdują się w linkowanym adresie URL. W efekcie może to być losowy wykres, baner z paska bocznego czy screenshot. Taki stan rzeczy na pewno nie wpłynie pozytywnie na odbiór treści. Rozmiar zdjęcia określonego przez ten tag nie może przekraczać 8 MB. Zalecane rozdzielczości to 1200 x 630 oraz 600 x 315.

Dodatkowe tagi Open Graph

Choć nie są konieczne, to warto w niektórych przypadkach dodać także poniższe tagi.

og:locale - tag ten określa język użyty na danej stronie internetowej np. en_UK.
og:audio lub og:video - jeśli dany content przyjmuje postać podcastu lub materiału video, warto to zaznaczyć, stosując omawiany tag.
og:site_name - główna nazwa strony, na której znajduje się content. Warto skorzystać z tego tagu open graph, gdy zamierzasz tworzyć konkretną markę powiązaną z np. swoim blogiem i chcesz mieć pewność, że jego prawdziwa nazwa będzie odpowiednio promowana.

Jak wdrożyć Open Graph?

Tagi open graph to prosty kawałek kodu, który można dodać ręcznie. Jeśli jednak korzystasz z popularnych CMS-ów lepiej w tym celu wspomóc się specjalnymi rozszerzeniami, które znacznie ułatwiają i przyśpieszają ten proces. Jeśli napotkasz jakieś problemy podczas implementacji open graph, pamiętaj, aby zajrzeć do dokumentacji technicznych od twórców omawianych rozszerzeń. Sprawdź także porady od twórców platformy społecznościowej, do której chcesz dodać powiązane tagi (tutaj znajdziesz np. wytyczne dotyczące Twittera).

WordPress – Yoast SEO

Popularne rozszerzenie do WordPressa, ułatwiające optymalizację SEO, pomoże Ci także przy implementowaniu open graph. Wersja premium omawianego pluginu dodaje opcję podglądu tego, jak wprowadzenie wybranych tagów wpłynie na ostateczną prezentację contentu na danej platformie społecznościowej.

Joomla – JFBConnect

Omawiane rozszerzenie dostarcza bogatych funkcji do integracji najpopularniejszych platform społecznościowych, jak Facebook, Twitter, LinkedIn, Instagram, Windows Live i wiele więcej. Znajdziesz w nim także przydatne narzędzia jak Auto Posting, Social Posting i ponad 50 gotowych widżetów.

PrestaShop – Prestashop Facebook Open Graph Tags

W przeciwieństwie do poprzednich CMS-ów, w przypadku PrestaShop trudno znaleźć wiele rozszerzeń stworzonych z myślą o open graph. Omawiany plugin pomoże Ci w ich implementacji pod kątem Facebooka.

Jak sprawdzić dodane tagi Open Graph?

Dodanie samych tagów to nie wszystko. Dobrze mieć pewność, że prezentują się one tak, jak chcesz. W tym celu także warto skorzystać z odpowiednich narzędzi.

Facebook Sharing Debugger pozwala to zrobić w przypadku tytułowej platformy społecznościowej. Wprowadź wybrany adres URL, a narzędzie przedstawi Ci listę błędów oraz zawrze sugestie, jak je naprawić. W ten sposób uzyskasz też podgląd tego, jak link będzie prezentował się przy udostępnieniu na Facebooku. Facebook Debugger znajdziesz tutaj.

Warto też skorzystać z funkcji Scrape Again. Załóżmy, że zaktualizujesz tytułowe zdjęcie artykułu. Facebook jednak nie wykrywa tej zmiany od razu. Gdy klikniesz Scrape Again, treści zostaną odświeżone i przy ich udostępnianiu na platformie zmiana będzie już odzwierciedlona.

Oprócz omówionego Facebook Sharing Debuggera istnieją także Twitter Card Validator oraz LinkedIn Post Inspector.

Open graph – podsumowanie

Open graph to świetny sposób na zadbanie o jakość Twoich treści w mediach społecznościowych. Dzięki licznym narzędziom implementowanie tych tagów nie musi być trudne. Warto zatem skorzystać z tego rozwiązania.