Przez pierwszy rok prowadzenia bloga SEOJuice w ogóle nie myślałem o grafikach Open Graph. Publikowaliśmy wpisy, wrzucaliśmy je na LinkedIn i Twittera, i tyle. Podglądy linków wyglądały na pierwszy rzut oka w porządku — a przynajmniej tak mi się wydawało, bo nigdy tak naprawdę nie sprawdziłem, co widzą inni, kiedy klikają „udostępnij”.
Potem klient wysłał mi zrzut ekranu naszego wpisu blogowego udostępnionego na firmowym Slacku. Podgląd pokazywał nasze logo w rozmiarze 50x50 pikseli, rozciągnięte do szarego prostokąta. Tytuł był ucięty. Wyglądało to po prostu źle. Ten wpis pisało się dwa dni, a podgląd linku wyglądał jak spam.
Spędziłem weekend, dodając własne grafiki Open Graph do naszych 20 najważniejszych wpisów. W ciągu miesiąca CTR z mediów społecznościowych na tych wpisach wzrósł średnio z 1,8% do 4,1%. To poprawa o 2,3 razy za coś, co — uczciwie mówiąc — zajmuje około 15 minut pracy na wpis. (Dla jasności: to nasze własne dane z analityki LinkedIn i Twittera, a nie kontrolowane badanie. U ciebie wyniki będą się różnić w zależności od odbiorców i platformy.)
Open Graph to protokół stworzony przez Facebooka w 2010 roku, który pozwala kontrolować, jak twoje strony wyglądają po udostępnieniu w mediach społecznościowych. Grafika Open Graph to wizualny podgląd linku — duży obraz, który pojawia się w karcie linku na Facebooku, Twitter/X, LinkedIn, Slacku, WhatsAppie, Discordzie albo dowolnej platformie wspierającej podgląd linków. Bez tagów OG platformy zgadują. Dzięki nim sam decydujesz, jak twoja treść wygląda w podglądzie i jak się promuje.
Każda platforma odczytuje tagi OG, ale każda wyświetla je trochę inaczej. Nauczyłem się tego boleśnie, kiedy całkiem poprawny podgląd na Facebooku został przycięty na LinkedIn. Oto tabela referencyjna, którą mam zapisaną w zakładkach:
| Platforma | Zalecany rozmiar | Proporcje | Format | Maks. rozmiar pliku | Uwagi |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | Nie pokazuje obrazów mniejszych niż 200x200px. 600x315 to minimum dla dużej karty. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | Nie wyświetli dużej karty dla obrazów mniejszych niż 300x157px. Używa twitter:image, jeśli jest ustawione, a jeśli nie, używa og:image. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Twarde minimum: 1200x627. Poniżej tego LinkedIn w ogóle nie pokaże obrazu. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB zalecane | Słabo radzi sobie z obrazami powyżej 300KB na wolnych połączeniach mobilnych. Celuj w mniej niż 200KB, jeśli chcesz mieć pewność wyświetlania. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Automatycznie wyświetla podgląd linków w kanałach. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Obsługuje animowane GIF-y w podglądach. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N/A | Używa tagów OG do podglądu linków w wiadomościach. |
Nieco wyższe proporcje Twittera (16:9 vs 1.91:1) oznaczają, że twoja grafika 1200x630 może zostać minimalnie przycięta. W praktyce nigdy nie zauważyłem różnicy. Nie twórz osobnych grafik dla każdej platformy, chyba że prowadzisz dużą kampanię, w której liczy się każdy piksel.
Jedna rzecz, którą chcę podkreślić, bo sam się na tym wyłożyłem: minimum LinkedIna to naprawdę twarde minimum. Jeśli twoja grafika ma 1199 pikseli szerokości, LinkedIn nie pokaże nic. Nie mniejszą wersję — nic. Straciłem na debugowaniu pół godziny, zanim po prostu sprawdziłem faktyczne wymiary obrazu.
Tagi OG dodajesz w sekcji <head> swojego HTML. Oto kompletny zestaw, którego potrzebujesz na każdej stronie:
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Ważne szczegóły techniczne, które sam przynajmniej raz zrobiłem źle:
og:image. Ścieżki względne psują się na większości platform. To był mój najczęstszy błąd, kiedy wdrażaliśmy to po raz pierwszy.og:image:width i og:image:height pomagają platformom szybciej wygenerować podgląd bez pobierania całego obrazu na start.twitter:card na summary_large_image, jeśli chcesz pełnoszeroką kartę z obrazem. Bez tego Twitter pokaże malutką kwadratową miniaturę. Pominąłem to przy naszym pierwszym wdrożeniu i długo nie mogłem zrozumieć, czemu podglądy na Twitterze wyglądają tak skromnie.WordPress: Wtyczki takie jak Yoast SEO, RankMath i SEOPress dodają pola tagów OG do edytora każdego wpisu i strony. Wrzucasz obraz, wpisujesz tytuł i opis, a wtyczka generuje meta tagi. Jeśli działasz na WordPressie, to najprostsza droga.
Next.js / React: Użyj komponentu next/head albo Metadata API (App Router), żeby ustawiać tagi OG dla każdej strony osobno. Jeśli budujesz na App Routerze, eksport metadanych robi to całkiem prosto.
Strony statyczne: Dodaj meta tagi bezpośrednio do szablonu HTML. Większość generatorów stron statycznych (Hugo, Eleventy, Jekyll) obsługuje zmienne front matter, które automatycznie wypełniają tagi OG.
Technicznie poprawna grafika Open Graph, która wygląda źle, jest gorsza niż brak grafiki. Przerabiałem nasz szablon grafiki Open Graph chyba z pięć razy i oto, co faktycznie działa:
Każda platforma przycina obraz trochę inaczej. Trzymaj wszystkie ważne elementy — tekst, logo, kluczowe wizualia — w centralnych 80% obrazu. To oznacza co najmniej 120px oddechu od każdej krawędzi na płótnie 1200x630. Nauczyłem się tego po tym, jak LinkedIn uciął pierwszą literę tytułu na jednej z naszych grafik Open Graph.
Jeśli twoja grafika Open Graph zawiera tekst (a zwykle powinna — tytuł artykułu albo strony), zrób go dużym. Minimum 48px przy szerokości canvasu 1200px. Te obrazy często są wyświetlane na mobile w feedzie przy szerokości około 300px. Jeśli nie da się odczytać tekstu, kiedy obraz ma 300px szerokości, to znaczy, że jest za mały. Ja testuję to tak, że oddalam widok w Figma mniej więcej do 25% — jeśli nadal mogę przeczytać nagłówek, to zadziała.
Używaj konsekwentnie kolorów marki, fontów i układu logo. Kiedy ktoś zobaczy twoją grafikę Open Graph w feedzie, powinien rozpoznać, że to twoje, jeszcze zanim przeczyta tekst. Zrobiliśmy szablon w Canva z naszymi kolorami brandowymi i miejscem na logo, i używamy go do każdego wpisu. Teraz zajmuje to około 5 minut na grafikę.
Co nie działa: generyczne stock photo, samo logo na białym tle albo obraz, który nie ma nic wspólnego z treścią. Testowałem wszystkie trzy. Za każdym razem ludzie przewijają dalej.
Sprawdzam tagi OG przy każdym audycie strony, który robimy w SEOJuice. Te same problemy wracają w kółko:
og:image platformy próbują same wykryć obraz ze strony. Efekt to zwykle twoje logo 100x100 pikseli albo losowy obraz z sidebara. Sprawdź swoje strony naszym narzędziem do audytu SEO — wykrywa brakujące tagi OG.http://, nie wyświetli się.Zawsze testuj tagi OG przed i po zmianach. Ja przepuszczam każdy wpis przez co najmniej dwa z tych narzędzi przed publikacją:
| Narzędzie | Platforma | URL | Uwagi |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
Czyści też cache OG Facebooka. Kliknij „Scrape Again” po aktualizacji tagów. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Podgląd tego, jak wyświetli się twoja karta. Czyści też cache Twittera. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Sprawdza i czyści cache OG LinkedIna. | |
| OpenGraph.xyz | Wiele platform | opengraph.xyz |
Podgląd na wielu platformach jednocześnie. Generuje też grafiki Open Graph. |
| SEOJuice Screenshot Generator | Tworzenie | /tools/screenshot-generator/ | Automatycznie generuje grafiki Open Graph i zrzuty ekranu z brandingiem na podstawie twoich stron. |
yoursite.com/page/?v=2. Usuń go, kiedy cache się zaktualizuje.
Chcę tu być precyzyjny, bo ten temat bywa przesadzany: grafiki Open Graph nie wpływają bezpośrednio na pozycje w Google. Google nie używa tagu og:image jako sygnału rankingowego. Kropka.
Ale pośrednie efekty są realne i widziałem je na własne oczy na naszych treściach:
<img> na stronie, posiadanie dobrej grafiki Open Graph jako fallbacku na pewno nie szkodzi.Dane o CTR w całej branży są całkiem przekonujące: strony z zoptymalizowanymi grafikami do podglądu linków notują nawet do 70% wyższy CTR z platform społecznościowych niż strony bez obrazu albo z automatycznie generowaną miniaturą. Nawet ostrożne szacunki mówią o poprawie rzędu 20%+ dla stron, które przechodzą z braku grafiki Open Graph na dobrze zaprojektowaną. Nasze własne liczby wypadają mniej więcej pośrodku tego zakresu.
Nie. Grafika 1200x630 działa na obu platformach. Twitter technicznie preferuje 1200x675, ale różnica 45 pikseli jest w praktyce niewidoczna. Twórz osobne grafiki dla platform tylko wtedy, gdy prowadzisz płatne kampanie w mediach społecznościowych, w których każdy detal ma znaczenie.
JPEG do zdjęć i bardziej złożonych obrazów (mniejszy rozmiar pliku). PNG do grafik z tekstem, logo albo przezroczystością (ostrzejsze krawędzie). Dla większości grafik Open Graph, które łączą tekst z tłem, JPEG przy jakości 80-85% daje najlepszy stosunek rozmiaru do jakości. Tego używamy we wszystkich naszych grafikach.
Twitter wspiera WebP. Facebook i LinkedIn — nie zawsze niezawodnie. Dla maksymalnej kompatybilności trzymaj się JPEG albo PNG. Kiedy każda platforma będzie stabilnie wspierać WebP, warto się przesiąść — ale na marzec 2026 jeszcze tam nie jesteśmy.
Tylko wtedy, gdy treść istotnie się zmienia. Jeśli odświeżasz artykuł i dodajesz „Przewodnik 2026” do tytułu, zaktualizuj też grafikę Open Graph, żeby wszystko się zgadzało. Nie aktualizuj grafik Open Graph dla samej aktualizacji — będziesz musiał czyścić cache na każdej platformie, a to zwykle nie jest warte zachodu, jeśli treść realnie się nie zmieniła.
Sprawdź po kolei: (1) czy URL jest absolutny i w HTTPS? (2) czy obraz faktycznie jest dostępny pod tym URL-em? (3) czy obraz spełnia minimalne wymagania rozmiaru? (4) czy cache platformy nie jest przestarzały? Użyj narzędzi debugujących powyżej, żeby to zdiagnozować. Z mojego doświadczenia najczęstszą przyczyną jest użycie względnego URL-a zamiast absolutnego.
Tak, dla stron contentowych (wpisy blogowe, artykuły, poradniki). Tytuł nałożony na brandowe tło to najskuteczniejszy format grafiki Open Graph. Na stronach produktowych lepiej działa czysty zrzut ekranu produktu z twoim logo. Jest jeden wyjątek: nie dawaj tekstu na obrazach, jeśli tytuł i tak już wyświetla się w karcie linku — niektóre platformy pokazują oba elementy i wtedy wszystko się po prostu dubluje.
no credit card required
No related articles found.