Twitter card to podgląd, który X rysuje pod postem z linkiem: obrazek, tytuł, opis i domena. Jej układ wybierasz jednym tagiem, <meta name="twitter:card" content="summary_large_image">; resztę X bierze z własnych tagów twitter:, a gdy ich brakuje — z twoich tagów Open Graph. Duża karta chce obrazka o proporcjach 2:1, od 300×157 do 4096×4096 pikseli, poniżej 5 MB — w praktyce tego samego obrazka 1200×630, którego używa każda inna platforma.
Typy kart
X dokumentuje cztery typy kart (znaczniki kart X, archiwum):
twitter:card |
Co pokazuje | Kiedy go użyć |
|---|---|---|
summary |
Mały kwadratowy obrazek obok tytułu i opisu | Strony bez zaprojektowanego obrazka; logo albo awatar |
summary_large_image |
Szeroki obrazek na całą szerokość karty | Artykuły, produkty, wszystko z og:image 1200×630 |
player |
Wbudowany odtwarzacz wideo lub audio w ramce iframe | Media, które hostujesz; wymaga HTTPS i zatwierdzonego odtwarzacza |
app |
Aplikacja z linkami do instalacji | Aplikacje mobilne w App Store lub Google Play |
Dawne karty Photo i Gallery wycofano i dziś są rysowane jako summary_large_image (dokumentacja X, archiwum). Jeśli nie wiesz, którą wybrać, użyj summary_large_image.
Rozmiar grafiki do Twitter card
summary_large_image |
summary |
|
|---|---|---|
| Proporcje | 2:1 | 1:1, przycinane do kwadratu |
| Minimum | 300×157 px | 144×144 px |
| Maksimum | 4096×4096 px | 4096×4096 px |
| Rozmiar pliku | poniżej 5 MB | poniżej 5 MB |
| Formaty | JPG, PNG, WEBP, GIF (tylko pierwsza klatka); bez SVG | tak samo |
Źródła: strony X o karcie summary z dużym obrazkiem i karcie summary. Dokumentacja kart X zniknęła z developer.x.com, więc to ostatnie zarchiwizowane kopie.
Dwa praktyczne wnioski:
- 1200×630 nadaje się na X. To 1,91:1, blisko 2:1, o które prosi X, i w granicach jego limitów, a do tego spełnia wymagania Facebooka, LinkedIna i WhatsAppa. Trzymaj tekst z dala od krawędzi; tabela rozmiarów obrazków OG pokazuje, jak przycina każda platforma.
- Szeroki obrazek w karcie
summaryzostaje przycięty do kwadratu ze środka. Jeśli karta pokazuje wycinek nagłówka, na stronie brakujetwitter:cardalbo ustawionosummary.
Wszystkie tagi twitter:
| Tag | Zastępuje go | Co zawiera |
|---|---|---|
twitter:card |
— | Typ karty. Bez niego, jeśli istnieją og:type, og:title i og:description, „może zostać wyświetlona karta summary” |
twitter:title |
og:title |
Tytuł, maks. 70 znaków |
twitter:description |
og:description |
Opis, maks. 200 znaków |
twitter:image |
og:image |
Adres obrazka; poniżej 5 MB |
twitter:image:alt |
og:image:alt |
Opis obrazka dla czytników ekranu, maks. 420 znaków |
twitter:site |
— | @nazwa konta serwisu |
twitter:site:id |
— | To samo jako liczbowy identyfikator użytkownika |
twitter:creator |
— | @nazwa konta autora |
twitter:creator:id |
— | To samo jako liczbowy identyfikator użytkownika |
twitter:player |
— | Adres HTTPS ramki iframe odtwarzacza (karta player) |
twitter:player:width, twitter:player:height |
— | Rozmiar ramki w pikselach |
twitter:player:stream |
— | Adres surowego strumienia wideo lub audio |
twitter:app:name:iphone, :id:iphone, :url:iphone |
— | Karta app: nazwa, identyfikator w App Store, własny schemat adresu (także :ipad, :googleplay) |
Dwie strony X nie zgadzają się co do twitter:site: dokumentacja znaczników mówi „Either twitter:site or twitter:site:id is required” (wymagany jest jeden z nich), a strony poszczególnych kart oznaczają go jako opcjonalny. Ustaw go, gdy masz konto, któremu karta ma być przypisana.
Minimalne znaczniki
Jeśli strona ma już tagi Open Graph, X potrzebuje jeszcze jednej linii:
<meta property="og:title" content="How we cut our image pipeline to 900 ms">
<meta property="og:description" content="Moving rendering off the request path and caching by content hash.">
<meta property="og:image" content="https://example.com/og/image-pipeline.png">
<meta property="og:image:alt" content="Title card: How we cut our image pipeline to 900 ms">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
twitter:title, twitter:description czy twitter:image ustawiaj tylko wtedy, gdy X ma dostać coś innego niż reszta świata — krótszy tytuł, który zmieści się w 70 znakach, albo kadr 2:1 z kwadratowego obrazka. Tagi Twitter Cards używają name=, a Open Graph property= (ogp.me). Większość parserów przyjmie jedno i drugie, ale trzymanie się każdej specyfikacji oszczędza niespodzianek przy rygorystycznych parserach. Pełna lista właściwości og: jest w przewodniku po Open Graph.
Jak X pobiera kartę
Robot X przedstawia się jako Twitterbot (na przykład Twitterbot/1.0). Gdy link zostaje opublikowany po raz pierwszy, pobiera stronę, czyta tagi z HTML-a i ściąga obrazek. Co z tego wynika:
- Tagi muszą być w HTML-u z serwera. Twitterbot nie uruchamia twojego JavaScriptu. Aplikacja w React czy Vue, która ustawia meta tagi w przeglądarce, nie pokaże karty; renderuj tagi na serwerze albo przy budowaniu strony.
- Twitterbot musi mieć wstęp. Poradnik X o rozwiązywaniu problemów wymienia reguły w
robots.txt, liniedenyw.htaccess, ustawienia CMS-a i hostingi blokujące zakresy IP robota jako typowe powody braku karty i zaznacza, że robot „zwykle pobiera obrazki do 5 MB” (rozwiązywanie problemów X, archiwum). Ochrona przed botami, która serwuje stronę z wyzwaniem, daje ten sam efekt. - HTTPS musi działać ze starszym klientem. Ten sam poradnik wymaga TLS 1.1 lub nowszego i poprawnego łańcucha certyfikatów.
- Karty trafiają do pamięci podręcznej. X pobiera stronę ponownie „mniej więcej co siedem dni”. Nie ma przycisku do odświeżenia: żeby zobaczyć zmianę wcześniej, udostępnij adres, którego X jeszcze nie widział (dopisz
?v=2), a nowemu obrazkowi daj nową nazwę pliku.
Jak przetestować kartę
Stary Card Validator pod cards-dev.x.com/validator przekierowuje teraz na logowanie do X (sprawdzone 2026-11-04). Trzy sposoby, które działają:
- Okno tworzenia posta na X. Wklej adres do nowego posta; karta pojawi się w szkicu. Nie musisz niczego publikować.
- Walidator, który czyta tagi. Nasz walidator Twitter card pobiera stronę jak robot, pokazuje kartę, którą narysowałby X, i tag użyty dla każdego pola, a także wskazuje brak
twitter:card, względny adres obrazka albo obrazek poniżej minimum. - curl. Zobacz dokładnie to, co dostaje Twitterbot:
curl -sL -A "Twitterbot/1.0" https://example.com/blog/post \
| grep -Eio '<meta[^>]+(og:|twitter:)[^>]+>'
Jeśli curl pokazuje tagi, a adres obrazka otwiera się w oknie prywatnym, zostają dwaj podejrzani: ochrona przed botami i pamięć podręczna X. Poradnik o niedziałającym podglądzie przechodzi przez każdą przyczynę na każdej platformie.
Najczęstsze błędy
| Objaw | Przyczyna | Rozwiązanie |
|---|---|---|
| Mała kwadratowa miniaturka zamiast szerokiego obrazka | Brak twitter:card albo summary |
<meta name="twitter:card" content="summary_large_image"> |
| Ucięty nagłówek na obrazku | Szeroki obrazek w karcie summary albo tekst przy krawędziach |
Użyj summary_large_image; trzymaj tekst na środku |
| Brak karty | Zablokowany Twitterbot, tagi dodawane JavaScriptem, obrazek powyżej 5 MB albo SVG | Sprawdź robots.txt i reguły dla botów; renderuj tagi na serwerze; serwuj JPG/PNG |
| Stary obrazek po aktualizacji | Pamięć podręczna X (ok. 7 dni) kluczowana adresem | Nowa nazwa pliku obrazka; udostępnij zmieniony adres |
| Karta działa na Facebooku, nie na X | Facebook pobrał stronę ponownie, X nie; albo X blokuje reguła zapory | Poczekaj albo zmień adres; wpuść Twitterbota |
Jeden obrazek do każdej karty
Najwięcej pracy wymaga obrazek: każdy post potrzebuje własnego, w rozmiarze 1200×630, z tytułem czytelnym na ekranie telefonu. Shareglint renderuje go z szablonu HTML i tytułu strony jednym zapytaniem HTTP — 153 wbudowanych szablonów albo własny HTML i CSS — a ten sam szablon renderuje się w każdym rozmiarze z jednego zapytania (og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720), więc karta na X i LinkedIna, kwadrat na Instagram i wysoki pin na Pinterest powstają z jednego projektu. Plan Free obejmuje 100 obrazków miesięcznie.
