Tagi Open Graph: jak ustawić og:image i uzyskać czyste podglądy linków

Autor: SEOgrinder · Opublikowano 4 listopada 2026 · 9 min czytania

Krótka odpowiedź: Tagi Open Graph to znaczniki meta w nagłówku strony, które mówią sieciom społecznościowym i komunikatorom, jaki tytuł, opis i obraz pokazać, gdy ktoś udostępni twój link. Protokół wymaga czterech z nich (og:title, og:type, og:image i og:url), a og:description warto dodać. Użyj obrazu o rozmiarze co najmniej 1200 × 630 pikseli i wadze poniżej 8 MB, podaj jego pełny adres https i umieść wszystkie tagi w HTML-u wysyłanym przez serwer, a nie w JavaScripcie, który wykona się dopiero później. Wpływ na pozycje nie jest udowodniony: tagi decydują o tym, jak wygląda udostępniony link.

Czym są tagi Open Graph?

Open Graph to protokół, dzięki któremu strona internetowa opisuje samą siebie jako obiekt: tytułem, typem, obrazem i adresem. Według ogp.me powstał pierwotnie w Facebooku. Stosujesz go, dodając znaczniki meta w elemencie head strony. Gdy ktoś wklei twój link do posta albo czatu, platforma pobiera stronę, czyta te tagi i buduje z nich kartę podglądu. Bez nich platforma musi zgadywać, jakiego tytułu, opisu i obrazu użyć.

Protokół wymienia cztery wymagane właściwości dla każdej strony oraz jedną opcjonalną, ale ogólnie zalecaną:

Tag	Co zawiera	Status
og:title	Tytuł obiektu, tak jak ma się pojawić w podglądzie	Wymagany
og:type	Rodzaj obiektu, na przykład `website` lub `article`	Wymagany
og:image	Adres obrazu, który reprezentuje stronę	Wymagany
og:url	Kanoniczny adres strony, jej stały identyfikator	Wymagany
og:description	Opis w jednym lub dwóch zdaniach	Opcjonalny, ogólnie zalecany

Wartość og:type to coś więcej niż etykieta. Według ogp.me wybrany typ może wprowadzać dodatkowe właściwości. Dla article protokół wymienia na przykład article:published_time i article:modified_time. Inne opcjonalne tagi to og:site_name (nazwa całej witryny) i og:locale (język oznaczeń, domyślnie en_US).

Minimalny kod HTML dla tagów Open Graph

Oto kompletny zestaw do dopasowania. (Przykład na ogp.me ustawia dodatkowo atrybut prefix na elemencie html; duże platformy czytają tagi także bez niego.) Umieszczasz go w elemencie head, obok zwykłego znacznika title:

<head>
  <title>Tagi Open Graph: jak ustawić og:image</title>
  <meta property="og:title" content="Tagi Open Graph: jak ustawić og:image">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/tagi-open-graph">
  <meta property="og:image" content="https://example.com/images/tagi-open-graph.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Karta podglądu linku z obrazem, tytułem i opisem">
  <meta property="og:description" content="Cztery wymagane tagi Open Graph, zasady dla rozmiaru obrazu i test podglądu linku.">
  <meta property="og:site_name" content="Example">
</head>

Kilka uwag do szczegółów:

og:url to stały identyfikator. ogp.me definiuje go jako kanoniczny adres obiektu. Użyj tego samego adresu co w linku canonical, bez parametrów śledzących.
Adres obrazu pisz w całości. Każdy przykład na ogp.me używa pełnego adresu. Ścieżka względna, taka jak /images/card.png, zależy od tego, jak rozwiązuje ją dany crawler, więc na tym nie polegaj.
Szerokość i wysokość pomagają. Dokumentacja Facebooka mówi, że dzięki tym dwóm tagom jego crawler może od razu wyświetlić obraz, bez konieczności wcześniejszego pobierania i przetwarzania.
Dodaj og:image:alt. ogp.me pisze, że strona podająca obraz powinna też podać opis tego, co jest na obrazie (opis, a nie podpis).

