Gdy udostępniasz link na X (dawniej Twitter), platforma próbuje wygenerować podgląd — tak zwaną Twitter Card. Bez odpowiednich meta-tagów Twój link pojawia się jako zwykły URL. Jednak z poprawnie skonfigurowanymi Twitter Cards X pobiera tytuł, opis i obraz, dzięki czemu udostępniony link staje się wizualną zajawką, na którą ludzie znacznie chętniej klikają.
Co dokładnie jest wyświetlane?
Twitter Card to nic, co przesyłasz lub projektujesz. Jest generowana automatycznie przez X na podstawie meta-tagów w HTML zlinkowanej strony. Gdy ktoś wkleja Twój URL do tweeta, crawler X odwiedza stronę, czyta meta-tagi i kompiluje podgląd. Jeśli tagi są nieobecne lub źle skonfigurowane, podgląd jest niekompletny lub całkowicie nieobecny.
Dwa ważne typy kart
X obsługuje wiele typów kart, ale w praktyce spotkasz tylko dwa:
- Summary Card — Kompaktowy podgląd z małą miniaturą po lewej stronie oraz tytułem i opisem po prawej. To używają większość postów na blogach, artykułów i stron dokumentacyjnych. Miniatura jest kwadratowa, zwykle co najmniej 144×144 pikseli.
- Summary Card with Large Image — Obraz zajmuje pełną szerokość nad tekstem. Działa to dobrze dla stron docelowych, stron produktów, prac portfolio lub każdej strony, gdzie wizualizacja jest głównym przyciągaczem uwagi. Obraz powinien mieć co najmniej 300×157 pikseli, idealnie 1200×628 dla ostrego wyświetlania na ekranach o wysokiej rozdzielczości.
Wcześniej istniały inne typy (Player Card dla audio/wideo, App Card dla aplikacji mobilnych), ale większość witryn nigdy ich nie będzie potrzebować.
Meta-tagi, których potrzebujesz
Umieść je w sekcji <head> swojej strony:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tytuł Twojej strony" />
<meta name="twitter:description" content="Krótki opis Twojej strony." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@TwojUchwyt" />Tag twitter:card określa układ. Tag twitter:site jest opcjonalny, ale dodaje Twój uchwyt jako atrybucję pod kartą.
Fallback Open Graph
Oto coś, czego wielu właścicieli witryn nie zdaje sobie sprawy: X cofa się do tagów Open Graph (tych używanych przez Facebook, LinkedIn i WhatsApp), jeśli tagi specyficzne dla Twittera są nieobecne. Tak więc jeśli już ustawiłeś og:title, og:description i og:image, Twój link nadal wyświetli podgląd na X — tylko bez wyraźnej kontroli, którą dają tagi Twitter Card.
W praktyce oznacza to, że dobrze skonfigurowana wtyczka SEO, taka jak Yoast lub Rank Math, często automatycznie zajmuje się podstawami. Ale poleganie na fallbacku ma wady: wymiary obrazu mogą nie być idealne dla układu X, a opis może być inaczej obcięty. Dla najczystszego rezultatu skonfiguruj oba zestawy tagów.
Częste problemy w praktyce
Nawet gdy tagi są obecne, coś może nadal pójść nie tak:
- Problemy z cache — X agresywnie buforuje podglądy kart. Jeśli naprawisz zepsuty obraz lub zaktualizujesz tytuł, stary podgląd może utrzymywać się przez wiele dni. Możesz wymusić odświeżenie za pomocą narzędzia Card Validator X.
- Obraz zbyt mały — Jeśli Twój obraz jest poniżej minimalnego rozmiaru, X może całkowicie go zignorować i w ogóle nie wyświetlić obrazu podglądu.
- URL-e względne — Wartość
twitter:imagemusi być absolutnym URL-em. Ścieżki względne takie jak/images/header.jpgnie zadziałają. - Roboty blokują crawler — Jeśli Twój
robots.txtblokuje Twitterbota, X nie może odczytać Twoich meta-tagów i nie zostanie wygenerowana żadna karta.
Jak WordPress obsługuje Twitter Cards
Sam WordPress domyślnie nie wyświetla meta-tagów Twitter Card. Potrzebujesz wtyczki SEO (Yoast SEO, Rank Math, The SEO Framework) lub dedykowanej wtyczki mediów społecznościowych, aby je generować. Większość tych wtyczek pozwala ustawić domyślny typ karty dla całej witryny i nadpisać obraz oraz opis per post lub strona.
Jeśli używasz WooCommerce, sprawdź strony produktów osobno — czasami wymagają dodatkowej konfiguracji, ponieważ obraz i opis produktu powinny pochodzić z danych produktu, a nie z ogólnych pól strony.
Jak pomaga InspectWP
InspectWP odczytuje meta-tagi w Twojej witrynie WordPress i pokazuje dokładnie, jakie tagi Twitter Card są obecne — lub brakujące. Raport pokazuje wykryty typ karty, tytuł, opis, URL obrazu i uchwyt witryny, dzięki czemu możesz zweryfikować, że podgląd wygląda tak, jak chcesz, zanim udostępnisz swoją treść.