5 min czytaniaPoradniki

Podgląd linku nie wyświetla się? Przyczyny i jak to naprawić

Podgląd linku jest tworzony na podstawie tagów Open Graph na stronie docelowej. Dlaczego podglądy nie działają na WhatsApp, Facebooku, X i Slacku - i dokładne kroki, by to naprawić.

Ana Kowalska
Marketing solutions engineering
Gołe łącze bez podglądu przekształcające się w pełną kartę społecznościową po naprawieniu tagów Open Graph, w palecie kolorów Elido

Podgląd linku jest tworzony na podstawie tagów Open Graph w kodzie HTML strony docelowej - og:title, og:description, og:image i og:url. Gdy wklejasz link na WhatsApp, Facebooku, Slacku lub X, crawler tej platformy pobiera stronę, odczytuje te tagi i renderuje kartę. Jeśli podgląd nie wyświetla się, prawie zawsze chodzi o jedną z dwóch rzeczy: tagi są brakujące lub uszkodzone, albo platforma zbuforowała pusty wynik i nadal go serwuje.

Ten jeden fakt - podgląd pochodzi ze strony docelowej, nie z linku - sprawia, że problem jest do naprawienia. Nie debugujesz platformy; debugujesz tagi strony, a następnie czyścisz pamięć platformy na jej temat. Niniejszy poradnik omawia, dlaczego podglądy nie działają, kilka tagów, które mają znaczenie, czy krótkie linki są winowajcą (zazwyczaj nie) i dokładne narzędzie do odświeżenia każdej platformy.

Jeśli równolegle skracasz link, jak skrócić URL omawia te kwestie, a pytanie o krótkie linki otrzymuje własną sekcję poniżej, bo to właśnie je ludzie często błędnie interpretują.

Dlaczego podglądy linków nie działają#

Podglądy zawodzą z małego, przewidywalnego zestawu powodów, a ich nazwanie to już połowa naprawy.

  • Brakujące lub źle sformowane tagi Open Graph. Brak og:title lub og:image oznacza, że crawler nie ma z czego zbudować karty - otrzymujesz goły link. To zdecydowanie najczęstsza przyczyna.
  • Nieosiągalny lub zbyt duży obraz. URL og:image zwraca 404, siedzi za logowaniem lub jest zbyt duży, by platforma pobrała go w czasie. Karta jest renderowana bez obrazu albo wcale.
  • Zbuforowana pustka. Platforma skrawowała URL, zanim tagi istniały, zapisała "brak podglądu" i nadal to pokazuje, dopóki nie zostanie zmuszona do ponownego sprawdzenia.
  • Renderowanie tylko przez JavaScript. Większość crawlerów społecznościowych nie uruchamia JavaScript; odczytują surowy HTML. Jeśli Twoje tagi są wstrzykiwane po stronie klienta, crawler ich nigdy nie widzi.

Ten ostatni punkt dotyczy nowoczesnych aplikacji jednostronicowych nieustannie. Crawler pyta o HTML, dostaje pustą powłokę i odchodzi. Specyfikacja protokołu Open Graph definiuje, jak tagi powinny wyglądać w serwowanym HTML, a rozwiązaniem jest zawsze upewnienie się, że są w HTML, który otrzymuje crawler, a nie dodane później przez skrypt.

Tagi Open Graph w sekcji head strony - og:title, og:description, og:image, og:url - zasilające wyrenderowaną kartę podglądu społecznościowego

Tagi Open Graph napędzające podgląd#

Cztery tagi wykonują prawie całą robotę. Popraw je prawidłowo, a większość platform wyrenderuje czystą kartę.

og:title to nagłówek karty. og:description to linijka tekstu poniżej. og:image to zdjęcie i to ten tag ludzie najczęściej psują - skieruj go na absolutny URL obrazu o wymiarach około 1200x630 pikseli, publicznie osiągalny i nie schowany za uwierzytelnianiem. og:url to kanoniczny adres strony, który utrzymuje podgląd stabilny nawet gdy link niesie parametry śledzenia.

X odczytuje własną rodzinę tagów twitter:card i wraca do Open Graph, gdy ich nie ma - to dlatego strona może wyglądać doskonale na Facebooku i goło na X. Bezpiecznym posunięciem jest dołączenie obu zestawów: czterech tagów Open Graph plus twitter:card, twitter:title, twitter:description i twitter:image. To kilka linijek HTML w sekcji head strony - i różnica między kartą, która działa wszędzie, a taką, która działa tylko w jednym miejscu. Google dokumentuje związane zachowania crawlera i tagów specjalnych, jeśli interesuje Cię również perspektywa wyszukiwarki.

Czy krótkie linki psują podglądy linków?#

