Kontrola Open Graph
Podaj adres i zobacz tagi og: i twitter:, które czyta crawler, razem z listą rzeczy do poprawy.
- Darmowe
- Bez zakładania konta
Podaj adres do sprawdzenia
Wynik pokaże tagi Open Graph i Twitter tak, jak widzi je crawler, wraz z listą problemów.
Kontrola Open Graph pobiera podany adres i czyta tagi, które widzi crawler: og:title, og:description, og:image, og:url, og:type oraz odpowiedniki twitter:. Wskazuje braki, duplikaty, obrazek podany adresem względnym zamiast bezwzględnym https oraz Open Graph zapisany w atrybucie name zamiast property. Nie przewiduje, jak konkretny serwis wyrenderuje kartę, bo każdy stosuje własne kadrowanie, limity długości i cache.
Jak ustawić tagi Open Graph na stronie
Tagi Open Graph to znaczniki <code><meta property="og:…"></code> w sekcji <code><head></code>, z których serwisy budują kartę udostępnionego linku. Pięć kroków wystarczy, żeby karta działała w większości miejsc.
-
Dodaj cztery tagi wymagane przez protokół
Specyfikacja Open Graph wymaga
og:title,og:type,og:imageiog:url. Każdy zapisujesz z atrybutempropertyi wartością wcontent. -
Przygotuj obrazek o proporcjach 1,91:1
Meta zaleca co najmniej 1200 × 630 px, a LinkedIn 1200 × 627 px przy tych samych proporcjach. Plik do 5 MB w formacie JPG albo PNG zmieści się w limitach Meta, LinkedIn i X.
-
Uzupełnij opis, tekst alternatywny i kartę X
Dodaj
og:description,og:image:altz opisem tego, co widać na obrazku, itwitter:card. X sięga po tagi og:, gdy brakuje odpowiedników twitter:. -
Sprawdź adres w narzędziu powyżej
Wklej publiczny adres strony. Zobaczysz tagi z HTML wysłanego przez serwer, czyli te, które czyta crawler serwisu, oraz listę braków i błędów.
-
Odśwież kartę w debuggerze serwisu
Serwisy zapamiętują raz pobraną kartę. Po zmianie tagów wklej adres do Sharing Debuggera Meta albo LinkedIn Post Inspectora, żeby pobrały stronę od nowa.
Przykłady tagów Open Graph przed i po poprawce
Adresy to przykłady na domenie example.com.
<meta name="og:title" content="Cennik planów">
<meta name="og:image" content="/img/cennik.png"><meta property="og:title" content="Cennik planów">
<meta property="og:image" content="https://example.com/img/cennik.png">Specyfikacja używa atrybutu property. Obrazek z pełnym adresem https pobierze każdy serwis, a ścieżkę względną rozwiąże tylko twoja strona.
<meta property="og:type" content="article">
<meta property="og:title" content="Jak skrócić czas ładowania sklepu">
<meta property="og:description" content="Pięć zmian, które przyspieszają stronę produktu.">
<meta property="og:url" content="https://example.com/blog/czas-ladowania">
<meta property="og:image" content="https://example.com/og/czas-ladowania.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Wykres czasu ładowania przed zmianą i po niej">
<meta name="twitter:card" content="summary_large_image">Wymiary podane w og:image:width i og:image:height pomagają serwisom ułożyć kartę, zanim pobiorą obrazek.
Najczęstsze błędy w tagach Open Graph
-
Atrybut name zamiast property
Część serwisów toleruje
name="og:title", ale specyfikacja opisuje atrybutproperty. Zapis zgodny ze specyfikacją działa wszędzie tak samo. -
Obrazek pod adresem względnym albo za logowaniem
Serwis pobiera obrazek osobnym żądaniem, z własnego serwera. LinkedIn wymienia blokadę po stronie witryny i chroniony katalog jako typowe powody, dla których obrazek się nie pokazuje.
-
Za mały obrazek
LinkedIn wyświetla obrazek węższy niż 401 px jako miniaturę, a Meta przyjmuje minimum 200 × 200 px. Dla dużej karty Meta podaje minimum 600 × 315 px i zaleca 1200 × 630 px.
-
Jedna karta dla całego serwisu
Ten sam
og:titlei obrazek na każdej podstronie sprawiają, że udostępniony artykuł wygląda jak link do strony głównej. Każda ważna podstrona potrzebuje własnego tytułu i opisu. -
Brak og:image:alt
Specyfikacja Open Graph zaleca
og:image:altzawsze, gdy strona podajeog:image. Opisz w nim, co widać na obrazku.
Wymagania Open Graph i rozmiary obrazków w serwisach
| Wartość | Co oznacza | Źródło |
|---|---|---|
| 4 tagi | Wymagane przez protokół Open Graph: og:title, og:type, og:image i og:url. | The Open Graph protocol |
| 1200 × 630 px | Zalecany przez Meta rozmiar obrazka dla ekranów o wysokiej rozdzielczości, przy proporcjach jak najbliższych 1,91:1. | Meta for Developers, obrazki |
| 8 MB | Maksymalny rozmiar pliku obrazka akceptowany przez Meta. Najmniejszy dopuszczalny wymiar to 200 × 200 px. | Meta for Developers, obrazki |
| 1200 × 627 px | Minimalny rozmiar obrazka według LinkedIn, przy maksymalnym pliku 5 MB i proporcjach 1,91:1. | Pomoc LinkedIn |
| 5 MB | Limit pliku obrazka w kartach X. Obsługiwane formaty to JPG, PNG, WEBP i GIF, bez SVG. | X Developer, Cards markup |
| 420 znaków | Maksymalna długość twitter:image:alt, czyli tekstu alternatywnego obrazka w karcie X. | X Developer, Cards markup |
Źródła sprawdzone:
Podaj adres, a narzędzie pobierze stronę i pokaże tagi og: oraz twitter: tak, jak widzi je crawler. To odczyt serwowanego HTML, więc pokazuje stan faktyczny, a nie to, co powinno się w nim znaleźć.
Najczęściej dlatego, że og:image jest adresem względnym albo http. Serwisy pobierają obrazek osobnym żądaniem i część z nich wymaga bezwzględnego https. Drugą częstą przyczyną jest cache: wiele platform trzyma raz pobraną kartę i nie odświeża jej, dopóki nie wymusisz tego ich własnym debuggerem.
Nie i celowo tego nie obiecujemy. Pokazujemy tagi i przybliżony układ karty. Każdy serwis kadruje obrazek inaczej, inaczej skraca teksty i trzyma własny cache, więc jedyny wiarygodny podgląd dla danej platformy daje jej własny debugger.
Zwykle nie w komplecie. X czyta Open Graph, gdy brakuje odpowiednika twitter:, więc wystarczy twitter:card plus pełny zestaw og:. Osobne tagi twitter: mają sens, gdy chcesz na X inny tytuł albo obrazek niż w pozostałych serwisach.
Obrazek og:image najlepiej przygotować w rozmiarze 1200 × 630 px, czyli w proporcjach 1,91:1, jako plik JPG albo PNG do 5 MB. Taki plik spełnia zalecenia Meta, LinkedIn i X jednocześnie.
Podgląd linku odświeżysz, wklejając adres do debuggera danego serwisu: Sharing Debuggera Meta albo LinkedIn Post Inspectora. Serwisy przechowują raz pobraną kartę, a debugger każe im pobrać stronę ponownie.
Google nie opisuje tagów Open Graph jako sygnału rankingowego. Wymienia za to og:title jako jedno ze źródeł, z których buduje link tytułowy w wynikach, więc dbaj o jego spójność z tagiem title.
Co jeszcze może Ci się przydać
Ten test sprawdza jedną rzecz na jednej stronie
Indeksowalność, metadane i struktura z priorytetami i raportem dla klienta.