Open Graph Debugger

Sprawdzanie Open Graph: co pokazuje raport

Gdy ktoś wkleja link na Facebooku, LinkedIn, X, w Telegramie, Slacku czy komunikatorze, robot serwisu pobiera stronę i czyta tagi Open Graph w <head>. Na ich podstawie powstaje karta: tytuł, opis i obrazek. Narzędzie pobiera stronę w ten sam sposób — z naszego serwera, bez uruchamiania JavaScriptu — i pokazuje trzy rzeczy:

• Podgląd kart Facebooka, X i LinkedIn zbudowany ze znalezionych tagów. Układ naśladuje każdy serwis, ale to przybliżenie: prawdziwa karta zależy od aktualnego wyglądu serwisu i jego pamięci podręcznej.
• Listę tagów: siedem tagów Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) i cztery tagi X (twitter:card, twitter:title, twitter:description, twitter:image) z oznaczeniem „jest / brak”.
• Wynik od 0 do 100. Każdy tag ma wagę (największą tytuł i obrazek, najmniejszą locale), a wynik to udział znalezionej wagi. Mierzy kompletność, nie jakość: źle napisany tytuł też się liczy.

Pod podglądem widać rzeczywisty rozmiar og:image (mierzy go Twoja przeglądarka), rozmiar zadeklarowany w og:image:width i og:image:height, tekst og:image:alt oraz ostrzeżenie, jeśli adres obrazka jest względny.

Które tagi Open Graph są wymagane

Protokół Open Graph (ogp.me) wymienia cztery wymagane właściwości. Z opisem i typem karty X powstaje zestaw, który działa wszędzie:

Minimalny zestaw w <head>:

<meta property="og:title" content="Wiosenna wyprzedaż: −30% na buty do biegania">
<meta property="og:description" content="Tylko dwa tygodnie, darmowy zwrot.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/sale">
<meta property="og:image" content="https://example.com/img/sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Trzy pary butów do biegania na bieżni">
<meta name="twitter:card" content="summary_large_image">

Rozmiar obrazka Open Graph

Jeden obrazek 1200×630 pikseli (proporcje 1.91:1) wystarcza dla Facebooka, LinkedIn i dużych kart X. Tekst i logo trzymaj bliżej środka: niektóre aplikacje przycinają krawędzie albo pokazują kwadratową miniaturę.

Tagi og:image:width i og:image:height pozwalają Facebookowi pokazać kartę już przy pierwszym udostępnieniu, bez czekania na pobranie obrazka. Kompresuj plik: baner o wadze 3 MB spowalnia robota, a część komunikatorów pomija ciężkie obrazki.

Dlaczego podgląd się nie odświeżył i jak go wymusić

Każdy serwis zapamiętuje to, co raz pobrał. Po poprawieniu tagów nasze narzędzie od razu pokaże nową wersję, ale serwis — starą, dopóki nie pobierze strony ponownie. Odświeżenie wymusisz oficjalnymi narzędziami:

• Facebook, linki w Instagramie i Messengerze: Sharing Debugger na developers.facebook.com — wklej adres i kliknij „Scrape Again”. Sam Facebook odświeża dane mniej więcej co 30 dni.
• LinkedIn: Post Inspector na linkedin.com/post-inspector. Sprawdzenie adresu pobiera stronę od nowa; bez tego LinkedIn trzyma cache około siedmiu dni.
• Telegram: wyślij link do oficjalnego bota @WebpageBot — zaktualizuje podgląd, który Telegram przechowuje dla tego adresu.
• X: dawny Card Validator nie pokazuje już podglądu i nie ma ręcznego odświeżania. Kartę widać w oknie nowego wpisu po wklejeniu linku. Jeśli X uparcie trzyma starą, udostępnij adres z neutralnym parametrem, np. ?v=2 — dla X to nowy URL.

Obrazki też są zapamiętywane po adresie. Jeśli podmienisz plik pod tą samą nazwą, część aplikacji nadal pokaże stary. Wgraj nowy obrazek pod nową nazwą i zaktualizuj og:image.

Karty X: co jest brane z Open Graph

X najpierw czyta własne tagi twitter:*. Jeśli brakuje twitter:title, twitter:description lub twitter:image, użyje og:title, og:description i og:image. Nie trzeba więc dublować wszystkiego: na stronie z pełnym Open Graph wystarczy dodać twitter:card. Nasz podgląd X działa tak samo. Tagi X zwykle zapisuje się w atrybucie name; narzędzie czyta je tylko z name.

Najczęstsze błędy Open Graph

1. Względna ścieżka do obrazka. /img/cover.jpg działa w przeglądarce, ale nie u robota serwisu. Potrzebny jest pełny adres z https://; raport ostrzega przed ścieżką względną.
2. Tagi dodawane przez JavaScript. Roboty serwisów społecznościowych nie uruchamiają skryptów. Jeśli framework ustawia meta tagi po stronie klienta, robot widzi pusty szablon. Renderuj tagi na serwerze albo użyj prerenderingu. Nasze narzędzie też nie uruchamia JavaScriptu, więc tagu, którego tu brak, najpewniej nie zobaczy też Facebook.
3. Zablokowany robot. Disallow w robots.txt, ochrona przed botami w firewallu, blokada geograficzna lub ściana logowania — i serwis widzi stronę błędu. Sprawdź robots.txt i odpowiedź serwera w nagłówkach HTTP.
4. Jeden szablon dla wszystkich stron. Ten sam tytuł i obrazek na każdym URL — i każde udostępnienie wygląda jak strona główna. Generuj og:title, og:description i og:image osobno dla każdej podstrony.
5. Zły og:url. Facebook traktuje og:url jako adres kanoniczny i buduje kartę na podstawie tamtej strony. Jeśli wszędzie wskazuje stronę główną, każde udostępnienie pokaże stronę główną.
6. Kilka og:image przez przypadek. Zdarza się, że tag wypisuje i motyw, i wtyczka SEO. Zwykle brany jest pierwszy — niekoniecznie właściwy.
7. Łańcuchy przekierowań. Roboty podążają za przekierowaniami, ale długi łańcuch albo przekierowanie na stronę logowania psują podgląd. Sprawdź je w sprawdzaniu przekierowań.

Open Graph a SEO

Google nie ustala pozycji na podstawie tagów Open Graph, a wynik w wyszukiwarce buduje z <title> i meta description, nie z og:*. Open Graph wpływa na wejścia z serwisów społecznościowych i komunikatorów: kartę z czytelnym obrazkiem łatwiej zauważyć. Część wyszukiwarkową sprawdzaj osobno: sprawdzanie meta tagów pokaże title, description i canonical, a podgląd SERP — jak strona wygląda w Google.