Jak tego używać
- Wpisz adres strony, np.
example.com/blog/launch, i kliknij Sprawdź. Nie masz strony pod ręką? Wypróbuj jeden z przykładów. - Zobacz kartę, jaką buduje dla niej każda aplikacja: X, Facebook, LinkedIn, Slack, Discord, WhatsApp i iMessage. Zielona kropka oznacza, że karta wygląda dobrze; żółta lub czerwona mówi pod kartą, co jest nie tak.
- Otwórz Pokaż poprawki i tagi, aby zobaczyć każdy sprawdzony tag osobno. Brakujące tagi są gotowe do wklejenia w
<head>: skopiuj je, uzupełnij wartości, opublikuj zmianę i sprawdź ponownie.
Adres sprawdzenia jest w pasku adresu przeglądarki, więc możesz go wysłać osobie, która opiekuje się stroną.
Jak działają podglądy linków
Gdy wklejasz link do posta lub czatu, crawler aplikacji pobiera stronę raz i czyta tagi w jej <head>. Nie uruchamia JavaScriptu, nie loguje się i nie akceptuje banerów cookie, więc tagi dodane przez skrypt po załadowaniu strony są dla niego niewidoczne. Narzędzie pobiera stronę tak samo: jedno żądanie, bez JavaScriptu, a przekierowania są śledzone tak, jak robi to crawler.
Każda aplikacja czyta tych samych kilka tagów, z własnymi zamiennikami:
- Open Graph (
og:title,og:description,og:image,og:url,og:site_name) czytają Facebook, LinkedIn, Slack, Discord, WhatsApp i iMessage. - X czyta najpierw
twitter:card,twitter:title,twitter:descriptionitwitter:image, a w razie braku sięga po tagi Open Graph. Beztwitter:cardpokazuje małą kartę podsumowania, nawet gdy jest obraz. - Gdy brakuje
og:title, większość aplikacji używa<title>. Gdy brakujeog:description, niektóre używają opisu meta, a niektóre nie pokazują tekstu wcale. - Discord koloruje bok swojej karty kolorem z
theme-color.
Podglądy tutaj stosują te zasady. Każda aplikacja co jakiś czas zmienia też wygląd, więc traktuj je jako bliskie, nie dokładne.
Obraz podglądu
Jeden obraz działa wszędzie: 1200 × 630 pikseli (1,91:1), PNG lub JPEG, pod pełnym adresem https://.
- Poniżej 600 pikseli szerokości Facebook i LinkedIn pokazują małą miniaturę zamiast dużej karty. Poniżej 200 × 200 Facebook nie pokazuje obrazu.
- X przyjmuje obrazy do 5 MB, a Facebook do 8 MB. WhatsApp często pomija obrazy powyżej około 600 KB, więc dobrze skompresowany JPEG to bezpieczny wybór.
- SVG nie jest obsługiwany przez żadną z dużych aplikacji.
- Adres względny, np.
/og.png, nie działa w każdym crawlerze. Wpisz pełny URL. - Kwadratowe kadrowanie jest częste (WhatsApp, iMessage przy małych linkach), więc trzymaj ważną część obrazu blisko środka.
Narzędzie pobiera też obraz, mierzy go na podstawie nagłówka pliku i pokazuje w podglądach.
Dlaczego podgląd wciąż wygląda staro
Aplikacje przechowują pobrane dane w pamięci podręcznej, od minut do około tygodnia. Po poprawieniu tagów narzędzie od razu pokazuje nową wersję, ale link, który już udostępniono, zachowuje stary podgląd, dopóki aplikacja nie pobierze go ponownie. Sharing Debugger Facebooka i Post Inspector LinkedIn pobierają stronę ponownie na żądanie. W Slacku link wysłany ponownie po jakimś czasie dostaje nowy podgląd. Dodanie query stringa, np. ?v=2, sprawia, że każda aplikacja traktuje go jak nowy link.
Najczęstsze pytania
Dlaczego mój podgląd nie ma obrazu?
Typowe przyczyny, po kolei: brak tagu og:image, adres obrazu jest względny lub zwraca błąd, obraz jest za mały lub za duży, albo tag jest dodawany przez JavaScript po załadowaniu strony. Linia pod każdą kartą wskazuje właściwą przyczynę.
Jakich tagów potrzebuję co najmniej?
og:title, og:description, og:image z obrazem 1200 × 630, og:url i twitter:card ustawiony na summary_large_image. Generator meta tagów napisze je za Ciebie.
Czy sprawdzi strony wymagające logowania?
Nie. Crawlery się nie logują, więc strona za logowaniem nigdzie nie ma podglądu. Narzędzie widzi to, co one, i pobiera tylko adresy publiczne: sieci prywatne i wewnętrzne są odrzucane.
Czy narzędzie przechowuje pobierane strony?
Nie. Pobiera stronę i jej obrazy, gdy klikniesz Sprawdź, i wysyła Ci to, co znalazło. Wynik jest przechowywany przez dwie minuty, więc ponowne sprawdzenie tego samego adresu jest natychmiastowe, a potem usuwany. Czyta do 2 MB HTML i 8 MB na obraz i poddaje się po 8 sekundach.
Dlaczego mówi, że moja strona odpowiada 403, skoro w przeglądarce otwiera się normalnie?
Niektóre strony i firewalle blokują żądania, które nie pochodzą z przeglądarki, albo od dużych crawlerów, które znają. Jeśli narzędzie dostaje 403, Facebook lub LinkedIn też mogą: sprawdź ustawienia botów w swoim firewallu.
Czy jest limit?
Dwadzieścia sprawdzeń na minutę z jednego adresu. Każda strona jest też pobierana najwyżej 60 razy na minutę łącznie dla wszystkich użytkowników, więc narzędzia nie da się użyć do zalewania strony żądaniami. Wyniki są przechowywane przez dwie minuty, więc ten sam adres sprawdzony wkrótce potem wraca od razu; ponowne kliknięcie Sprawdź na stronie, którą oglądasz, zawsze pobiera ją na świeżo.