Czym są tagi Open Graph? Przewodnik po podglądach linków i udostępnianiu w mediach społecznościowych

Kiedy udostępniasz link na Facebooku, LinkedIn, Slack lub Twitterze, zwykle pojawia się karta podglądu — z tytułem, opisem i obrazem. Te podglądy nie są magią. Są kontrolowane przez tagi Open Graph (OG) w HTML-u Twojej strony.

Prawidłowe ustawienie tagów Open Graph oznacza, że udostępniane linki wyglądają profesjonalnie i otrzymują więcej kliknięć. Błędne ustawienie oznacza brzydkie podglądy, brakujące obrazy lub ogólny tekst zastępczy.

Czym jest protokół Open Graph?

Open Graph to protokół utworzony przez Facebooka w 2010 roku, który umożliwia stronom internetowym definiowanie, jak się pojawiają po udostępnieniu na platformach społecznościowych. Używa tagów meta w sekcji HTML <head>:

<meta property="og:title" content="Tytuł Twojej strony" />
<meta property="og:description" content="Krótkie podsumowanie strony" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Kiedy platforma społecznościowa wykryje udostępniony URL, pobiera stronę i czyta te tagi, aby zbudować kartę podglądu.

Niezbędne tagi Open Graph

og:title

Tytuł wyświetlany w karcie podglądu. Utrzymaj go poniżej 60 znaków, aby jak najlepiej wyglądał na wszystkich platformach.

<meta property="og:title" content="Jak tworzyć markowe linki skrócone" />

Wskazówki:

Nie duplikuj po prostu tagu <title> — optymalizuj dla zaangażowania w mediach społecznościowych
Postaw ważne słowa na początku
Unikaj clickbaitu (platformy mogą to penalizować)

og:description

Krótkie podsumowanie wyświetlane poniżej tytułu. Docelowo 120-160 znaków.

<meta property="og:description" content="Twórz niestandardowe markowe linki skrócone ze śledzeniem kliknięć i analityką. Skonfiguruj w 5 minut." />

og:image

Obraz wyświetlany w podglądzie. To najbardziej wpływowy tag — posty z obrazami otrzymują znacznie więcej zaangażowania.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Wymagania dotyczące obrazu na platformach:

Platforma	Zalecany rozmiar	Proporcje
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px min	Dowolne

Użyj 1200 × 630 pikseli, aby pokryć wszystkie platformy.

og:url

Kanoniczny adres URL strony. To informuje platformy, który adres URL ma być wyświetlany i pomaga zapobiegać duplikacji treści.

<meta property="og:url" content="https://example.com/page" />

og:type

Opisuje typ treści. Popularne wartości:

website — dla stron głównych i stron ogólnych
article — dla postów blogowych i artykułów
product — dla stron produktów

Tagi Twitter Card

Twitter używa swoich własnych tagów meta (oprócz Open Graph) do kart podglądu:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Twój tytuł" />
<meta name="twitter:description" content="Twój opis" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Jeśli tagi Twitter Card nie są obecne, Twitter wraca do tagów Open Graph. Większość witryn ustawia oba dla maksymalnej kontroli.

Jak platformy społecznościowe pobierają dane Open Graph

Kiedy udostępniasz adres URL:

1Crawler platformy odwiedza adres URL
2Czyta HTML <head> w poszukiwaniu tagów OG
3Buforuje dane karty podglądu
4Kolejne udostępnienia tego samego adresu URL używają buforowanej wersji

Ważne: Zmiany w tagach OG nie są odzwierciedlane natychmiast. Platformy buforują agresywnie, więc może być konieczne ręczne wyczyszczenie pamięci podręcznej (patrz debugowanie poniżej).

Dostosowywanie podglądów linków za pomocą Linkly

Co jeśli udostępniasz adres URL, którego nie kontrolujesz — lub chcesz różne karty podglądu dla różnych kontekstów?

Funkcja niestandardowych podglądów społeczności Linkly pozwala na zastąpienie danych Open Graph dla dowolnego skróconego linku:

Ustaw niestandardowy tytuł, opis i obraz
Różne podglądy dla różnych odbiorców
Nie ma potrzeby edytowania HTML-u strony docelowej
Działa dla dowolnego adresu URL, nawet stron, których nie posiadasz

Jest to szczególnie przydatne, gdy:

Udostępniasz treści stron trzecich ze swoim markowaniem
Testujesz A/B różne karty podglądu, aby zobaczyć, które otrzymają więcej kliknięć
Strona docelowa ma słabe lub brakujące tagi OG

Debugowanie tagów Open Graph

Debugger udostępniania Facebook

Narzędzie Facebooka pozwala na podgląd i odświeżanie buforowanych danych OG:

1Wpisz adres URL
2Kliknij Debug
3Zobacz, co Facebook czyta ze swojej strony
4Kliknij Scrape Again, aby wyczyścić pamięć podręczną

Walidator Twitter Card

Walidator Twittera pokazuje, jak będzie wyglądać Twoja karta i wskazuje wszelkie problemy.

Inspektor postów LinkedIn

Narzędzie LinkedIn podgląda Twoją kartę linku i odświeża buforowane dane.

Ogólne wskazówki

Sprawdź źródło: Wyświetl źródło strony i wyszukaj og:, aby zweryfikować, czy tagi są obecne
Użyj bezwzględnych adresów URL: Adresy URL obrazów muszą być bezwzględne (zaczynają się od https://), a nie względne
Testuj po zmianach: Zawsze czyszczenie pamięci podręcznej platformy po aktualizacji tagów OG
Sprawdź renderowanie JavaScript: Niektóre platformy nie mogą wykonywać JavaScript, więc tagi OG muszą być w początkowej odpowiedzi HTML

Typowe błędy

1Brakujący og:image: Posty bez obrazów otrzymują 2-3x mniej kliknięć
2Obraz za mały: Użyj co najmniej 1200 × 630 pikseli
3Złoszczące proporcje: Obrazy są przycinane dziwnie
4Stara pamięć podręczna: Zaktualizowałeś tagi OG, ale zapomnij wyczyścić bufor platformy
5Duplikaty tagów: Wiele tagów OG tego samego typu powoduje nieprzewidywalne zachowanie
6Obrazy HTTP: Użyj HTTPS dla adresów URL obrazów — niektóre platformy blokują obrazy HTTP
7Względne adresy URL: Crawlery platformy nie mogą rozpoznać ścieżek względnych

Open Graph dla różnych typów treści

Posty blogowe

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Twoje imię" />

Produkty

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Filmy

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Podsumowanie

Tagi Open Graph to małe dodanie do Twojego HTML-u, które ma duży wpływ na wygląd Twojej treści w sieci społecznej. Prawidłowe ich ustawienie — z odpowiednim tytułem, opisem i obrazem — bezpośrednio zwiększa wskaźniki kliknięć, gdy Twoje linki są udostępniane.

Chcesz niestandardowych podglądów linków bez edycji HTML-u? Zacznij pracę z Linkly i dostosuj kartę podglądu społeczności dla dowolnego skróconego linku — ustaw swój własny tytuł, opis i obraz.