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; 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:
<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 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 i WhatsApp 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); 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:
<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). 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):
| 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.
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ówog:.- Linki oEmbed — Slack i Discord wolą punkt końcowy oEmbed, jeśli strona go ogłasza.
Trzy zasady, których pilnują roboty
- Tagi muszą być w HTML-u, który wysyła serwer. Roboty takie jak
facebookexternalhit,LinkedInBot,TwitterbotiSlackbotnie czekają na JavaScript. Tagi wstawione przez aplikację SPA po załadowaniu są dla nich niewidoczne; renderuj je na serwerze albo przy budowaniu strony. - Adresy są bezwzględne i da się je pobrać. Obrazek musi odpowiedzieć robotowi kodem
200bez ciasteczek, logowania i ochrony przed botami, z obrazkowymContent-Type. - 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 podaje narzędzie do odświeżania każdej platformy.
Sprawdź, co odczytuje robot
Odczytaj tagi tak jak robot, bez uruchamiania JavaScriptu:
curl -sL -A "facebookexternalhit/1.1" https://example.com/blog/post \
| grep -Eio '<meta[^>]+(og:|twitter:)[^>]+>'
Albo wklej adres do OG Checkera, który pokazuje kartę na X, LinkedInie, Facebooku, w Slacku i na Discordzie i wskazuje brakujące tagi; generator meta tagów 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 — tam szczegółowo o samym obrazku.
