Protokół Open Graph (OG) to zestaw meta tagów pierwotnie stworzony przez Facebook w 2010 roku. Te tagi znajdują się w <head> Twojego HTML i mówią platformom mediów społecznościowych dokładnie, jak wyświetlać Twoją treść, gdy ktoś udostępnia link. Bez tych tagów platformy próbują złożyć podgląd na podstawie tego, co znajdą na stronie, a wynik zazwyczaj nie jest świetny.
Gdzie tagi Open Graph pojawiają się w praktyce
Gdy ktoś wkleja link do Facebooka, LinkedIn, WhatsApp, Telegram, Slack lub Discord, platforma pobiera stronę i odczytuje tagi OG. Te tagi określają tytuł podglądu, opis i obraz, które pojawiają się w wpisie lub widoku wiadomości. Ten podgląd jest często pierwszym wrażeniem, jakie ludzie mają o Twojej treści, więc warto to kontrolować. Link z czystym obrazem i przyciągającym tytułem otrzymuje znacznie więcej kliknięć niż link z zepsutą miniaturą lub ogólnym opisem wyciągniętym ze stopki strony.
Wymagane vs. opcjonalne tagi Open Graph
Specyfikacja Open Graph definiuje cztery wymagane właściwości:
og:title: tytuł Twojej treści, jaki ma pojawić się w podglądzie społecznościowym.og:type: typ treści. Domyślnie "website", jeśli pominięty.og:image: URL obrazu, który ma być wyświetlany w podglądzie.og:url: kanoniczny URL strony.
Dodatkowo, kilka tagów opcjonalnych jest powszechnie używanych:
og:description: jedno- lub dwuzdaniowe podsumowanie strony.og:site_name: nazwa Twojej ogólnej witryny (np. "InspectWP").og:locale: język i region (np.en_US,pl_PL).og:video: URL do pliku wideo powiązanego z treścią.
Zrozumienie wartości og:type
Tag og:type mówi platformom, jaki rodzaj treści reprezentuje strona. Najczęstsze wartości to:
- website: używaj dla swojej strony głównej i ogólnych stron. To domyślna wartość, gdy nie określono typu.
- article: używaj dla wpisów blogowych, artykułów prasowych i wszelkich treści pisanych z datą publikacji. Ten typ odblokowuje dodatkowe tagi, takie jak
article:published_time,article:authoriarticle:section. - product: używany przez witryny e-commerce do opisu produktów. Wspiera tagi takie jak
product:price:amountiproduct:price:currency. - profile: dla stron reprezentujących osobę. Wspiera
profile:first_nameiprofile:last_name.
Wymagania i najlepsze praktyki dla og:image
Obraz podglądu to wizualnie najbardziej widoczna część udostępnienia w mediach społecznościowych, więc warto to dobrze zrobić. Oto specyfikacje:
- Minimalny rozmiar: Facebook zaleca co najmniej 1200 x 630 pikseli dla ekranów o wysokiej rozdzielczości. Obrazy mniejsze niż 600 x 315 pikseli mogą nie wyświetlać się poprawnie lub pojawić się jako mała miniatura zamiast dużej karty.
- Proporcje: 1,91:1 to standard dla dużych podglądów linków na większości platform. Obrazy kwadratowe (1:1) również działają, ale produkują inny układ.
- Rozmiar pliku: utrzymuj obrazy poniżej 8 MB. Facebook i LinkedIn mogą być powolne w renderowaniu bardzo dużych obrazów.
- Format: JPEG i PNG są wszechobecnie wspierane. WebP działa na niektórych platformach, ale nie na wszystkich.
- Zawsze używaj absolutnych URL-i: URL obrazu musi zaczynać się od
https://. Ścieżki względne nie działają, ponieważ platforma społecznościowa pobiera obraz ze swoich własnych serwerów.
Jak działa Facebook Sharing Debugger
Facebook agresywnie cache'uje Twoje dane OG. Jeśli zaktualizujesz swoje tagi OG, stary podgląd może nadal się wyświetlać, gdy ktoś udostępni Twój link. Facebook Sharing Debugger (developers.facebook.com/tools/debug/) pozwala wprowadzić URL i zobaczyć dokładnie, co Facebook z niego odczytuje. Możesz kliknąć "Scrape Again", aby zmusić Facebook do ponownego pobrania strony i odświeżenia cache. To narzędzie jest również cenne do rozwiązywania problemów, takich jak brakujące obrazy, nieprawidłowe tytuły lub tagi, które nie są poprawnie parsowane. LinkedIn ma podobne narzędzie o nazwie Post Inspector.
Open Graph i Twitter Cards
Twitter (teraz X) opracował własny system meta tagów o nazwie Twitter Cards. Tagi Twitter Card używają atrybutu name zamiast property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />Dobra wiadomość jest taka, że Twitter wraca do tagów Open Graph, gdy brakuje tagów Twitter Card. Więc jeśli masz og:title, ale nie twitter:title, Twitter używa tytułu OG. Jednak sam tag twitter:card nie ma odpowiednika OG, więc zawsze powinieneś dołączyć przynajmniej ten jeden tag specyficzny dla Twittera. Ustawienie go na summary_large_image produkuje najbardziej atrakcyjny wizualnie podgląd, z dużym obrazem nad tekstem.
WordPress i generowanie tagów Open Graph
Core WordPress domyślnie nie zawiera tagów Open Graph. Potrzebujesz wtyczki, aby je dodać. Najpopularniejsze opcje to:
- Yoast SEO: automatycznie generuje wszystkie niezbędne tagi OG na podstawie tytułu wpisu, fragmentu i obrazu wyróżniającego. Pozwala nadpisać tytuł, opis i obraz OG na poziomie wpisu poprzez zakładkę "Social" w edytorze. Generuje również tagi Twitter Card.
- Rank Math: podobny do Yoast z automatycznym generowaniem OG i nadpisaniami na poziomie wpisu. Zawiera funkcję podglądu społecznościowego pokazującą, jak wpis będzie wyglądał po udostępnieniu.
- The SEO Framework: lekka alternatywa, która generuje tagi OG i Twitter z minimalną konfiguracją. Mniej opcji konfiguracji, ale solidne domyślne ustawienia.
Jeśli używasz konstruktora stron, takiego jak Elementor, lub wtyczki cache, upewnij się, że tagi OG są obecne w cache'owanym wynikowym HTML. Niektóre agresywne konfiguracje cache mogą usuwać meta tagi z sekcji <head>.
Tagi Open Graph dla produktów WooCommerce
Dla sklepów WooCommerce tagi OG stają się jeszcze ważniejsze, ponieważ podglądy produktów bezpośrednio wpływają na decyzje zakupowe. Dobrze skonfigurowana strona produktu powinna mieć og:type ustawiony na "product", wraz z nazwą produktu jako tytułem, atrakcyjnym opisem i głównym obrazem produktu. Wtyczki SEO, takie jak Yoast WooCommerce SEO lub Rank Math, mogą generować je automatycznie. Cenę produktu i dostępność można również uwzględnić za pomocą dodatkowych tagów OG, które niektóre platformy wyświetlają w podglądzie.
Częste błędy Open Graph
- Niewłaściwy rozmiar obrazu: użycie obrazu mniejszego niż 600 x 315 pikseli skutkuje małą miniaturą zamiast dużego podglądu karty. Zawsze używaj zalecanych 1200 x 630 pikseli.
- Brakujący tag og:image: bez tagu obrazu platformy albo nie pokazują żadnego obrazu, albo wybierają losowy obraz ze strony, który może być reklamą paska bocznego lub logo, które wygląda strasznie jako podgląd.
- URL-e względne: wszystkie URL-e OG muszą być absolutne.
/images/foto.jpgnie zadziała; musi to byćhttps://example.com/images/foto.jpg. - Zduplikowane tagi OG: posiadanie dwóch tagów
og:titlena tej samej stronie (na przykład z dwóch różnych wtyczek) powoduje nieprzewidywalne zachowanie. Sprawdź źródło swojej strony, aby upewnić się, że każdy tag OG pojawia się tylko raz. - Brak testowania po zmianach: dane OG są cache'owane przez platformy społecznościowe. Po aktualizacji tagów zawsze czyść cache za pomocą Facebook Debugger lub LinkedIn Post Inspector, aby zweryfikować, że nowe tagi działają.
Co sprawdza InspectWP
InspectWP skanuje sekcję <head> Twojej strony i raportuje, które tagi Open Graph i Twitter Card są obecne. Pokazuje dokładne wartości dla każdego tagu, ułatwiając weryfikację, że tytuły, opisy i URL-e obrazów są poprawne. Brakujące meta tagi mediów społecznościowych są oznaczane jako możliwość poprawy SEO, ponieważ strony bez tagów OG zazwyczaj otrzymują mniej zaangażowania, gdy są udostępniane na platformach społecznościowych.