Rozmiar obrazka Open Graph i tagi OG: kompletny poradnik
Gdy ktoś wkleja link na Facebooku, LinkedInie, X, w Telegramie, Slacku czy WhatsAppie, platforma nie robi zrzutu ekranu strony. Jej robot pobiera HTML, odczytuje kilka tagów Open Graph w <head> i buduje z nich kartę: tytuł, krótki opis i obrazek. Jeśli tagów brakuje albo są źle wypełnione, platforma zgaduje sama — i zwykle pokazuje przycięte logo albo kartę bez obrazka. Poniżej: jakie tagi są potrzebne, jaki rozmiar powinien mieć obrazek OG i jak sprawić, by serwis zapomniał stary podgląd.
W skrócie: rozmiar obrazka Open Graph
Przygotuj jeden obrazek 1200×630 pikseli (proporcje 1.91:1) w JPG lub PNG i pilnuj, by plik nie był ciężki. Taki obrazek daje dużą kartę na Facebooku, LinkedInie i X, a komunikatory same go zmniejszają do swoich podglądów. Tytuł i logo trzymaj w środkowej części, bo część aplikacji przycina boki albo pokazuje kwadratową miniaturę.
| Platforma | Co zaleca dokumentacja |
|---|---|
| Do dużej karty — co najmniej 1200×630; obrazki mniejsze niż 600×315 trafiają do małego układu; absolutne minimum 200×200; plik do 8 MB | |
| 1.91:1, zalecane 1200×627 | |
X, summary_large_image | 2:1, minimum 300×157, plik poniżej 5 MB; JPG, PNG, WebP lub GIF (tylko pierwsza klatka) |
X, summary | Kwadratowa miniatura 1:1, minimum 144×144 |
Proporcje 2:1 w X i 1.91:1 w pozostałych serwisach są tak zbliżone, że obrazek 1200×630 pasuje wszędzie: X utnie po kilka pikseli u góry i u dołu. Platformy co jakiś czas zmieniają wygląd kart, więc traktuj tabelę jako punkt wyjścia i przed dużą kampanią sprawdź kartę w oficjalnym narzędziu każdego serwisu.
Które tagi Open Graph są wymagane
Protokół Open Graph (ogp.me) wymienia cztery wymagane właściwości: og:title, og:type, og:image i og:url. W praktyce dodaje się do nich opis i typ karty X. Pełny zestaw dla artykułu wygląda tak:
<meta property="og:title" content="Jak dobrać buty do biegania przy płaskostopiu"> <meta property="og:description" content="Pięć rzeczy do sprawdzenia przed zakupem — porady fizjoterapeuty."> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/blog/buty-plaskostopie"> <meta property="og:image" content="https://example.com/img/og/buty-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Stopy biegacza na bieżni w neutralnych butach"> <meta property="og:site_name" content="Example Running"> <meta property="og:locale" content="pl_PL"> <meta name="twitter:card" content="summary_large_image">
| Tag | Status | Na co uważać |
|---|---|---|
og:title | Wymagany | Pisany pod feed: dopisek „ | Marka” nie jest potrzebny, karta i tak pokazuje domenę |
og:type | Wymagany | website dla strony głównej i działów, article dla wpisów |
og:image | Wymagany | Pełny adres z https://, który robot pobierze bez ciasteczek i logowania |
og:url | Wymagany | Kanoniczny adres tej strony: Facebook buduje kartę ze strony, na którą wskazuje |
og:description | Zalecany | Jedno lub dwa zdania; część aplikacji pokazuje tylko pierwszą linię |
og:image:width, og:image:height | Zalecane | Pozwalają Facebookowi wyświetlić kartę już przy pierwszym udostępnieniu, bez czekania na pobranie obrazka |
og:image:alt | Zalecany | Tekstowy opis obrazka dla czytników ekranu |
og:site_name, og:locale | Opcjonalne | Nazwa marki i język, np. pl_PL |
Tagi Open Graph zapisuje się z atrybutem property, tagi X — z name. Wiele parserów akceptuje oba warianty, ale trzymanie się konwencji oszczędza niespodzianek. Nie trzeba pisać znaczników ręcznie: generator meta tagów tworzy blok Open Graph i X razem z title i description.
twitter:card i co zastępuje brakujące tagi
X najpierw czyta własne tagi twitter:*. Gdy brakuje twitter:title, twitter:description lub twitter:image, sięga po og:title, og:description i og:image. Strona z pełnym Open Graph potrzebuje więc tylko jednej dodatkowej linii — twitter:card: summary_large_image dla dużego obrazka albo summary dla małej kwadratowej miniatury. Osobne tagi twitter:* mają sens tylko wtedy, gdy w X chcesz pokazać inny tekst lub inny obrazek.
LinkedIn, Telegram, Slack, Discord i WhatsApp również korzystają z Open Graph. Jeśli tagów OG nie ma wcale, platforma może wziąć <title>, meta description i pierwszy pasujący obrazek ze strony — i tak w karcie ląduje piksel śledzący albo logo ze stopki.
Dlaczego adres obrazka musi być bezwzględny
Ścieżka względna, np. /img/cover.jpg, działa w przeglądarce, bo przeglądarka wie, na jakiej stronie jest. Roboty serwisów społecznościowych nie zawsze ją rozwiązują i wiele z nich po prostu pokazuje kartę bez obrazka. Zawsze podawaj pełny adres z protokołem. I jeszcze trzy powiązane sprawdzenia:
- Bez logowania i ciasteczek. Obrazek musi otwierać się w oknie prywatnym. Ochrona przed hotlinkowaniem, test zapory albo podpisany link z datą ważności psują kolejne udostępnienia.
- Bez JavaScriptu. Roboty serwisów społecznościowych z reguły nie wykonują skryptów. Jeśli aplikacja SPA ustawia meta tagi po stronie klienta, robot widzi pusty szablon. Renderuj tagi na serwerze albo stosuj prerendering.
- Robot nie jest blokowany.
Disalloww robots.txt albo agresywny filtr botów zwraca robotowi stronę błędu i karta powstaje z niej.
Jak platformy zapamiętują podgląd i jak go odświeżyć
Każdy serwis pobiera adres raz i przez jakiś czas przechowuje wynik. Po poprawieniu tagów strona jest już dobra, ale stara karta pojawia się dalej, dopóki serwis nie pobierze jej ponownie. Oficjalne sposoby, żeby to przyspieszyć:
- Facebook (i linki w Messengerze oraz wiadomościach na Instagramie): otwórz Sharing Debugger na developers.facebook.com, wklej adres i kliknij Scrape Again. Zobaczysz też, jakie tagi odczytał i jakie zgłasza ostrzeżenia.
- LinkedIn: sprawdź adres w Post Inspectorze (linkedin.com/post-inspector) — przy sprawdzeniu LinkedIn pobiera stronę od nowa.
- Telegram: wyślij link oficjalnemu botowi @WebpageBot. Odświeża on podgląd, który Telegram przechowuje dla tego adresu; jeśli pierwsza odpowiedź jest wciąż stara, wyślij link jeszcze raz.
- X: obecnie nie ma publicznego narzędzia do czyszczenia pamięci podręcznej. Typowe obejście to udostępnienie adresu z nieszkodliwym parametrem, np.
?v=2— dla X to już nowy URL. - WhatsApp, Slack, Discord: o oficjalnym przycisku odświeżania nic nam nie wiadomo. Zmiany pojawiają się z czasem, a w praktyce znów pomaga nowy parametr w adresie.
cover-v2.jpg) i zaktualizuj og:image.Częste błędy
- Ta sama karta na każdej stronie. Motyw wszędzie wstawia tytuł i logo strony głównej, więc wszystkie udostępnienia wyglądają identycznie. Generuj
og:title,og:descriptioniog:imagedla każdej strony osobno. - og:url wskazuje na stronę główną. Facebook traktuje
og:urljako kanoniczny i przy każdym artykule pokazuje kartę strony głównej. - Zdublowane tagi.
og:imagewstawia i wtyczka SEO, i motyw. Zwykle wygrywa pierwszy tag, a nie musi to być ten właściwy. - Drobny tekst przy krawędziach. Na telefonie karta ma często kilkaset pikseli szerokości — tekst o wielkości 20 pikseli staje się nieczytelny.
- Za mały obrazek. Poniżej 600×315 Facebook przełącza się na mały układ z miniaturą z boku.
- Sprawdzanie tylko w przeglądarce. Przeglądarka pokazuje nową stronę, a serwisy pamiętają starą. Po zmianach zawsze wymuszaj ponowne pobranie.
Jak sprawdzić tagi
Wklej adres do debuggera Open Graph. Pobiera on stronę z naszego serwera bez wykonywania JavaScriptu — tak jak roboty serwisów społecznościowych — i pokazuje przybliżone karty Facebooka, X i LinkedIna, listę znalezionych i brakujących tagów, rzeczywisty rozmiar obrazka w pikselach oraz ostrzeżenie o adresach względnych. Podglądy są bliskie prawdziwym, ale ostatnie słowo należy do aktualnego wyglądu serwisu i jego pamięci podręcznej.
Open Graph nie wpływa na pozycje w Google: wynik wyszukiwania powstaje z <title>, meta description i treści strony. Tę stronę sprawy sprawdzaj osobno — analizatorem meta tagów i podglądem SERP. Szczegóły znajdziesz w artykułach sprawdzanie meta tagów i podglądu w wynikach oraz podgląd snippetu.