Open Graph (OG) to otwarty protokół metadanych opracowany pierwotnie przez Facebook, który pozwala stronom internetowym kontrolować to, jak wyglądają po udostępnieniu w mediach społecznościowych. Zamiast losowo pobranych fragmentów tekstu i grafik, serwis społecznościowy wyświetla dokładnie to, co zdefiniowałeś.
Znaczniki Open Graph umieszcza się w sekcji <head> dokumentu HTML w formie tagów <meta property="og:...">.
Podstawowe tagi Open Graph
Cztery najważniejsze tagi:
- og:title — tytuł wyświetlany przy udostępnieniu linku
- og:description — opis widoczny pod tytułem
- og:image — grafika podglądu (miniaturka linku)
- og:url — kanoniczny adres URL udostępnianego zasobu
Bez tych tagów serwis społecznościowy próbuje sam dopasować treść: losowo wybiera tekst i grafikę ze strony. Efekt bywa nieprzewidywalny — zły podgląd linku może zniechęcić do kliknięcia.
Open Graph a meta tytuł i meta opis — różnica
Meta tytuł <title> i meta opis <meta name="description"> to dane przeznaczone dla wyszukiwarek, wyświetlane w wynikach Google. Open Graph to dane przeznaczone dla platform społecznościowych.
Są to dwa oddzielne zestawy tagów. W praktyce tytuł i opis mogą być identyczne w obu miejscach — ale możesz też ustawić je różnie. Np. meta opis w Google może być dłuższy i bardziej analityczny, a OG opis może być krótszy i bardziej zachęcający do interakcji na Facebooku.
Więcej o meta tytule i meta opisie: Meta tytuł i meta opis w WordPress.
Open Graph nie jest tylko dla Facebooka
Protokół Open Graph jest obsługiwany przez większość nowoczesnych platform i komunikatorów:
– Facebook i Instagram (Meta)
– LinkedIn
– Twitter/X (choć Twitter ma własne tagi Twitter Card, często korzysta też z OG jako fallback)
– Slack, Discord, WhatsApp
Tytuł artykułu „protokół Facebooka” to skrót myślowy — OG stał się standardem webowym używanym przez cały ekosystem mediów społecznościowych.
Grafika Open Graph — wymiary i cache
Optymalny rozmiar grafiki OG to 1200×630 pikseli. Grafika powinna być wyraźna i czytelna w różnych rozmiarach podglądu — na telefonie miniaturka linku jest mała, na desktopie może być większa.
Ważna uwaga dotycząca aktualizacji: serwisy społecznościowe agresywnie buforują (cache’ują) metadane Open Graph. Jeśli zmienisz grafikę lub opis strony, stary podgląd może być jeszcze przez jakiś czas wyświetlany. Żeby wymusić odświeżenie, używa się narzędzi deweloperskich konkretnych platform:
- Facebook: Facebook Sharing Debugger
- LinkedIn: Sharing Debug Tool
- Twitter/X: Card Validator
Nie trzeba podawać tych adresów w treści artykułu — wystarczy nazwa narzędzia, bo użytkownik łatwo znajdzie je w dokumentacji danej platformy.
Jak wdrożyć Open Graph w WordPress
WordPress domyślnie nie generuje tagów Open Graph. Trzeba je dodać przez:
Wtyczki SEO — Yoast SEO i RankMath automatycznie generują kompletny zestaw tagów OG na podstawie tytułu wpisu, meta opisu i zdjęcia wyróżniającego (featured image). To najbardziej popularne podejście.
Dedykowane wtyczki — np. The SEO Framework lub Social Warfare, koncentrujące się na zarządzaniu danymi społecznościowymi.
Motyw — niektóre motywy WordPress mają wbudowaną obsługę Open Graph, ale jest to coraz rzadsze podejście ze względu na problemy przy zmianie motywu.
Jak weryfikować Open Graph
Po dodaniu tagów OG warto zweryfikować, czy są poprawnie wdrożone. Narzędzia:
- Facebook Sharing Debugger — pokazuje, jakie tagi OG widzi Facebook na danej stronie, i pozwala odświeżyć cache
- Rozszerzenia deweloperskie w przeglądarce — np. Open Graph Preview wyświetla tagi OG bezpośrednio na odwiedzanej stronie
- Podgląd społecznościowy we wtyczce SEO — Yoast SEO i RankMath pozwalają sprawdzić, jak link może wyglądać po udostępnieniu w mediach społecznościowych
Open Graph a Piksel Facebooka — nie mylić
Open Graph kontroluje wygląd linku udostępnianego w mediach społecznościowych. Piksel Facebooka to kod śledzący konwersje z płatnych reklam Meta. To dwa zupełnie różne mechanizmy — Open Graph jest widoczny dla wszystkich odwiedzających, Piksel jest narzędziem analitycznym dla reklamodawców.
Więcej o Pikselu: Piksel Facebooka w WordPress.
Podsumowanie
Open Graph to niezbędny element każdej strony WordPress, która jest udostępniana w mediach społecznościowych. Bez tagów OG wygląd linku jest losowy — z nimi masz pełną kontrolę. W WordPress najprościej wdrożyć OG przez wtyczkę SEO, taką jak Yoast SEO lub RankMath.