Walidator Open Graph

Dalej

Wklej kod HTML swojej strony (wystarczy sam <head>), a ten walidator sparsuje każdy tag meta og: i twitter:, jaki znajdzie, i pokaże, które z sześciu kluczowych tagów są obecne, których brakuje i jaka jest dokładna wartość każdego z nich. Ponieważ analizuje wklejony przez Ciebie kod, a nie pobiera działający adres URL, sprawdza się także na serwerach testowych, na localhoście i na stronach ukrytych za logowaniem, do których żaden internetowy robot nie ma dostępu.

Jak walidator odczytuje Twoje tagi

  1. 1

    Otwórz źródło strony

    Naciśnij Ctrl+U (Cmd+Option+U na macOS), aby zobaczyć surowy kod HTML, który faktycznie otrzymują roboty społecznościowe.

  2. 2

    Skopiuj sekcję head

    Zaznacz od `<head>` do `</head>`. Sekcja body nie jest potrzebna, choć wklejenie całej strony niczemu nie szkodzi.

  3. 3

    Wklej ją do walidatora

    Każdy tag `<meta>` jest parsowany w miarę pisania. Żaden adres URL nie jest pobierany: analizowany jest wyłącznie wklejony przez Ciebie kod.

  4. 4

    Odczytaj listę kontrolną

    Sześć kontroli zmienia kolor na zielony lub czerwony: og:title, og:description, og:type, og:url, og:image i twitter:card.

  5. 5

    Przejrzyj znalezione wartości

    Każdy tag og: i twitter: jest wypisany wraz z zawartością, dzięki czemu literówki, puste wartości i względne ścieżki obrazów od razu rzucają się w oczy.

Tagi Open Graph, których szuka walidator

Tag Przeznaczenie Na liście kontrolnej?
og:title Nagłówek karty Tak, wymagany
og:description Podtytuł karty Tak, wymagany
og:type website, article, video itd. Tak, wymagany
og:url Kanoniczny adres URL Tak, wymagany
og:image Adres URL obrazu podglądu Tak, wymagany
og:site_name Wiersz z nazwą marki nad nagłówkiem Wypisywany, gdy obecny
og:locale en_US, es_ES itd. Wypisywany, gdy obecny

Każdy inny tag og: obecny w Twoim kodzie również zostanie wypisany, nawet jeśli nie należy do listy kontrolnej.

Tagi Twitter Card

X (Twitter) korzysta z Open Graph, gdy brakuje jego własnych tagów, dlatego na liście kontrolnej znajduje się tylko twitter:card. Pozostałe są wypisywane, gdy tylko walidator je znajdzie.

Tag Przeznaczenie
twitter:card summary, summary_large_image itd.
twitter:site @nazwa konta publikującego
twitter:creator @nazwa autora
twitter:title Nadpisuje og:title
twitter:description Nadpisuje og:description
twitter:image Nadpisuje og:image

Specyfikacja obrazu, która sprawdza się wszędzie

Walidator potwierdza, że tag og:image został zadeklarowany, ale nigdy nie pobiera samego pliku, dlatego te elementy sprawdź samodzielnie:

  • Wymiary: 1200 x 630 px (Facebook, LinkedIn, duże karty Twittera).
  • Proporcje: 1.91:1 dla summary_large_image.
  • Rozmiar pliku: poniżej 5 MB, najlepiej poniżej 1 MB, aby robot nie przekroczył limitu czasu.
  • Format: JPG lub PNG. WebP i AVIF wciąż są obsługiwane niekonsekwentnie.
  • Bezwzględny adres URL: zawsze pełny adres https://..., nigdy ścieżka względna wobec protokołu ani względna wobec katalogu głównego.

Częste problemy, które ujawnia raport

  • Brak og:image. Najczęstszy z błędów. Bez obrazu karta degeneruje się do nieostylowanego, niebieskiego linku.
  • Tag obecny, ale pusty. Walidator wypisuje każdą wartość, więc og:title bez żadnej treści łatwo wychwycić.
  • Względna ścieżka obrazu. og:image musi być bezwzględnym adresem URL; ścieżka taka jak /img/card.jpg uniemożliwia pobranie.
  • Niezgodność og:url. Gdy og:url różni się od faktycznego adresu kanonicznego, platformy mogą odmówić pobrania strony.
  • Tagi wstrzykiwane przez JavaScript. Nigdy nie pojawiają się w widoku źródła (view-source), więc nie pojawią się także tutaj, a większość robotów ich nie zobaczy.
  • Nieaktualna karta na Facebooku. To nie problem z kodem: Facebook buforuje pobrane dane. Wymuś odświeżenie w narzędziu Sharing Debugger.

Najczęściej zadawane pytania

Ponieważ wklejenie kodu pokazuje dokładnie to, co robot społecznościowy widzi w surowej odpowiedzi, i działa na stronach, do których żaden robot nie dotrze: serwerach testowych, localhoście, intranetach i wszystkim, co jest ukryte za logowaniem. Otwórz stronę, naciśnij Ctrl+U, skopiuj źródło i wklej je tutaj.

Niekoniecznie. X korzysta z tagów Open Graph, gdy brakuje tych z przestrzeni twitter:, dlatego na liście kontrolnej znajduje się tylko twitter:card. Pozostałe dodaj tylko wtedy, gdy chcesz mieć na X inny tytuł, opis lub obraz niż na wszystkich innych platformach.

Inspektor pokazuje DOM po wykonaniu JavaScriptu, natomiast roboty społecznościowe czytają surową odpowiedź HTML. Użyj widoku źródła (Ctrl+U), a nie inspektora, i to właśnie wklej. Jeśli tag istnieje tylko w DOM, dodaj renderowanie po stronie serwera lub usługę prerenderingu, aby roboty mogły go zobaczyć.

1200 x 630 px, JPG lub PNG. To zalecany rozmiar dla dużych kart Facebooka i LinkedIn, akceptowany przez X i skalujący się bez zarzutu w Slacku, Discordzie oraz innych aplikacjach rozwijających linki. Walidator potwierdza, że og:image został zadeklarowany, ale nie otwiera samego pliku, więc wymiary sprawdź samodzielnie.

Facebook przechowuje wyniki pobrań nawet przez 30 dni. Wklej adres URL do narzędzia Sharing Debugger pod developers.facebook.com/tools/debug i pobierz stronę ponownie, aby unieważnić bufor.

Powiązane narzędzia

Narzędzie jest dostępne w innych językach