Debugger Open Graph - podgląd linku na Facebooku, X i LinkedIn

Debugger Open Graph pokazuje, co Facebook, X i LinkedIn zobaczą po wklejeniu Twojego linku. Narzędzie pobiera stronę z serwera, wyciąga z niej znaczniki og: oraz twitter: i odtwarza z nich podgląd karty. Poniżej samego testu znajdziesz opis minimalnego kompletu znaczników, wymagania wobec obrazka, listę najczęstszych błędów oraz wyjaśnienie, dlaczego po poprawieniu znaczników podgląd na Facebooku potrafi jeszcze długo pokazywać starą wersję.

Sprawdź, co Facebook, X i LinkedIn pokażą po wklejeniu Twojego linku.

Czym są znaczniki Open Graph

Open Graph to protokół opisu strony, ogłoszony przez Facebooka w 2010 roku i opisany w specyfikacji ogp.me. Sprowadza się do kilku znaczników <meta> w sekcji <head>, które mówią platformom społecznościowym, jaki tytuł, opis i obrazek pokazać zamiast surowego adresu. Bez nich platforma musi zgadywać: bierze wtedy znacznik <title>, przypadkowy fragment tekstu i dowolny obrazek znaleziony na stronie, albo nie pokazuje nic poza linkiem.

Znaczenie tych czterech linijek jest nieproporcjonalnie duże wobec nakładu pracy. Link z czytelną kartą zajmuje w strumieniu kilka razy więcej miejsca niż goły adres i niesie własną obietnicę treści, niezależną od tego, co napisał udostępniający. To jedyne miejsce, w którym kontrolujesz wygląd swojej strony na cudzej platformie.

Minimalny komplet znaczników

Specyfikacja Open Graph wskazuje cztery właściwości jako wymagane: og:title, og:type, og:image i og:url. W praktyce dokłada się do nich og:description, bez którego karta jest pusta w środku, oraz og:site_name. Komplet dla zwykłego artykułu wygląda tak:

<meta property="og:type" content="article">
<meta property="og:url" content="https://przyklad.pl/moj-artykul/">
<meta property="og:title" content="Tytuł widoczny na karcie">
<meta property="og:description" content="Dwa zdania, które mają przekonać do kliknięcia.">
<meta property="og:image" content="https://przyklad.pl/img/karta.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Opis tego, co widać na obrazku">
<meta property="og:site_name" content="Nazwa serwisu">
<meta property="og:locale" content="pl_PL">

Dwa szczegóły z tej listy bywają pomijane, a oba mają widoczny skutek. og:locale domyślnie przyjmuje wartość en_US, więc polska strona bez tego znacznika deklaruje się jako anglojęzyczna. og:url powinien wskazywać ten sam adres co znacznik kanoniczny, bo to według niego platformy zliczają polubienia i udostępnienia - link z doklejonymi parametrami kampanii zbiera wtedy własną, osobną pulę zamiast dokładać się do wspólnej.

Twitter Cards, czyli warstwa dla X

X czyta własny zestaw znaczników twitter:, ale gdy ich nie znajdzie, sięga po odpowiedniki z Open Graph. Nie musisz więc dublować tytułu i opisu - w praktyce wystarczy jedna linia, która decyduje o formacie karty:

<meta name="twitter:card" content="summary_large_image">

Wartość summary daje małą, kwadratową miniaturę obok tekstu. summary_large_image daje szeroki obrazek nad tytułem i to jego chce się w większości przypadków. Różnica w zajmowanej powierzchni jest kilkukrotna, a kosztuje jedną linię. Znaczniki twitter:site i twitter:creator dokładają do karty nazwy kont - wydawcy i autora.

Warto wiedzieć, że X wycofał swój publiczny walidator kart, więc dziś nie ma oficjalnego narzędzia do podejrzenia karty przed publikacją. Zostaje odczytanie znaczników ze źródła strony - to właśnie robi test powyżej.

Obrazek: proporcje, rozmiar i typowe wpadki

Facebook zaleca obrazek o wymiarach co najmniej 1200 x 630 pikseli, czyli w proporcji około 1,91:1, i przyjmuje pliki do 8 MB. Obrazek mniejszy niż 200 x 200 pikseli zostanie odrzucony. Proporcja jest ważniejsza, niż się wydaje: kadr znacząco inny niż 1,91:1 zostanie przycięty przez platformę, a przycięcie idzie od góry i od dołu, więc tekst umieszczony przy krawędzi obrazka znika jako pierwszy.

