# Open Graph — wszystkie tagi og: z przykładami

> Open Graph — co to jest: każdy tag og: i twitter: z przykładem, typy obiektów, tablice i właściwości strukturalne oraz jak sprawdzić, co widzi robot.

Opublikowano 2026-11-04 · https://shareglint.com/pl/open-graph

**Open Graph** to zestaw tagów meta `og:` w sekcji `<head>` strony, który mówi serwisom społecznościowym i komunikatorom, czym ta strona jest: jaki ma tytuł, typ, kanoniczny adres i obrazek. Facebook opublikował go w 2010 roku na [ogp.me](https://ogp.me/); dziś czyta go prawie każdy robot budujący podgląd linku — LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram, Mastodon — żeby narysować kartę, którą widzisz po udostępnieniu linku. Wymagane są cztery tagi: `og:title`, `og:type`, `og:image` i `og:url`. Ta strona zbiera wszystkie tagi zdefiniowane w protokole, każdy z przykładem, oraz tagi `twitter:`, które X czyta dodatkowo.

## Kompletny przykład

Zestaw, który działa na każdej dużej platformie, dla wpisu na blogu:

```html
<head prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#">
  <meta property="og:title" content="How we cut our image pipeline to 900 ms">
  <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 property="og:description" content="Moving rendering off the request path and caching by content hash.">
  <meta property="og:site_name" content="Example Engineering">
  <meta property="og:locale" content="en_US">
  <meta property="article:published_time" content="2026-11-04T09:00:00Z">
  <meta property="article:author" content="https://example.com/team/anna">
  <meta name="twitter:card" content="summary_large_image">
</head>
```

Atrybut `prefix` deklaruje przestrzenie nazw (RDFa). Roboty odczytają tagi i bez niego, ale tak pokazuje to specyfikacja i niczemu to nie szkodzi.

## Cztery wymagane właściwości

| Tag | Co zawiera | Przykład |
|---|---|---|
| `og:title` | Tytuł „tak, jak ma się pojawić w grafie” — zwykle tytuł strony bez nazwy serwisu | `How we cut our image pipeline to 900 ms` |
| `og:type` | Typ obiektu; `website` dla większości stron, `article` dla wpisów (typy niżej) | `article` |
| `og:image` | Bezwzględny adres obrazka, który reprezentuje stronę | `https://example.com/og/post.png` |
| `og:url` | Kanoniczny adres, używany jako stały identyfikator obiektu | `https://example.com/blog/image-pipeline` |

`og:url` znaczy więcej, niż się wydaje: platformy zapisują pod nim w pamięci podręcznej podgląd i liczniki polubień i udostępnień. Wskaż adres kanoniczny, nie ten z parametrami śledzącymi — inaczej ta sama strona dorobi się kilku podglądów.

Dla `og:image` rozmiar, który zadowala naraz Facebooka, LinkedIna, X i WhatsAppa, to **1200×630** pikseli, JPEG lub PNG poniżej 600 KB — [tabela rozmiarów dla każdej platformy](https://shareglint.com/pl/og-image-size) podaje udokumentowane minimum, maksimum i przycięcie na każdej z nich. Używaj bezwzględnego adresu `https://`: ścieżki względne to najczęstszy powód, dla którego obrazek się nie pokazuje.

## Właściwości opcjonalne

| Tag | Co zawiera | Przykład |
|---|---|---|
| `og:description` | Podsumowanie w jednym–dwóch zdaniach | `Moving rendering off the request path…` |
| `og:site_name` | Nazwa całego serwisu | `Example Engineering` |
| `og:locale` | Język strony w formacie `język_TERYTORIUM`; domyślnie `en_US` | `pl_PL` |
| `og:locale:alternate` | Inne języki, w których strona istnieje (tablica) | `de_DE` |
| `og:determiner` | Słowo przed tytułem w zdaniu: `a`, `an`, `the`, `""` albo `auto` | `the` |
| `og:video` | Adres pliku wideo, który uzupełnia stronę | `https://example.com/clip.mp4` |
| `og:audio` | Adres pliku audio | `https://example.com/episode.mp3` |

`og:description` jest w protokole opcjonalny, ale [LinkedIn](https://www.linkedin.com/help/linkedin/answer/a521928) i [WhatsApp](https://developers.facebook.com/docs/whatsapp/link-previews/) wymieniają go wśród tagów potrzebnych do pełnego podglądu. Traktuj go jak wymagany.

`og:determiner` prawie nikt nie używa. Służył do zdań w rodzaju „Anna read *the* Hobbit” w strumieniach aktywności, których już nie ma; nic, co dziś udostępniasz, go nie pokazuje.

## Właściwości strukturalne og:image, og:video i og:audio

Właściwość strukturalna dodaje szczegóły do tagu stojącego nad nią:

| Tag | Znaczenie |
|---|---|
| `og:image:url` | To samo co `og:image` |
| `og:image:secure_url` | Adres HTTPS, dla stron, które serwują obrazek także przez HTTP |
| `og:image:type` | Typ MIME, np. `image/png` |
| `og:image:width`, `og:image:height` | Rozmiar w pikselach |
| `og:image:alt` | „Opis tego, co jest na obrazku (nie podpis)” |
| `og:video:url`, `:secure_url`, `:type`, `:width`, `:height` | To samo dla wideo |
| `og:audio:url`, `:secure_url`, `:type` | To samo dla audio (bez rozmiaru) |

Szerokość i wysokość warto ustawić. Meta pisze, że pozwalają Facebookowi „wyrenderować obrazek od razu, bez asynchronicznego pobierania i przetwarzania go” ([poradnik Meta o obrazkach](https://developers.facebook.com/docs/sharing/webmasters/images)); bez nich pierwsze udostępnienie nowego linku może wyjść bez obrazka. `og:image:alt` odczytują czytniki ekranu na platformach, które go obsługują, a ogp.me mówi, że strona z `og:image` powinna go ustawić.

## Tablice: więcej niż jedna wartość

Żeby podać kilka wartości, powtórz tag. Zasada protokołu: „Pierwszy tag (od góry do dołu) ma pierwszeństwo przy konfliktach”, a właściwości strukturalne należą do tagu głównego nad nimi, dopóki nie zacznie się następny tag główny:

```html
<meta property="og:image" content="https://example.com/og/wide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/og/square.png">
<meta property="og:image:width" content="1080">
<meta property="og:image:height" content="1080">
```

Tutaj platforma, która bierze jeden obrazek, weźmie `wide.png`. Głównym czytnikiem, który używa więcej, jest Discord: do czterech tagów `og:image` zamienia w galerię ([podglądy linków w Discordzie](https://docs.discord.com/developers/link-previews/overview)). Obrazek, który ma się pokazać wszędzie, daj jako pierwszy.

## Typy obiektów (og:type)

Każda strona ma typ. Typy globalne, każdy z własną przestrzenią nazw i dodatkowymi właściwościami:

| `og:type` | Dodatkowe właściwości |
|---|---|
| `website` | Brak. Każda strona bez znaczników jest traktowana jak `website`. |
| `article` | `article:published_time`, `article:modified_time`, `article:expiration_time` (ISO 8601), `article:author` (adresy profili, tablica), `article:section`, `article:tag` (tablica) |
| `profile` | `profile:first_name`, `profile:last_name`, `profile:username`, `profile:gender` |
| `book` | `book:author`, `book:isbn`, `book:release_date`, `book:tag` |
| `music.song` | `music:duration` (sekundy), `music:album`, `music:album:disc`, `music:album:track`, `music:musician` |
| `music.album` | `music:song`, `music:song:disc`, `music:song:track`, `music:musician`, `music:release_date` |
| `music.playlist`, `music.radio_station` | `music:song…`, `music:creator` |
| `video.movie` | `video:actor`, `video:actor:role`, `video:director`, `video:writer`, `video:duration`, `video:release_date`, `video:tag` |
| `video.episode` | jak `video.movie`, plus `video:series` |
| `video.tv_show`, `video.other` | jak `video.movie` |

ogp.me wymienia też `payment.link`, oznaczony jako beta. W praktyce: `website` dla strony głównej i stron produktów, `article` dla wszystkiego, co ma datę publikacji. Podgląd wygląda tak samo w obu przypadkach; typ ma znaczenie dla parserów, które czytają dodatkowe właściwości.

Wartości też mają typy: Boolean (`true`, `false`, `1`, `0`), DateTime (ISO 8601), Enum, Float, Integer (32-bitowy), String i URL (tylko http lub https).

## Tagi twitter:, które czyta X

X ma własne tagi, Twitter Cards, a dla większości z nich sięga po Open Graph, gdy ich brakuje ([znaczniki kart X, archiwum](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup)):

| Tag | Zastępuje go | Uwagi |
|---|---|---|
| `twitter:card` | — | `summary`, `summary_large_image`, `app` albo `player`. Bez niego „może zostać wyświetlona karta summary” — ta mała |
| `twitter:title` | `og:title` | Maks. 70 znaków |
| `twitter:description` | `og:description` | Maks. 200 znaków |
| `twitter:image` | `og:image` | Poniżej 5 MB; JPG, PNG, WEBP, GIF (pierwsza klatka); bez SVG |
| `twitter:image:alt` | `og:image:alt` | Maks. 420 znaków |
| `twitter:site`, `twitter:creator` | — | `@nazwa` konta serwisu i autora |

Minimalny dodatek do strony z Open Graph to więc jedna linia: `<meta name="twitter:card" content="summary_large_image">`. Rozmiary, typy kart i powody, dla których karta się nie pokazuje, opisuje [strona o Twitter card](https://shareglint.com/pl/twitter-card).

## Inne tagi, które czytają roboty

- `fb:app_id` — wiąże stronę z aplikacją Facebooka na potrzeby statystyk. Opcjonalny; Sharing Debugger ostrzega, gdy go brak, ale to nie jest błąd.
- `theme-color` — Discord używa go do kolorowego paska obok osadzenia.
- `<link rel="canonical">`, `<title>`, `<meta name="description">` — wartości zastępcze, gdy brakuje tagów `og:`.
- Linki oEmbed — Slack i Discord wolą punkt końcowy oEmbed, jeśli strona go ogłasza.

## Trzy zasady, których pilnują roboty

1. **Tagi muszą być w HTML-u, który wysyła serwer.** Roboty takie jak `facebookexternalhit`, `LinkedInBot`, `Twitterbot` i `Slackbot` nie czekają na JavaScript. Tagi wstawione przez aplikację SPA po załadowaniu są dla nich niewidoczne; renderuj je na serwerze albo przy budowaniu strony.
2. **Adresy są bezwzględne i da się je pobrać.** Obrazek musi odpowiedzieć robotowi kodem `200` bez ciasteczek, logowania i ochrony przed botami, z obrazkowym `Content-Type`.
3. **Pamięć podręczna jest kluczowana adresem.** Zmieniony obrazek pod tym samym adresem zostawia stary podgląd, dopóki platforma nie pobierze strony od nowa. Nowemu obrazkowi daj nowy adres (`/og/post.png?v=2`). [Poradnik o niedziałającym podglądzie](https://shareglint.com/pl/guides/og-image-not-showing) podaje narzędzie do odświeżania każdej platformy.

## Sprawdź, co odczytuje robot

Odczytaj tagi tak jak robot, bez uruchamiania JavaScriptu:

```bash
curl -sL -A "facebookexternalhit/1.1" https://example.com/blog/post \
  | grep -Eio '<meta[^>]+(og:|twitter:)[^>]+>'
```

Albo wklej adres do [OG Checkera](https://shareglint.com/pl/tools/og-checker), który pokazuje kartę na X, LinkedInie, Facebooku, w Slacku i na Discordzie i wskazuje brakujące tagi; [generator meta tagów](https://shareglint.com/pl/tools/meta-tag-generator) napisze cały zestaw za ciebie.

## Jak zrobić sam obrazek og:image

Tagi to łatwiejsza część; każda strona potrzebuje własnego obrazka. Możesz go zaprojektować ręcznie dla każdej strony, renderować obrazki przy budowaniu albo na żądanie. Z Shareglint jedno zapytanie HTTP zamienia szablon HTML i tytuł strony w PNG 1200×630 — 153 wbudowanych szablonów albo własny HTML i CSS — a plan Free obejmuje 100 obrazków miesięcznie. [Czym jest obrazek OG i jak pokazuje go każda platforma](https://shareglint.com/pl/guides/what-is-an-open-graph-image) — tam szczegółowo o samym obrazku.

## FAQ

### Open Graph — co to jest?

Open Graph to zestaw tagów meta, opublikowany na ogp.me, który opisuje stronę internetową jako obiekt: jej tytuł, typ, kanoniczny adres i obrazek. Stworzył go Facebook w 2010 roku; dziś czytają go LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram i większość innych robotów budujących podgląd linku, gdy ktoś go udostępnia.

### Które tagi Open Graph są wymagane?

Protokół wymaga czterech: og:title, og:type, og:image i og:url. og:description jest w protokole opcjonalny, ale LinkedIn i WhatsApp wymieniają go jako potrzebny do pełnego podglądu, więc w praktyce ustaw pięć.

### Tagi Open Graph: atrybut property czy name?

Przykłady w protokole używają atrybutu property (RDFa), np. <meta property="og:title" content="…">. Tagi Twitter Cards używają name. Większość parserów przyjmie jedno i drugie, ale trzymanie się każdej specyfikacji oszczędza niespodzianek przy bardziej rygorystycznych parserach.

### Co się dzieje, gdy strona nie ma tagów Open Graph?

Protokół mówi, że strona bez znaczników ma być traktowana jak og:type website. Każda platforma zgaduje wtedy sama: z <title>, z meta description i z obrazka znalezionego na stronie. Wynik zależy od platformy i często jest to karta bez obrazka.

### Czy strona może mieć więcej niż jeden og:image?

Tak. Powtórz tag; właściwości strukturalne, takie jak og:image:width, należą do og:image stojącego nad nimi. Gdy platforma chce jednej wartości, wygrywa pierwszy tag. Discord pokazuje do czterech obrazków jako galerię; większość pozostałych bierze pierwszy.

### Jak przetestować tagi Open Graph?

Pobierz stronę tak jak robot (bez JavaScriptu) i odczytaj tagi meta albo użyj sprawdzarki, która pokazuje podgląd na każdej platformie. Sharing Debugger Facebooka i Post Inspector LinkedIna pokazują, co odczytują te dwie platformy, i odświeżają ich pamięć podręczną; w przypadku X wklej link do okna tworzenia posta.