Sprawdzanie Open Graph: testuj tagi OG i podglądy linków
Wpisz adres URL, żeby zobaczyć, jak będzie wyglądał po udostępnieniu na Facebooku, w X, na LinkedInie i w komunikatorach. Narzędzie czyta każdy tag og:* i twitter:*, mierzy obraz podglądu i mówi dokładnie, co poprawić.
Podglądy linków (przybliżone: każda platforma stosuje własny układ, kadrowanie i pamięć podręczną)
Kontrole
Obraz podglądu
Znalezione tagi
| Pole | Wartość |
|---|
Sugerowane tagi
Twoje obecne wartości, z symbolami zastępczymi tam, gdzie czegoś brakuje. Wklej do <head> strony i zmień wiersze TODO.
Sprawdzanie Open Graph pokazuje, co widzi robot, gdy ktoś wklei Twój link do posta albo czatu: tytuł, opis i obraz zadeklarowane w metatagach og:* i twitter:* Twojej strony. Jeśli podgląd pokazuje zły obraz, brak obrazu albo nazwę witryny zamiast tytułu artykułu, przyczyna prawie zawsze tkwi w tych kilku wierszach HTML, a to narzędzie mówi, w którym.
Jak sprawdzić tagi Open Graph
- Wpisz adres URL strony, którą chcesz udostępnić, i naciśnij Sprawdź tagi. Przekierowania są śledzone, a analizowany jest adres końcowy.
- Zobacz podglądy. To przybliżenia tego, jak Facebook, X, LinkedIn i komunikatory układają kartę linku, zbudowane z tagów, które każdy z nich czyta.
- Przejdź przez kontrole. Błędy psują podglądy; ostrzeżenia pogarszają je na niektórych platformach; uwagi to dobre praktyki. Każda mówi, co zmienić.
- Popraw i sprawdź ponownie. Pole Sugerowane tagi daje gotowy do edycji blok tagów z wypełnionymi Twoimi obecnymi wartościami.
- Odśwież pamięć podręczną platform po wdrożeniu poprawki (zob. niżej), bo inaczej stare udostępnienia zachowają stary podgląd.
W przypadku strony testowej, strony za logowaniem albo czegokolwiek na localhost przełącz się na Wklej HTML: wklej kod źródłowy strony, a te same kontrole zostaną wykonane w Twojej przeglądarce.
Tagi Open Graph, których potrzebuje każda strona
Open Graph to protokół stojący za większością podglądów linków. Oznacza cztery właściwości jako wymagane dla każdej strony (ogp.me), a LinkedIn wymienia tytuł, obraz, opis i adres URL jako tagi, które muszą istnieć dla jego podglądów udostępnień (pomoc LinkedIna). Obie strony są po angielsku.
| Tag | Do czego służy | Wskazówka |
|---|---|---|
og:title | Nagłówek karty. Wymagany. | Pisz go z myślą o strumieniu, a nie o wyszukiwarce: nie musi zawierać nazwy marki. |
og:type | Rodzaj obiektu, np. website lub article. Wymagany. | Dla wpisów używaj article; odblokowuje to tagi article:*. |
og:image | Obraz podglądu. Wymagany. | Użyj pełnego adresu https://; ustaw też szerokość, wysokość i tekst alternatywny. |
og:url | Kanoniczny adres obiektu, używany jako jego stały identyfikator. Wymagany. | Dopasuj do swojego <link rel="canonical">. |
og:description | Jedno lub dwa zdania pod tytułem. Opcjonalny w protokole, wymagany przez LinkedIn. | Napisz, co dostaje czytelnik, a nie czym jest strona. |
og:site_name | Nazwa całej witryny. | W wielu komunikatorach pokazywana nad tytułem. |
og:image:alt | Opis obrazu. Protokół mówi, że strona z og:image powinna go określać. | Opisz obraz, a nie stronę. |
og:image:width / og:image:height | Rozmiar obrazu w pikselach. | Facebook radzi je podać, żeby obraz załadował się poprawnie już przy pierwszym udostępnieniu linku. |
og:locale | Język i region treści, np. pl_PL. | Facebook zaleca go razem z og:type. |
Jeśli tag pojawia się dwa razy, wygrywa pierwszy: gdy wartości są sprzeczne, protokół daje pierwszeństwo pierwszemu tagowi od góry do dołu. Duplikaty zwykle biorą się z tego, że motyw i wtyczka SEO oba zapisują tagi; narzędzie je oznacza.
Tagi karty Twittera (X)
X czyta własne tagi twitter:* i dla większości z nich wraca do Open Graph, według opisu znaczników kart X (dokumentacja deweloperska X, archiwum, po angielsku):
twitter:card: typ karty,summary(mały kwadratowy obraz) albosummary_large_image(szeroki obraz). Jeśli go brak, ale istniejąog:type,og:titleiog:description, może zostać wyświetlona karta podsumowania.twitter:title: maksymalnie 70 znaków; wraca doog:title.twitter:description: maksymalnie 200 znaków; wraca doog:description.twitter:image: poniżej 5 MB; JPG, PNG, WEBP i GIF (tylko pierwsza klatka); SVG nie jest obsługiwany. Wraca doog:image.twitter:image:alt: do 420 znaków; wraca doog:image:alt.
W praktyce Open Graph plus jeden wiersz, <meta name="twitter:card" content="summary_large_image">, obsługuje X.
Rozmiar og:image: czego wymaga każda platforma
| Platforma | Udokumentowane wymaganie |
|---|---|
| Minimum 1200 × 627 px, zalecana proporcja 1,91:1, maksymalny rozmiar pliku 5 MB (pomoc LinkedIna) | |
Co najmniej 1080 px szerokości dla najlepszego wyświetlania na urządzeniach o wysokiej rozdzielczości; podaj og:image:width i og:image:height (najlepsze praktyki udostępniania Meta) | |
| X: karta z dużym obrazem | Proporcja 2:1, minimum 300 × 157, maksimum 4096 × 4096 px, poniżej 5 MB (dokumentacja X, archiwum) |
| X: karta podsumowania | Proporcja 1:1, minimum 144 × 144, maksimum 4096 × 4096 px, poniżej 5 MB, kadrowany do kwadratu (dokumentacja X, archiwum) |
Jeden obraz może spełnić wszystkie wymagania: 1200 × 630 pikseli, PNG lub JPEG, poniżej 5 MB. Spełnia minimum LinkedIna i zalecenie Facebooka dotyczące szerokości, ma proporcje około 1,91:1, a X przycina go lekko do swojej karty 2:1. Trzymaj tekst i logo z dala od krawędzi, żeby kadrowanie ich nie ucięło. X prosi też o unikalny obraz dla każdej strony zamiast ogólnego logo witryny, co jest rozsądną zasadą wszędzie.
Dlaczego podgląd linku jest zły i jak to naprawić
Wciąż widać stary obraz lub tytuł
Platformy zapisują podglądy w pamięci podręcznej. Facebook buforuje obrazy według adresu URL i nie zaktualizuje ich, jeśli adres się nie zmieni (Meta for Developers), więc wgraj zmieniony obraz pod nową nazwą pliku, a potem przepuść stronę przezSharing Debugger, który wymusza ponowne pobranie. Na LinkedInie użyjPost Inspector, żeby odświeżyć adres.
W ogóle brak obrazu
Sprawdź tabelę Obraz podglądu powyżej. Typowe przyczyny: og:image jest ścieżką względną, obraz zwraca robotom 403 lub 404 (ochrona przed hotlinkowaniem, chroniony katalog, reguła CDN), to plik SVG albo waży ponad 5 MB. LinkedIn zaznacza, że obraz spełniający wymagania nadal może zawieść, jeśli witryna blokuje LinkedInowi jego pobranie.
Tagi są w przeglądarce, ale nie tutaj
Tagi są prawdopodobnie dodawane przez JavaScript po załadowaniu strony. Roboty czytają HTML wysyłany przez serwer, więc przenieś tagi do HTML renderowanego na serwerze lub budowanego z wyprzedzeniem. Aplikacje jednostronicowe zwykle potrzebują renderowania po stronie serwera albo prerenderowania, żeby podglądy udostępnień działały.
Podgląd pokazuje złą stronę
Jeśli adres przekierowuje, roboty pokazują podgląd strony końcowej. Narzędzie pokazuje liczbę przekierowań;sprawdzanie przekierowań wypisuje każdy przeskok. Upewnij się też, żeog:url wskazuje samą stronę, a nie stronę główną. To częsty błąd szablonów.
Tagi Open Graph a metatagi SEO
Znaczniki <title>, meta description i link canonical są dla wyszukiwarek; tagi Open Graph i Twittera są dla udostępnień. Mogą się różnić (nagłówek udostępnienia może być bardziej wyrazisty niż tytuł w wynikach wyszukiwania), ale adres kanoniczny i og:url powinny się zgadzać, a dyrektywę robots noindexwarto znać, zanim zaczniesz promować stronę. Narzędzie raportuje wszystkie z nich, także nagłówek HTTP X-Robots-Tag.
Co narzędzie robi z Twoim adresem URL
Nasz serwer żąda strony raz, śledzi do ośmiu przekierowań, czyta najwyżej pierwsze 600 KB (zatrzymuje się na końcu<head>) i pobiera początek do dwóch obrazów podglądu, żeby odczytać ich rozmiar i format. Pobiera tylko publiczne adresy http(s) na standardowych portach i odrzuca adresy IP prywatne, lokalne oraz metadanych chmury, także gdy wskazuje je przekierowanie. Nic nie jest przechowywane. Karty podglądu ładują potem obraz bezpośrednio w Twojej przeglądarce. Jeśli udostępniasz link kampanii, zbuduj go wgeneratorze UTM; jeśli cudzy, najpierw usuń śledzenie wczyszczeniu linków URL.
Często zadawane pytania
Co robi narzędzie do sprawdzania Open Graph?
Pobiera stronę tak jak robot generujący podgląd linków, odczytuje tagi Open Graph (og:*) i karty Twittera (twitter:*) z nagłówka HTML i pokazuje, jak będzie wyglądał udostępniony link. To narzędzie pobiera też obraz podglądu, żeby sprawdzić jego format, rozmiar w pikselach i wagę pliku, a każdy brakujący lub błędny tag wypisuje razem z poprawką.
Które tagi Open Graph są wymagane?
Protokół Open Graph wymienia cztery wymagane właściwości: og:title, og:type, og:image i og:url. LinkedIn podaje, że do jego podglądów muszą istnieć og:title, og:image, og:description i og:url, więc w praktyce ustaw wszystkie pięć, a do obrazu dodaj og:image:alt.
Jaki rozmiar powinien mieć og:image?
Nie ma jednego oficjalnego rozmiaru. LinkedIn wymaga co najmniej 1200 × 627 pikseli w proporcji 1,91:1 i poniżej 5 MB. Facebook zaleca obrazy o szerokości co najmniej 1080 pikseli. Karta z dużym obrazem w X używa proporcji 2:1, minimum 300 × 157 i limitu 5 MB. Plik PNG lub JPEG 1200 × 630 poniżej 5 MB spełnia wszystkie te wymagania.
Dlaczego Facebook lub LinkedIn nadal pokazuje stary podgląd?
Platformy zapisują podglądy linków w pamięci podręcznej. Facebook buforuje obrazy według adresu URL i nie odświeży ich, dopóki adres się nie zmieni, więc opublikuj zaktualizowany obraz pod nową nazwą pliku, a potem przepuść stronę przez Sharing Debugger Facebooka, żeby wymusić ponowne pobranie. Dla LinkedIna robi to samo Post Inspector.
Czy potrzebuję tagów karty Twittera, skoro mam już tagi Open Graph?
X dla większości pól wraca do Open Graph: twitter:title do og:title, twitter:description do og:description, a twitter:image do og:image. Bez twitter:card X może mimo to wyświetlić małą kartę podsumowania na podstawie og:type, og:title i og:description. Dodaj twitter:card z wartością summary_large_image, jeśli chcesz układ z dużym obrazem.
Czy narzędzie uruchamia JavaScript?
Nie. Czyta HTML zwracany przez serwer, tak jak większość robotów generujących podglądy linków. Jeśli Twoje tagi pojawiają się dopiero po uruchomieniu JavaScriptu po stronie klienta, tutaj ich zabraknie, a prawdopodobnie także w prawdziwych udostępnieniach. Renderuj je na serwerze albo podczas budowania strony.
Czy mogę sprawdzić stronę testową albo localhost?
Nie po adresie URL: ze względów bezpieczeństwa narzędzie pobiera tylko adresy publiczne i blokuje adresy IP prywatne, lokalne oraz metadanych chmury. Użyj zamiast tego karty Wklej HTML: wklej kod źródłowy strony, a zostanie przeanalizowany w całości w Twojej przeglądarce, z rozmiarami obrazów mierzonymi lokalnie.
Czy podglądy dokładnie odpowiadają temu, co pokaże każda platforma?
Nie, to przybliżenia zbudowane na podstawie tagów, które każda platforma dokumentuje. Każda sieć stosuje własny układ, kadrowanie, skracanie tekstu i pamięć podręczną, i z czasem je zmienia. Użyj podglądów, żeby wychwycić brakujące obrazy i słabe tytuły, a przed dużą premierą potwierdź wynik w debuggerze danej platformy.
