Tagi Open Graph: jak skonfigurować podgląd strony na social mediach

Kopiujesz link do Discorda lub LinkedIna i zamiast ładnego podglądu z tytułem i obrazkiem widzisz pusty szary prostokąt albo przypadkowy obrazek ze strony. To klasyczny objaw brakujących lub źle skonfigurowanych tagów Open Graph.

Czym jest protokół Open Graph?

Open Graph to protokół stworzony przez Facebooka w 2010 roku, który standaryzuje sposób, w jaki strony internetowe opisują się platformom społecznościowym. Dzięki tagom OG kontrolujesz:

tytuł wyświetlany w podglądzie linku
opis pod tytułem
miniaturkę
typ zawartości (artykuł, produkt, film, strona główna)

Protokół OG jest dziś obsługiwany przez praktycznie każdą platformę: Facebook, LinkedIn, Twitter/X, Discord, Slack, WhatsApp, Teams i dziesiątki innych komunikatorów.

Obowiązkowe tagi OG

Cztery tagi, które powinny być na każdej podstronie:

<meta property="og:title" content="Tytuł strony" />
<meta property="og:description" content="Krótki opis, ok. 100-200 znaków." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/ta-strona/" />

Bez og:image platformy wyświetlają albo szary placeholder, albo losowy obrazek z treści strony. Brzydkie z perspektywy klikalności.

Szczegóły każdego tagu

og:title

Może być, ale nie musi być, taki sam jak tag <title>. W rzeczywistości często warto go różnicować: tytuł SEO jest zoptymalizowany pod wyszukiwarkę (zawiera słowa kluczowe, ma określoną długość), tytuł OG może być bardziej “ludzki” i zachęcający do kliknięcia.

Rekomendowana długość: 40-60 znaków. Platforma i tak przytnie dłuższy tekst, ale akurat LinkedIn i Discord są w tym mniej agresywne niż Twitter.

og:description

Opis pojawia się pod tytułem w podglądzie. Powinien zachęcać do kliknięcia, a nie powielać treści tytułu.

Rekomendowana długość: 100-200 znaków. Na Facebooku i LinkedIn opisy są często przycinane po ok. 110-120 znakach. Discord wyświetla nieco więcej.

og:image

To najważniejszy tag z perspektywy klikalności. Dobra grafika przyciąga wzrok w feedzie.

Optymalne wymiary: 1200 x 630 pikseli (proporcja 1.91:1). To format, który platforma nie przeskaluje w górę i który dobrze wygląda na wszystkich urządzeniach.

Minimalne wymagania Facebooka: 200 x 200 px. Ale minimalny rozmiar to przepis na pikselowatą miniaturkę na retina display.

Ważne: obraz musi być dostępny publicznie pod podanym URL. Jeśli jest za logowaniem lub na localhost, platforma go nie pobierze.

og:url

Kanoniczny URL strony. Zapobiega duplikacji podglądów, gdy użytkownik udostępnia ten sam artykuł z parametrami UTM (?utm_source=newsletter). Platformy łączą “polubienia” i “udostępnienia” dla wszystkich wariantów URL z tym samym og:url.

Typ zawartości: og:type

<meta property="og:type" content="article" />

Dla artykułów blogowych użyj article. Dla strony głównej lub landing page: website. Dla produktów e-commerce: product (wymaga dodatkowych tagów Facebook Open Graph dla produktów). Dla filmów: video.other.

Typ artykułu umożliwia dodanie dodatkowych tagów:

<meta property="article:published_time" content="2026-04-10T00:00:00Z" />
<meta property="article:author" content="https://rankvoyager.app" />

Tagi Twitter Card

Twitter/X ma własny protokół, który działa niezależnie od OG, choć często jest komplementarny:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tytuł" />
<meta name="twitter:description" content="Opis" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

Wartość summary_large_image wyświetla duże zdjęcie nad tytułem. Jeśli nie podasz tych tagów, Twitter spróbuje użyć tagów OG jako fallback.

Jak sprawdzić podgląd?

Zanim opublikujesz stronę, możesz sprawdzić, jak będzie wyglądał jej podgląd, w OG Preview w RankVoyager. Narzędzie pobiera tagi OG z podanego URL i symuluje, jak podgląd będzie wyglądał na Discordzie, LinkedIn i WhatsAppie.

Discord cachuje podglądy przez kilka godzin po pierwszym pobraniu. Jeśli zaktualizowałeś tagi OG, możesz wymusić odświeżenie wklejając link z ?refresh=1 na końcu (Discord ignoruje query string przy pobieraniu OG, ale wymusza nowe żądanie). Alternatywnie: użyj Facebook Debugger i kliknij “Scrape Again”.

Najczęstsze błędy konfiguracji

og:image z ścieżką względną: <meta property="og:image" content="/img/og.jpg" />. Większość platform wymaga pełnego URL z domeną.

Brak ogólnego fallback image: jeśli masz tagi OG tylko na niektórych podstronach, strony bez tagów wyświetlą się brzydko. Dodaj globalny fallback w <head> layoutu.

Obrazek za mały lub w złych proporcjach: Facebook zignoruje obrazki mniejsze niż 200x200 px. LinkedIn wymaga minimum 400x200 px.

Tytuł dłuższy niż 60 znaków z ważnymi słowami na końcu: jeśli tytuł zostanie przycięty, koniec (”…RankVoyager”) zobaczy mało kto. Ważne słowa powinny być na początku.

Brak og:url: przy różnych parametrach URL (UTM, parametry filtru) ta sama strona może być traktowana jako wiele różnych obiektów przez platformę.

W panelu RankVoyager moduł Inspektor domeny weryfikuje meta tagi wszystkich Twoich podstron, w tym tagi OG. Możesz szybko sprawdzić, które strony mają puste lub nieprawidłowe tagi, bez ręcznego otwierania każdej z nich.