Open Graph — co to jest i jak ustawić og: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, a każdy tag og: z przykładem — w ściądze Open Graph.

Minimalny zestaw tagów do skopiowania

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

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

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), a właściwości Open Graph muszą się znaleźć w pierwszym 1 MB strony (roboty Meta).
• LinkedIn pisze, że og:title, og:image, og:description i og:url „muszą istnieć” (Pomoc LinkedIn).
• 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).
• Slack (Slackbot-LinkExpanding) czyta oEmbed, Twitter Cards i Open Graph, a wynik trzyma „około 30 minut” (Slack). 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).
• 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).
• 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).

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:

<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 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. LinkedIn odświeża podgląd w Post Inspectorze. 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: 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 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 1200×630, własny HTML i CSS (HTML do obrazka) oraz plan Free z 100 obrazkami miesięcznie — zapytanie pokazuje dokumentacja API. Inne to m.in. Bannerbear, Placid i HTMLCSStoImage; zobacz porównanie.
4. Zrzutem ekranu samej strony — szybko, ale zrzut z komputera ma złe proporcje i trudno go odczytać w miniaturce; kiedy zrzuty mają sens.

Instrukcje dla frameworków: Next.js, Laravel, Rails, Django, WordPress i strony statyczne (te cztery po angielsku).