# Open Graph — co to jest i jak ustawić og:image

> Open Graph to tagi, z których Facebook, LinkedIn, X czy WhatsApp budują podgląd linku. Tagi do skopiowania, rozmiar 1200×630 i najczęstsze błędy.

Opublikowano 2026-11-04 · https://shareglint.com/pl/guides/what-is-an-open-graph-image

**Open Graph** to zestaw tagów meta w sekcji `<head>`, z których Facebook, LinkedIn, X, Slack, Discord, WhatsApp i iMessage budują podgląd udostępnionego linku: tytuł, opis i obrazek. Ten obrazek ustawia jeden tag — `<meta property="og:image" content="https://example.com/og/post.png">` — a robot każdej platformy pobiera go przy pierwszym udostępnieniu linku. Rozmiar, który działa wszędzie, to **1200×630 pikseli**, JPEG lub PNG poniżej 600 KB; pełna lista udokumentowanych limitów jest w [tabeli wymiarów grafiki do linku](https://shareglint.com/pl/og-image-size), a każdy tag `og:` z przykładem — w [ściądze Open Graph](https://shareglint.com/pl/open-graph).

## Minimalny zestaw tagów do skopiowania

Wklej to do `<head>` każdej strony, z jej własnymi wartościami:

```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:type" content="article">
<meta property="og:url" content="https://example.com/blog/image-pipeline">
<meta property="og:image" content="https://example.com/og/image-pipeline.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<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">
```

Po co jest każda linia:

| Tag | Co robi |
|---|---|
| `og:title`, `og:type`, `og:url`, `og:image` | Cztery właściwości, które [protokół Open Graph](https://ogp.me/) nazywa wymaganymi |
| `og:description` | Linijka pod tytułem; LinkedIn i WhatsApp podają ją jako wymaganą |
| `og:image:width`, `og:image:height` | Pozwalają Facebookowi pokazać obrazek od razu, bez asynchronicznego pobierania i przetwarzania go ([Meta](https://developers.facebook.com/docs/sharing/webmasters/images)); Discord bez nich pobiera obrazek tylko po to, żeby go zmierzyć |
| `og:image:alt` | Opis obrazka, „nie podpis”; ogp.me mówi, że strona z `og:image` powinna go ustawić |
| `twitter:card` | Wybiera układ karty na X; `summary_large_image` to duży obrazek nad tytułem |

Open Graph używa atrybutu `property=`, a Twitter Cards — `name=`. Większość parserów przyjmie jedno i drugie, ale trzymanie się każdej specyfikacji oszczędza niespodzianek.

## Jak czytają go poszczególne platformy

Po wklejeniu linku platforma pobiera HTML strony, czyta tagi, a potem ściąga obrazek ze swoich serwerów. Apple pisze wprost, że Wiadomości nie uruchamiają JavaScriptu, a żadna inna platforma nie dokumentuje, że to robi — więc przyjmij, że widzą tylko HTML wysłany przez serwer. Co dokumentuje każda z nich:

- **Facebook** (robot `facebookexternalhit`) wymienia `og:url`, `og:title`, `og:description` i `og:image` jako podstawowe tagi ([Meta](https://developers.facebook.com/docs/sharing/webmasters/)), a właściwości Open Graph muszą się znaleźć w pierwszym 1 MB strony ([roboty Meta](https://developers.facebook.com/docs/sharing/webmasters/web-crawlers)).
- **LinkedIn** pisze, że `og:title`, `og:image`, `og:description` i `og:url` „muszą istnieć” ([Pomoc LinkedIn](https://www.linkedin.com/help/linkedin/answer/a521928)).
- **X** czyta własne tagi `twitter:`, a gdy któregoś brak, sięga po `og:title`, `og:description` i `og:image`. Bez `twitter:card` „może zostać wyświetlona karta summary” — ta mała, z kwadratowym obrazkiem ([X, znaczniki kart, archiwum](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup)).
- **Slack** (`Slackbot-LinkExpanding`) czyta oEmbed, Twitter Cards i Open Graph, a wynik trzyma „około 30 minut” ([Slack](https://api.slack.com/robots)). Przy rozwijaniu linków nie respektuje `robots.txt`.
- **Discord** czyta tagi `og:` i `twitter:` oraz `theme-color` dla paska koloru, pokazuje mały obrazek, chyba że `twitter:card` to `summary_large_image`, i daje stronie 10 sekund ([Discord](https://docs.discord.com/developers/link-previews/overview)).
- **WhatsApp** potrzebuje `og:title`, `og:description`, `og:url` i bezwzględnego adresu `og:image` poniżej 600 KB, a `<head>` musi się zmieścić w pierwszych 300 KB HTML-a ([Meta](https://developers.facebook.com/documentation/business-messaging/whatsapp/link-previews/)).
- **iMessage** czyta tagi Open Graph, idzie za przekierowaniami serwera, ale nie za tymi z JavaScriptu, i chce obrazków o szerokości co najmniej 900 px ([Apple TN3156](https://developer.apple.com/documentation/technotes/tn3156-create-rich-previews-for-messages)).

Dla programisty wynikają z tego dwie zasady: tagi muszą być w HTML-u, który wysyła serwer, a adres obrazka musi być bezwzględny i publiczny — robot pobiera go bez twoich ciasteczek.

## og:image a twitter:image

X ma własne tagi (Twitter Cards). `twitter:card` wybiera układ, `twitter:image` obrazek, `twitter:title` i `twitter:description` tekst. Trzy ostatnie zastępuje ich odpowiednik z Open Graph; `twitter:card` w razie braku daje tylko małą kartę summary. Zwykle wystarcza więc `og:image` plus jedna linia:

```html
<meta name="twitter:card" content="summary_large_image">
```

`twitter:image` ustawiaj tylko wtedy, gdy X ma dostać inny obrazek niż reszta świata. Duża karta ma proporcje 2:1, a zwykła karta `summary` przycina obrazek do kwadratu, więc 1200×630 pasuje do `summary_large_image`, nie do `summary`.

## Najczęstsze błędy i jak je zobaczyć

Sześć typowych przyczyn, każda ze sposobem na sprawdzenie:

1. **Względny adres obrazka.** `content="/og/post.png"` działa w przeglądarce, ale nie wszędzie indziej: WhatsApp prosi o adres bezwzględny, a Discord przyjmie względny tylko zaczynający się od `/`. Zawsze pisz protokół i domenę.
2. **Obrazek odpowiada 404, 403 albo przekierowaniem na stronę logowania.** Robot jest anonimowy. Otwórz adres obrazka w oknie prywatnym — jeśli widzisz cokolwiek poza obrazkiem, robot widzi to samo. Ten sam objaw dają ochrona przed hotlinkowaniem i zapory blokujące boty.
3. **Tagi dodawane JavaScriptem.** Aplikacja SPA, która ustawia meta tagi po załadowaniu, ryzykuje pusty podgląd: Wiadomości nie uruchamiają skryptów, a żadna inna platforma nie twierdzi, że to robi. Renderuj tagi na serwerze albo przy budowaniu strony.
4. **Zły rozmiar lub plik.** Poniżej 600×315 Facebook pokazuje mały obrazek; poniżej 401 px szerokości LinkedIn pokazuje miniaturkę; WhatsApp chce pliku poniżej 600 KB. [Ściąga z rozmiarami](https://shareglint.com/pl/og-image-size) zbiera limity każdej platformy i ma sprawdzarkę w przeglądarce.
5. **Tagi za daleko w kodzie strony.** Facebook czyta właściwości Open Graph tylko w pierwszym 1 MB, WhatsApp w pierwszych 300 KB. Umieść je wysoko w `<head>`, przed dużymi skryptami i stylami wpisanymi w stronę.
6. **Stary podgląd w pamięci platformy.** Poprawiony tag nie zmienia karty, którą już pobrano. Facebook zapamiętuje obrazki po adresie, więc nowy obrazek daj pod nowym adresem i pobierz stronę ponownie w [Sharing Debuggerze](https://developers.facebook.com/tools/debug/). LinkedIn odświeża podgląd w [Post Inspectorze](https://www.linkedin.com/post-inspector/). Slack i Discord trzymają podglądy około 30 minut; X nie dokumentuje żadnego narzędzia do odświeżania.

Wszystko naraz zobaczysz w naszym darmowym [OG Checkerze](https://shareglint.com/pl/tools/og-checker): pobiera stronę jak robot, wypisuje brakujące i błędne tagi i pokazuje kartę na X, LinkedInie, Facebooku, w Slacku i na Discordzie. [Poradnik o niedziałającym podglądzie](https://shareglint.com/pl/guides/og-image-not-showing) przechodzi przez każdą platformę krok po kroku.

## Jaki obrazek OG działa dobrze

W aktualnościach obrazek ma kilkaset pikseli szerokości, w komunikatorach jeszcze mniej, a obok stoi twój tytuł zwykłym tekstem. Dlatego:

- **Duży krój, mało słów.** Tytuł w rozmiarze 60–80 px na płótnie szerokim na 1200 px pozostaje czytelny po zmniejszeniu; tekst wielkości akapitu już nie. Apple w ogóle odradza tekst na obrazkach podglądu, bo Wiadomości pokazują je w różnych rozmiarach.
- **Z dala od krawędzi.** Duża karta X ma 2:1, a jak przycina inne proporcje, nie jest udokumentowane. Tytuł i logo trzymaj w środkowym obszarze 1200×600.
- **Spójny branding.** Logo albo pasek koloru zawsze w tym samym miejscu sprawia, że twoje linki da się rozpoznać w zatłoczonym strumieniu.
- **Małe pliki.** Nasze własne karty tekstowe 1200×630 jako JPEG ważą 55–60 KB; czegokolwiek używasz, zmieść się poniżej 600 KB, które dopuszcza WhatsApp.

## Jak strony robią osobny obrazek dla każdej podstrony

Jeden obrazek dla całej witryny wystarczy na stronie głównej; dla artykułów, produktów, dokumentacji i ofert pracy lepiej działa obrazek z tytułem danej strony. Typowe sposoby:

1. **Ręcznie** w programie graficznym — dobre dla kilku stron.
2. **Przy budowaniu strony albo w zadaniu w tle**, przeglądarką bez interfejsu (Puppeteer, Playwright) albo biblioteką do rysowania (Pillow, GD, Satori/`next/og`). Każdy obrazek jest darmowy, ale utrzymujesz renderer, kroje pisma i pamięć.
3. **Przez API do obrazków**: trzymasz szablon i wysyłasz pola strony — z serwera albo jako podpisany adres wpisany prosto w tag `og:image`. Shareglint jest jednym z takich API: 153 wbudowanych [szablonów](https://shareglint.com/pl/templates) 1200×630, własny HTML i CSS ([HTML do obrazka](https://shareglint.com/pl/html-to-image)) oraz plan Free z 100 obrazkami miesięcznie — zapytanie pokazuje [dokumentacja API](https://shareglint.com/pl/docs). Inne to m.in. Bannerbear, Placid i HTMLCSStoImage; zobacz [porównanie](https://shareglint.com/en/guides/bannerbear-vs-placid).
4. **Zrzutem ekranu samej strony** — szybko, ale zrzut z komputera ma złe proporcje i trudno go odczytać w miniaturce; [kiedy zrzuty mają sens](https://shareglint.com/pl/guides/screenshot-api-vs-templates).

Instrukcje dla frameworków: [Next.js](https://shareglint.com/pl/guides/nextjs-og-images-without-vercel-og-limits), [Laravel](https://shareglint.com/en/guides/dynamic-og-images-laravel), [Rails](https://shareglint.com/en/guides/dynamic-og-images-rails), [Django](https://shareglint.com/en/guides/dynamic-og-images-django), [WordPress](https://shareglint.com/en/guides/wordpress-og-images-without-code) i [strony statyczne](https://shareglint.com/en/guides/og-images-static-sites-hugo-jekyll-astro) (te cztery po angielsku).

## FAQ

### Open Graph — co to jest?

Open Graph to protokół, czyli zestaw tagów meta w sekcji head strony (og:title, og:description, og:image, og:url, og:type). Facebook, LinkedIn, X, Slack, Discord, WhatsApp i iMessage czytają je, gdy ktoś wkleja link, i budują z nich kartę podglądu z tytułem, opisem i obrazkiem.

### Czy og:image jest obowiązkowy?

Protokół Open Graph wymienia og:image wśród czterech wymaganych właściwości, obok og:title, og:type i og:url, a LinkedIn i WhatsApp zaliczają go do tagów potrzebnych do podglądu. Bez niego większość platform pokazuje sam tekst.

### Jaki rozmiar powinien mieć obrazek og:image?

1200×630 pikseli (1,91:1), JPEG lub PNG poniżej 600 KB. Spełnia to zalecenie Facebooka, minimum LinkedIna 1200×627, limity kart X i limit 600 KB WhatsAppa.

### Czym się różni og:image od twitter:image?

og:image pochodzi z protokołu Open Graph i czyta go prawie każda platforma. twitter:image to własny tag X; X używa go, gdy jest, a gdy go brak, bierze og:image. Ustaw też twitter:card na summary_large_image, bo bez tego X może pokazać małą kartę summary.

### Dlaczego wciąż widać stary obrazek podglądu?

Platformy trzymają podglądy w pamięci podręcznej. Facebook zapamiętuje obrazki po adresie, więc nowy obrazek daj pod nowym adresem i pobierz stronę ponownie w Sharing Debuggerze; LinkedIn odświeża podgląd w Post Inspectorze; Slack i Discord trzymają go około 30 minut.