Zasady dla og:image: rozmiar, plik i adres

Najjaśniejsze liczby publikuje Facebook na stronie o obrazach w udostępnianych linkach. Są punktem odniesienia dla reszty tego rozdziału:

Najmniejszy dozwolony rozmiar to 200 × 200 pikseli.
Plik nie może przekraczać 8 MB.
Dla najlepszego wyświetlania na urządzeniach o wysokiej rozdzielczości użyj co najmniej 1200 × 630 pikseli.
Co najmniej 600 × 315 pikseli potrzebujesz, żeby posty z linkiem pokazywały duży obraz. Mniejsze obrazy nadal się wyświetlają, ale dużo mniejsze.
Proporcje trzymaj jak najbliżej 1,91 : 1, aby cały obraz pojawił się bez przycięcia. 1200 × 630 daje około 1,905 : 1, dlatego ten rozmiar jest zwykłym wyborem.
Crawler akceptuje tylko kodowania gzip i deflate, więc sprawdź, czy twój serwer lub CDN odpowiada jednym z nich.

To są zasady Facebooka. Inne aplikacje i komunikatory czytają te same tagi, ale ich limitów ten artykuł nie opisuje, więc testuj tam, gdzie to dla ciebie ważne. Dla porównania: strony bloga SEOgrinder używają obrazu podglądu o rozmiarze 1200 × 630 pikseli.

Dwa dalsze warunki dotyczą dostępu, a nie rozmiaru. Obraz musi być publiczny: bez logowania przed nim i bez reguły w robots.txt, która blokuje katalog, w którym leży. Jeśli crawler nie może pobrać pliku, podgląd nie ma obrazu, choćby plik był świetny.

Nadaj każdej stronie własne tagi Open Graph

Ponieważ og:url jest stałym identyfikatorem obiektu, na każdej stronie musi być inny. To samo dotyczy reszty:

og:title ma nazywać to, o czym jest ta konkretna strona, a nie całą witrynę.
og:description ma streszczać tę stronę w jednym lub dwóch zdaniach.
og:image ma pokazywać coś, co pasuje do strony. Miej jeden obraz domyślny dla stron, które nie mają własnego.
og:type też może się różnić: website dla strony głównej, article dla wpisu na blogu lub wiadomości.

