Czym jest Open Graph i dlaczego warto wdrożyć go na stronie?
(9 min czytania)
Czym jest Open Graph?
Open Graph to zestaw meta tagów, który umożliwia kontrolowanie, jak strony internetowe prezentują się, gdy są udostępniane na platformach społecznościowych takich jak Facebook, LinkedIn, X czy Pinterest. Dzięki nim możemy określić, jak ma wyglądać podgląd naszej strony, gdy ktoś udostępni do niej link w social mediach.
Meta tagi są fragmentami kodu HTML umieszczonymi w sekcji <head> strony internetowej. Służą do przekazywania różnych informacji o stronie, takich jak jej opis, słowa kluczowe czy informacje o autorze. Tagi Open Graph to specyficzny typ meta tagów, które zaczynają się prefiksem og:.
Początki zastosowania tagów Open Graph sięgają 2010 roku. Wprowadzono je głównie po to, by zintegrować strony www z Facebookiem. Dzięki temu adresy kierowane do kampanii socialmediowych otrzymały właściwy wygląd, który był tożsamy z okienkiem Facebooka. Wreszcie zaczęliśmy mieć kontrolę nad tym, w jaki sposób są wyświetlane informacje na FB, kiedy wpis jest udostępniany.
BRAK OG:
WDROŻONY OG:
Dlaczego warto wykorzystywać tagi Open Graph?
Warto zaznaczyć, że tagi OG nie wpływają bezpośrednio na pozycjonowanie, ale przez to, że zwiększają zasięgi wpisu (bo taki content jest atrakcyjniejszy i zwraca uwagę), są uznawane za ważny element optymalizacji socialmediowej.
Tagi Open Graph mają istotny wpływ na zasięg udostępnianych treści. Im atrakcyjniej będą się prezentowały, tym więcej osób je odwiedzi i poda dalej. Dlatego publikując artykuły czy optymalizując swoje strony, upewnij się, że open graphy są prawidłowo ustawione.
Tagi Open Graph nie wpływają na SEO – to jest jasne. Dlaczego więc zawsze zalecam ich optymalizację? Prowadząc projekty, zależy mi na tym, aby serwis odniósł możliwie jak największy sukces. Dlaczego więc nie skorzystać ze zoptymalizowanych tagów Open Graph, które niewątpliwie przyczyniają się do wzrostu liczby odwiedzin strony poprzez realny wpływ na sposób wyświetlania się stron na Facebooku czy Twitterze? Pamiętajmy, że kanały social media są jednym ze sposobów dystrybucji treści, a tworząc wartościowy content na stronie, należy korzystać ze wszystkich możliwych metod jej promowania.
Martyna Zagórska, SEO Manager w adCookie
Dzięki tagom Open Graph mamy kontrolę nad tym, co widzą użytkownicy. Możemy określić tytuł, opis i grafikę, które będą widoczne, gdy link do naszej strony zostanie udostępniony. Kierowanie użytkowników na stronę po kliknięciu obrazu to kolejna ważna zaleta. W przeciwieństwie do zwykłych obrazków dołączonych do postów w mediach społecznościowych, tagi OG zapewniają, że każde kliknięcie przenosi użytkownika bezpośrednio do twojej strony.
Ponadto, posty z linkami zawierającymi tagi Open Graph często zajmują więcej miejsca w pionie na feedzie użytkowników. Większa przestrzeń oznacza większe szanse na zwrócenie uwagi odbiorców.
Rodzaje protokołów Open Graph
Istnieją różne rodzaje tagów Open Graph, dzięki czemu udostępniane strony mogą wyświetlać się w różnorodny sposób i być jeszcze skuteczniejsze. W tym miejscu znajdziesz pełną listę protokołów do wykorzystania.
Tymczasem przejdźmy do opisania tych najważniejszych:
Obowiązkowe tagi Open Graph
og:title
og:title to tytuł danej podstrony. Zwykle ma taką samą wartość jak tag meta title konkretnej strony. Pamiętaj jednak, że dzięki og: title w social mediach możesz wyświetlać inny tytuł, niż ten w Google.
Zalecana długość to 60 znaków.
Przykład użycia:
<meta property="og:title" content=""/>
og:type
og:type to tag do określenia rodzaju udostępnionego materiału. Może to być materiał tekstowy, ale również zdjęcie lub film. Lista rodzajów contentu jest naprawdę długa. Jeśli prowadzisz blog, to w sekcji z treściami zamieścisz tag article, natomiast na pozostałych podstronach – website. Jeśli jednak sam nie ustawisz wartości tego tagu, Facebook uzupełni go domyślną wartością ‘strona’.
Przykład użycia:
<meta property="og:type" content="article"/>
Dla artykułów możesz podać bardziej szczegółowe informacje, takie jak:
- data publikacji artykułu – article:published_time
<meta property="article:published_time" content="2023-11-22T13:37:00+01:00" /
> - data ostatniej modyfikacji - article:modified_time
<meta property="article:modified_time" content="2023-11-22T13:37:00+01:00" /
> - autor artykułu - article:author
<meta property="article:author" content="Jan Kowalski" /
> - kategoria - article:section
<meta property="article:section" content="Technologia" /
> - tag - article:tag
<meta property="article:tag" content="programowanie" /
>
og:url
og:url to tag do ustawiania kanonicznego adresu URL strony. Dzięki niemu możesz zdefiniować niejako sztywny adres witryny z konkretną zawartością w taki sposób, aby właśnie dla niej były zliczane wszystkie dokonane udostępnienia, a także polubienia lub inne reakcje użytkowników.
Przykład użycia:
<meta property="og:url" content="https://www.example.com"/ >
og:description
og:description – tag do opisu zawartości strony internetowej, który zachęca użytkowników do przejścia do konkretnego materiału. Warto w tym przypadku pamiętać o dobrym call to action. Jest odpowiednikiem opisu strony (meta description), ale podobnie jak w przypadku og:title i title tag, funkcjonuje samodzielnie i może się różnić.
Przykład użycia:
<meta property="og:description" content="Opis artykułu zachęcający do kliknięcia i przeczytania całości."/>
og:image
og:image – za pomocą tego tagu ustawiamy konkretne zdjęcie, które w social mediach będzie przykuwało uwagę podczas udostępnień. Im rzetelniej podejdziesz do wyboru tagu image, tym większe szanse na wyższą konwersję.
Pamiętaj!
Idealna rozdzielczość zdjęć dla tagu og:image to 1200 × 630 oraz 600 × 315. Warto wybierać zdjęcia z komunikatem piśmiennym zamieszczonym dokładnie na środku. Facebook lubi ucinać boki miniatur, przez co możesz stracić te z wartości komunikatu, które będą dla Ciebie istotne z punktu widzenia atrakcyjności.
Dodatkowe wartości dla tagu image to:
- og:image:type – jakiego typu jest obrazek, np. JPG, PNG,
- og:image:width – szerokość obrazka w pikselach (px),
- og:image:height – wysokość obrazka w pikselach,
Przykłady użycia:
<meta property="og:image" content="https://www.example.com/ image.jpg"/ > <meta property="og:image:height" content="180" / > <meta property="og:image:width" content="250" / >
Jeśli szukamy sposobu na to, aby nasz content był bardziej zauważalny w social mediach, Open Graph jest czymś, czego nie możemy pominąć, optymalizując swoją stronę. Oprócz podstawowych kwestii technicznych/
wdrożeniowych przy optymalizacji warto pamiętać o kilku kluczowych kwestiach. Po pierwsze – og:title oraz og:description wcale nie muszą być takie same jak ich odpowiedniki SEO <title> i <description>. W social mediach nie musimy skupiać się na słowach kluczowych, tutaj powinniśmy spróbować zwrócić uwagę i zaangażować użytkownika do działania. Świetnie sprawdzą się elementy CTA, takie jak np. „Wejdź”, „Kliknij”, „Polub”, „Udostępnij”. Np. „Wejdź i pobierz darmowego E-booka”.
Po drugie – należy wykorzystywać encje HTML/
emoji w tytule i opisie – one również przyciągają uwagę użytkowników. Warto jednocześnie pamiętać, że emoji nie zawsze wyświetlają się w description – kwestia testowania.
Po trzecie – należy przygotować unikalną grafikę skrojoną pod social media i oznaczyć ją w odpowiednim tagu (og:image), w przeciwnym razie zaciągnie nam się pierwsza z kolei grafika.
Można mieć taki widok strony w kanale social media:
Ale można to zrobić np. tak:
W przykładzie pokazano Facebooka, jednak warto pamiętać, że content może pojawiać się w różnych mediach społecznościowych, np. na LinkedInie czy Twitterze.
Jarosław Dudek, Manager SEO w MaxROY.agency
Nieobowiązkowe tagi Open Graph
og:locale – tag do określania języka witryny, np. en_US, pl_PL itd.
Przykład użycia:
<meta property="og:locale" content="en_US"/>
og:audio, og:video – tagi do zgłaszania materiałów audio i video. Nie wystarczy jednak sam adres URL plików. Media społecznościowe potrzebują dodatkowych informacji, aby poprawnie wyświetlić i odtworzyć multimedia. Dlatego oprócz adresu URL, warto podać typ pliku (MP3, WAV, etc.), miniaturkę czy czas trwania pliku.
<meta property="og:audio" content="https://example.com/ audio/ przyklad.mp3" / > <meta property="og:audio:type" content="audio/ mpeg" / > <meta property="og:image" content="https:// example.com/ images/ przyklad_audio.jpg" / > <meta property="og:audio:secure_url" content="https:// example.com/ audio/ przyklad.mp3" / >
fb:app_id – wskazuje na odpowiednie adresy w aplikacji Facebooka, które są powiązane z URL-em materiału. Ułatwia to weryfikację statystyk, jeśli realizujemy kampanię na tym portalu.
Przykład użycia:
<meta property="fb:app_id" content="1234567890" />
Więcej przykładów i wyjaśnień dla wdrożeń OG znajdziesz tutaj.
Czy wiesz, że…
Specjalne tagi ma także X (dawniej Twitter):
- twitter:card – gdzie można wpisać wartości summary, summary_large_image, app, player,
- twitter:site – nazwa profilu z Twittera,
- twitter:title – tytuł karty,
- twitter:description – opis karty,
- twitter:image – link do obrazka, który będzie umieszczony w karcie.
Implementacja tagów Open Graph jest stosunkowo prosta. Różni się w zależności od używanego CMSa. Jeżeli korzystasz z najpopularniejszego systemu do zarządzania treścią - WordPressa, instalacja wtyczki Yoast SEO automatycznie rozwiązuje problem z dodawaniem OG i ułatwia pracę. Przykładowe wtyczki do implementacji OG można znaleźć tutaj i tutaj.
Jeśli twój CMS nie obsługuje natywnie tagów Open Graph, możesz je dodać ręcznie w sekcji <head> swojej strony. Dodatkowo, korzystając z generatorów, np. Web Code Tools, przyspieszysz pracę i zmniejszysz ryzyko popełnienia błędu. Warto również sprawdzić wytyczne dla poszczególnych portali społecznościowych, tak jak ma to miejsce w przypadku Pinów rozszerzonych na Pintereście.
Weryfikacja poprawności wdrożenia tagów Open Graph
Chcesz sprawdzić poprawność implementacji Open Graph? Facebook stworzył do tego dedykowane narzędzie, które nazwał Sharing Debugger. Po wprowadzeniu tagów w sekcji head narzędzie pokazuje wszelkie błędy i sugestie wraz z wytłumaczeniem (w języku angielskim). Podobne narzędzia znajdziemy dla innych portali społecznościowych — Twitter Card validator czy LinkedIn Post Inspector. Możesz także podejrzeć, jak twoje treści prezentują się w mediach społecznościowych w darmowych generatorach, np. OpenGraph.xyz
Jeśli wprowadzasz poprawki w już opublikowanym contencie, pamiętaj, że Facebook sam nie zaktualizuje danych. Aby ponownie skierować jego uwagę na opublikowany wpis, należy wybrać w narzędziu odpowiedni przycisk o nazwie Scrape Again, który powoduje, że robot Facebooka ponownie wyświetli wpisany adres URL i zaktualizuje go.
Artykuł napisany przez Natalię Nowaczyk i Dominika Olszewskiego, zaktualizowany przez zespół WhitePress®.
Content Manager w adCookie
Copywriter
