Jak używać
- Wpisz og:title i og:description używane na stronie lub te, których planujesz użyć.
- Wklej pełny adres URL obrazu og:image. Narzędzie go załaduje i poda jego rzeczywisty rozmiar w pikselach.
- Dodaj adres URL strony lub domenę, a następnie porównaj podgląd dużej i małej karty oraz usuń ewentualne ostrzeżenia.
Jak to działa
Gdy ktoś udostępnia link, większość serwisów społecznościowych i komunikatorów pobiera stronę i odczytuje jej znaczniki Open Graph: og:title, og:description, og:image i og:url. Na ich podstawie tworzy kartę. Szeroki obraz o proporcjach około 1,91:1 zwykle wyświetla się jako duża karta z obrazem u góry, a mały lub kwadratowy obraz często tworzy kompaktową kartę z miniaturą obok tekstu.
To narzędzie pokazuje dwa ogólne style kart, które pomogą ocenić długość tekstu i kadrowanie obrazu. Po załadowaniu obrazu przez przeglądarkę sprawdza jego rzeczywisty rozmiar: przy wymiarach poniżej 200 × 200 px wiele aplikacji pomija obraz, poniżej 600 × 315 px częściej wyświetla go w małym układzie, a znaczne odchylenie od proporcji 1,91:1 oznacza kadrowanie. Powszechnie zalecany rozmiar 1200 × 630 px zapewnia ostry obraz na ekranach o dużej gęstości pikseli.
Podgląd nie pokazuje dokładnie tego, co wyświetli konkretna aplikacja. Aplikacje różnią się liczbą widocznych wierszy tytułu i opisu, niektóre pomijają opis, a większość przez pewien czas przechowuje podgląd w pamięci podręcznej po pierwszym udostępnieniu. Dlatego zmiany znaczników mogą nie być widoczne od razu. Wiele platform udostępnia własne narzędzie do debugowania, które odświeża tę pamięć podręczną.
Przykłady
Zrzut ekranu użyty jako og:image
Zrzut ekranu o wymiarach 1440 × 900 ma proporcje 1,6:1. Narzędzie ostrzega o proporcjach: w dużej karcie obraz zostałby przycięty u góry i u dołu. Eksport w rozmiarze 1200 × 630 pozwala uniknąć niespodzianek.
Logo jako jedyny obraz
Logo o wymiarach 180 × 180 jest mniejsze niż 200 × 200 px, więc wiele aplikacji nie wyświetli obrazu. Zamiast tego użyj większego, szerokiego banera z logo.
Sprawdzanie długości tytułu
og:title o długości 90 znaków zajmuje trzy wiersze w podglądzie dużej karty. Skrócenie go do około 60 znaków sprawi, że karta będzie wyglądać schludnie w większości aplikacji.
Często zadawane pytania
Dlaczego mój link wygląda inaczej na Facebooku, LinkedIn i X?
Każda platforma wyświetla karty w innym układzie, inaczej kadruje obrazy i stosuje własne limity tekstu. Niektóre pokazują opis, a inne nie. Ten podgląd jest ogólnym przybliżeniem, a nie odwzorowaniem wyglądu konkretnej platformy.
Zmieniłem og:image, ale nadal widzę stary obraz. Dlaczego?
Platformy przechowują podglądy linków w pamięci podręcznej. Użyj własnego debugera udostępniania danej platformy, aby ponownie pobrać stronę, albo poczekaj, aż pamięć podręczna wygaśnie. Pomaga również zmiana nazwy pliku obrazu.
Czy mogę użyć obrazu SVG lub WebP?
Większość platform nie obsługuje SVG. WebP działa w wielu aplikacjach, ale nie we wszystkich; najbezpieczniej wybrać JPG lub PNG.
Dlaczego narzędzie nie może załadować mojego obrazu?
Adres URL może wymagać zalogowania, prowadzić do strony HTML zamiast do obrazu albo serwer może blokować żądania z innych witryn. Jeśli przeglądarka nie może załadować obrazu tutaj, robot indeksujący platformy społecznościowej również może mieć z tym problem.
Prywatność
Wpisany tekst pozostaje w przeglądarce. Aby sprawdzić obraz, przeglądarka pobiera go bezpośrednio z podanego adresu URL (bez wysyłania nagłówka Referer), więc serwer otrzymuje zwykłe żądanie obrazu. Żadne dane nie są wysyłane do TIG Tools.