Niezależnie od technologii, generuj tagi z danych każdej strony zamiast pisać je ręcznie. Mały przykład w Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(strona) {
  return [
    ['og:title', strona.tytul],
    ['og:type', strona.typ || 'website'],
    ['og:url', `https://example.com${strona.sciezka}`],
    ['og:image', strona.obraz || 'https://example.com/images/default-card.png'],
    ['og:description', strona.opis],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

Funkcja esc jest ważna: tytuł z cudzysłowem inaczej przedwcześnie zamknąłby atrybut i zepsuł tag. Jeśli używasz CMS-a, poszukaj pola, które ustawia obraz do udostępniania dla każdej strony. Wynik, który sprawdzasz, pozostaje ten sam: tagi w dostarczonym HTML.

Tagi Open Graph muszą być w dostarczonym HTML

Wiele nowoczesnych witryn wysyła niemal pustą powłokę HTML, a stronę buduje dopiero JavaScript w przeglądarce. Google sobie z tym radzi: według dokumentacji o JavaScripcie wyszukiwarka renderuje strony za pomocą stale aktualizowanej wersji Chromium. Ta sama strona mówi jednak także, że renderowanie po stronie serwera lub wstępne renderowanie nadal jest dobrym pomysłem, ponieważ nie wszystkie boty potrafią wykonywać JavaScript.

Dla crawlerów AI istnieje pomiar: w grudniu 2024 roku Vercel i MERJ stwierdzili, że żaden z głównych crawlerów AI, które zbadali, nie wykonywał JavaScriptu. To zdjęcie sytuacji z 2024 roku i od tamtej pory nie zostało ponownie potwierdzone. Dla podglądów linków z tej samej logiki wynika bezpieczna zasada: jeśli twoje tagi pojawiają się dopiero po uruchomieniu skryptu, crawler, który skryptów nie wykonuje, nigdy ich nie zobaczy. SEOgrinder zgłasza takie strony jako „Strona powstaje dopiero w przeglądarce”, z uwagą, że wiele robotów AI nie wykonuje JavaScriptu i widzi niemal pustą stronę.

Możesz to sprawdzić w dziesięć sekund:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

Jeśli tagi wracają, są w dostarczonym HTML. Jeśli nic nie wraca, a w narzędziach deweloperskich przeglądarki tagi widać, to skrypt dodaje je za późno. Ten sam test zrobisz przez „Pokaż źródło strony” w przeglądarce; pokazuje dostarczony HTML, a nie żywą stronę, którą pokazują narzędzia deweloperskie. Rozwiązanie to renderowanie na serwerze albo generowanie stron z wyprzedzeniem, tak by tytuł, tekst i tagi znalazły się już w pierwszej odpowiedzi.

Jak przetestować podgląd linku

Sharing Debugger Facebooka pokazuje, które tagi przeczytał crawler, i wskazuje błędy. Wymaga zalogowania do Facebooka. Według dokumentacji obrazów Facebooka uruchomienie adresu w tym narzędziu pobiera też z wyprzedzeniem metadane, co ma znaczenie ze względu na pamięć podręczną:

Facebook przechowuje w pamięci podręcznej każdy obraz pod jego adresem. Jeśli zastępujesz obraz, użyj nowego adresu URL dla nowego, bo inaczej zostanie stary.
Nie usuwaj starego obrazu, ponieważ istniejące posty mogą nadal na niego wskazywać.
Zmiana obrazu pod danym adresem URL nie aktualizuje podglądu starych udostępnień. Te trzeba odświeżyć.
Crawler musi zobaczyć obraz co najmniej raz, zanim będzie mógł go wyświetlić. Bez pobrania z wyprzedzeniem pierwsza osoba udostępniająca link może nie zobaczyć obrazu.

Zanim opublikujesz, przejdź przez tę listę:

Pobierz stronę przez curl i upewnij się, że pięć tagów jest w pierwszej odpowiedzi.
Otwórz sam adres obrazu. Musi się wczytywać bez logowania i z kodem 200.
Sprawdź rozmiar: co najmniej 1200 × 630 pikseli, poniżej 8 MB.
Przepuść stronę przez Sharing Debugger i przeczytaj błędy oraz ostrzeżenia.
Powtórz to dla jednej strony każdego rodzaju: strony głównej, wpisu, produktu.

Jak SEOgrinder sprawdza tagi Open Graph

Wpisz w SEOgrinder adres publicznej strony, a raport zawiera podgląd społecznościowy, który pokazuje, jak strona wygląda po udostępnieniu. Narzędzie czyta twoje tagi i wczytuje obraz, a potem zgłasza, co znalazło. Nie wymaga konta i nic nie kosztuje. Oto znaleziska, które mają tu znaczenie:

Podgląd przy udostępnianiu niekompletny wymienia, czego brakuje spośród obrazu, tytułu i opisu.
Obraz podglądu się nie wczytuje pojawia się, gdy obraz odpowiada kodem błędu. Znalezisko podaje ten kod i wskazuje zwykłe przyczyny: błędny adres, logowanie przed plikiem albo blokadę w robots.txt. Według znaleziska odnośniki pojawiają się wtedy na LinkedIn, WhatsAppie i X bez obrazka.
Obraz podglądu jest bardzo mały pojawia się poniżej 600 × 315 pikseli (Facebook pokazuje go wtedy tylko jako małą miniaturę); obrazy poniżej minimum 200 × 200 zgłasza osobno.
Strona powstaje dopiero w przeglądarce to znalezisko dla stron, które swój interfejs budują dopiero w przeglądarce.

SEOgrinder nie pokaże ci, jak każda sieć rysuje kartę. Sprawdza tagi i plik, czyli to, na co masz wpływ. Ostateczny wygląd obejrzyj w debuggerze.

Najczęstsze błędy

Względna ścieżka obrazu. Użyj pełnego adresu z https://.
Obraz, którego nie da się pobrać. Logowanie, reguła firewalla albo linia w robots.txt na katalogu z obrazami zostawia podgląd bez obrazka.
Zbyt mały obraz. Poniżej 600 × 315 pikseli wyświetla się małe, poniżej 200 × 200 może nie wyświetlić się wcale.
Brak opisu. og:description jest w protokole opcjonalny, ale bez niego platforma zgaduje.
Te same tagi na każdej stronie. Wtedy każdy wpis po udostępnieniu wygląda jak strona główna, a og:url niczego już nie identyfikuje.
Podmiana obrazu pod tym samym adresem. Facebook przechowuje obrazy w pamięci podręcznej według adresu URL, więc opublikuj nowy plik pod nową nazwą.
Tagi, które istnieją dopiero po uruchomieniu JavaScriptu. Umieść je w dostarczonym HTML.
Cudzysłowy w wartościach bez zamiany na encje HTML. Zamykają atrybut i ucinają tag.
Adres śledzący w og:url. Tag ma zawierać adres kanoniczny.

Najczęstsze pytania

Czy tagi Open Graph są czynnikiem rankingowym?

Nie ma dowodów, że są. Open Graph decyduje o tym, jak udostępniony link wygląda w sieciach społecznościowych i komunikatorach. Nic w źródłach użytych w tym artykule nie wiąże go z pozycjami.

Jakiego rozmiaru powinno być og:image?

1200 × 630 pikseli, z proporcjami zbliżonymi do 1,91 : 1 i wagą poniżej 8 MB. To spełnia zalecenie Facebooka i jest rozmiarem obrazu podglądu na stronach bloga SEOgrinder.

Czy potrzebuję og:description?

Protokół wymienia go jako opcjonalny i ogólnie zalecany. Bez niego platforma musi zgadywać opis na podstawie twojej strony, więc napisz go.

Dlaczego nadal widać mój stary obraz?

Facebook przechowuje obrazy w pamięci podręcznej według adresu. Opublikuj nowy obraz pod nowym adresem URL, a potem przepuść stronę przez Sharing Debugger. Stare udostępnienia nie aktualizują się automatycznie.

A co z twitter:card?

Ten tag nie należy do protokołu Open Graph. Wskazówka naprawy SEOgrinder przy niekompletnym podglądzie zaleca dodatkowo ustawienie twitter:card na summary_large_image. Zasad serwisu X ten artykuł nie omawia, więc sprawdź je w dokumentacji X.

Czy agent do programowania może dodać tagi za mnie?

Może przejąć część mechaniczną: wpisać tagi do twoich szablonów i sprawdzić je przez curl. W raporcie Przekaż AI tworzy ze znalezisk zlecenie w Markdown, z możliwym do sprawdzenia warunkiem końcowym dla każdego zadania. Wybór obrazu i sformułowanie tekstu pozostają twoją pracą.

Następny krok

Uruchom darmowy skan swojej strony głównej i spójrz na podgląd społecznościowy oraz znaleziska wymienione wyżej. Naprawiaj je po kolei, a jeśli musisz wymienić obraz, opublikuj nowy pod nowym adresem i przepuść stronę przez Sharing Debugger. Potem przeskanuj stronę jeszcze raz, żeby potwierdzić, że podgląd jest kompletny. Pozostałe punkty kontrolne zebraliśmy w checkliście SEO.