# Twitter card (X): rozmiar grafiki, typy i meta tagi

> Rozmiar grafiki do Twitter card, summary a summary_large_image, każdy tag twitter: z odpowiednikiem w Open Graph i dlaczego karta nie pokazuje się na X.

Opublikowano 2026-11-04 · https://shareglint.com/pl/twitter-card

**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](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup)):

| `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](https://web.archive.org/web/20260112050218/https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image)). 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](https://web.archive.org/web/20260112050218/https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image) i [karcie summary](https://web.archive.org/web/20251216122910/https://developer.x.com/en/docs/x-for-websites/cards/overview/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](https://shareglint.com/pl/og-image-size) pokazuje, jak przycina każda platforma.
- **Szeroki obrazek w karcie `summary` zostaje przycięty do kwadratu** ze środka. Jeśli karta pokazuje wycinek nagłówka, na stronie brakuje `twitter:card` albo ustawiono `summary`.

## 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:

```html
<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](https://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](https://shareglint.com/pl/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`, linie `deny` w `.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](https://web.archive.org/web/20241202114848/https://developer.x.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards)). 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ą:

1. **Okno tworzenia posta na X.** Wklej adres do nowego posta; karta pojawi się w szkicu. Nie musisz niczego publikować.
2. **Walidator, który czyta tagi.** Nasz [walidator Twitter card](https://shareglint.com/pl/tools/twitter-card-validator) 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.
3. **curl.** Zobacz dokładnie to, co dostaje Twitterbot:

```bash
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](https://shareglint.com/pl/guides/og-image-not-showing) 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.

## FAQ

### Jaki rozmiar ma grafika do Twitter card?

Dla summary_large_image: proporcje 2:1, co najmniej 300×157 i najwyżej 4096×4096 pikseli, poniżej 5 MB. Dla małej karty summary: 1:1, co najmniej 144×144, najwyżej 4096×4096, poniżej 5 MB; obrazek jest przycinany do kwadratu. 1200×630 działa w dużej karcie i na każdej innej platformie.

### Czym się różni summary od summary_large_image?

summary pokazuje małą kwadratową miniaturkę obok tytułu; summary_large_image pokazuje szeroki obrazek na całą szerokość karty. Strony z zaprojektowanym og:image 1200×630 powinny używać summary_large_image, inaczej obrazek zostanie przycięty do kwadratu.

### Czy potrzebuję tagów twitter:, jeśli mam tagi Open Graph?

Tylko twitter:card. Gdy brakuje wersji twitter:, X sięga po og:title, og:description, og:image i og:image:alt, ale twitter:card nie ma odpowiednika w Open Graph: bez niego X może pokazać małą kartę summary.

### Dlaczego Twitter card się nie pokazuje?

Najczęstsze przyczyny: Twitterbota blokuje robots.txt, zapora albo ochrona przed botami; adres obrazka jest względny, za logowaniem, plik ma ponad 5 MB albo jest SVG; tagi dodaje JavaScript po załadowaniu; albo X ma jeszcze w pamięci starą wersję, którą pobiera ponownie mniej więcej co siedem dni.

### Czy wciąż istnieje Twitter Card Validator?

Stary walidator pod cards-dev.x.com przekierowuje na logowanie do X. Pewny test to wklejenie linku do okna tworzenia posta na X, które rysuje kartę bez publikowania, albo zewnętrzny walidator pokazujący tagi, które czyta X.

### Czy grafika do Twitter card może być GIF-em albo WebP?

Tak. X dokumentuje JPG, PNG, WEBP i GIF; z animowanego GIF-a brana jest tylko pierwsza klatka, a SVG nie jest obsługiwany.