To pytanie, które sprowadza ludzi na blog skracarki URL, a odpowiedź jest uspokajająca: czysty krótki link nie psuje podglądów. Gdy udostępniasz krótki link, crawler platformy podąża za przekierowaniem do destynacji i odczytuje tam tagi Open Graph, więc karta pokazuje podgląd destynacji dokładnie tak, jak długi URL.

Podglądy psują się przy krótkich linkach tylko w określonych przypadkach. Łańcuch przekierowań - krótki link wskazujący na inny krótki link wskazujący na stronę - może zdezorientować lub przeterminować crawlera, więc ogranicz się do jednego przeskoku, co jest tą samą dyscypliną, która utrzymuje przekierowania szybkie i czyste pod kątem SEO. Skracarka używająca zasłaniania przez iframe zamiast prawdziwego przekierowania zerwie podgląd, bo crawler widzi opakowanie, nie destynację - to jeden z kilku powodów, dla których ta technika jest zła, omawiany w zasłanianiu linków i maskowaniu URL. A jeśli sama destynacja nie ma tagów Open Graph, żaden krótki link nie jest w stanie ich wymyślić. Używaj jednoetapowego przekierowania na własnej domenie wskazującego na stronę z dobrymi tagami, a podgląd będzie identyczny jak dla nieskróconego linku.

Crawler platformy społecznościowej podążający za jednoetapowym przekierowaniem krótkiego linku do strony docelowej i odczytujący jej tagi Open Graph, w zestawieniu z zerwanym przypadkiem łańcucha przekierowań lub maski iframe

Jeśli chcesz krótkich linków przekierowujących czysto w jednym przeskoku, które nigdy nie stają między Twoją publicznością a dobrym podglądem, zacznij bezpłatny obszar roboczy w Elido i skieruj swój pierwszy link na stronę z prawidłowymi tagami.

Jak to naprawić, platforma po platformie#

Gdy tagi są już prawidłowe, pozostała praca polega na wyczyszczeniu bufora każdej platformy, a każda wiodąca platforma udostępnia do tego narzędzie.

  1. Facebook i Instagram. Przepuść URL przez Facebook Sharing Debugger. Pokazuje znalezione tagi i przycisk "Scrape Again", który ponownie pobiera stronę i czyści zbuforowaną kartę. To dotyczy również Instagrama, który używa tego samego crawlera.
  2. LinkedIn. Użyj LinkedIn Post Inspector. LinkedIn buforuje podglądy na około tydzień, a inspektor to jedyny sposób na wymuszenie wcześniejszego odświeżenia.
  3. X (Twitter). Walidator kart ponownie pobiera stronę i pokazuje, jak karta będzie wyglądać; upewnij się, że tagi twitter:card są obecne, i przetestuj ponownie.
  4. WhatsApp, iMessage, Slack, Discord. Te platformy nie mają publicznego narzędzia do debugowania. Śledzą Open Graph, ale agresywnie buforują. Obejściem jest udostępnienie nieco innego URL - dodaj lub zmień nieszkodliwy parametr zapytania - co aplikacja traktuje jako nowy adres i indeksuje od nowa.

Wzorzec jest wszędzie taki sam: napraw tagi na stronie, następnie zmuś platformę do ponownego spojrzenia. Podgląd, który jest jedynie zbuforowany, naprawia się w ciągu kilku minut po ponownym przeskanowaniu; podgląd, który miał brakujące tagi, pojawia się gdy tylko crawler następnym razem zobaczy stronę.

Lista kontrolna przed udostępnieniem#

Zanim link trafi do odbiorców, trzydzieści sekund sprawdzania zapobiega zażenowaniu gołym linkiem.

  • Upewnij się, że destynacja ma og:title, og:description, og:image i og:url oraz tagi Twitter Card.
  • Otwórz URL og:image bezpośrednio w przeglądarce - musi się wczytać publicznie, w wymiarach około 1200x630.
  • Przepuść ostateczny URL, włącznie z krótkim linkiem, przez debuger Facebooka, by zobaczyć prawdziwą kartę.
  • Jeśli udostępniasz krótki link, upewnij się, że to jeden przeskok do destynacji, a nie łańcuch.

Zrób te cztery rzeczy, a podgląd pojawi się za pierwszym razem, na każdej platformie, która ma znaczenie. Karta to nie magia i to nie platforma sprawia trudności - to cztery tagi na Twojej stronie i jeden bufor do wyczyszczenia.

Powiązane na blogu#

Wypróbuj Elido

Wklej URL, otrzymaj krótki link

Bez rejestracji. Link działa 30 dni. Zarejestruj się, aby zachować go na zawsze.

Za darmo, bez rejestracji · 2 dziennie

Wypróbuj Elido

Skracarka URL hostowana w UE: własne domeny, głęboka analityka i otwarte API. Darmowy plan - bez karty kredytowej.

Tagi
link preview not showing
fix link preview
open graph tags
social media preview
link preview image
og tags

Czytaj dalej