Znaczniki og:image:width i og:image:height nie są obowiązkowe, ale rozwiązują konkretny problem. Bez nich platforma musi najpierw pobrać obrazek, żeby poznać jego proporcje - a przy pierwszym udostępnieniu linku często nie zdąży tego zrobić przed wyrenderowaniem karty. Skutek jest taki, że pierwsza osoba udostępniająca widzi kartę bez obrazka, a kolejne już z nim. Podanie wymiarów wprost eliminuje ten stan.

Adres obrazka musi być bezwzględny, z protokołem i domeną. Wartość w rodzaju /img/karta.jpg jest poprawnym adresem względnym w HTML-u, ale specyfikacja Open Graph wymaga tu pełnego adresu i część platform go nie rozwinie. Jeżeli strona działa po HTTPS, obrazek również musi być podany po HTTPS - odwołanie po HTTP zostanie zablokowane jako treść mieszana.

Najczęstsze błędy

  • Brak og:image - karta zostaje bez obrazka albo platforma bierze pierwszy lepszy plik ze strony, często logo lub ikonę.
  • Znaczniki wstrzykiwane przez JavaScript - roboty platform społecznościowych czytają surowy HTML z serwera i nie wykonują skryptów. Znacznik dopisany w przeglądarce nie istnieje dla Facebooka.
  • Rozjazd og:url z adresem kanonicznym - rozbija licznik udostępnień na dwa niezależne.
  • Dwie wtyczki SEO naraz - każda wypisuje własny komplet znaczników, a platforma bierze pierwszy z brzegu. Efekt bywa taki, że karta pokazuje treść sprzed zmiany, której nigdzie nie da się znaleźć w ustawieniach.
  • Tytuł pisany pod wyszukiwarkę - w karcie nie ma miejsca na nazwę marki i separatory. og:title może i powinien być inny niż <title>.
  • Obrazek za bramką - plik wymagający logowania, ukryty za regułą hotlink protection albo blokowany dla robotów w robots.txt nie zostanie pobrany przez platformę.

Poprawiłem znaczniki, a podgląd się nie zmienił

To nie jest błąd, tylko pamięć podręczna platformy. Facebook, LinkedIn i X pobierają stronę raz i zapamiętują odczytane znaczniki na długo - kolejne udostępnienia tego samego adresu dostają wersję z pamięci, nie z Twojego serwera. Dlatego test powyżej może pokazywać poprawne znaczniki, a karta na Facebooku wciąż starą treść. To dwa różne źródła i nie ma między nimi sprzeczności.

Odświeżenie wymusza się w narzędziach samych platform: Sharing Debugger Facebooka ma przycisk ponownego pobrania, a Post Inspector LinkedIna robi to samo przy każdym sprawdzeniu. Obydwa wymagają zalogowanego konta, co jest zresztą powodem, dla którego narzędzie takie jak to powyżej bywa wygodniejsze na etapie samego pisania znaczników.

Czego to narzędzie nie sprawdza

Uczciwie o granicach pomiaru, bo brak ostrzeżenia bywa mylony z potwierdzeniem poprawności. Obrazek pobieramy i sprawdzamy jego kod odpowiedzi, typ pliku, wagę oraz wymiary - ale ściągamy tylko pierwsze 256 kB. To wystarcza, żeby odczytać wymiary, bo wszystkie formaty rastrowe trzymają je w nagłówku pliku. Wagę pliku większego niż ten fragment znamy natomiast wyłącznie z nagłówka Content-Length podanego przez serwer, a gdy serwer go nie wyśle, narzędzie napisze wprost, że wagi nie ustaliło. Nie zgaduje jej i nie podaje długości pobranego fragmentu jako rozmiaru pliku.

Po drugie, pobieramy stronę własnym robotem, nie podszywając się pod facebookexternalhit. Serwis serwujący robotom platform inne znaczniki niż reszcie internetu da tutaj inny wynik niż na samym Facebooku. Po trzecie, czytamy wyłącznie HTML zwrócony przez serwer - dokładnie tak, jak robią to roboty platform - więc znaczniki dokładane przez JavaScript nie pojawią się ani w tym raporcie, ani w karcie na Facebooku.