Grafiki Open Graph: rozmiary, wskazówki i przykłady kodu
Obrazy Open Graph decydują o tym, co pojawia się, gdy ktoś udostępnia Twoją stronę na Facebooku, Twitterze lub LinkedIn. Nieodpowiedni lub brak obrazu obniża liczbę kliknięć, zanim użytkownik odwiedzi witrynę.
Przewodnik obejmuje optymalne rozmiary, zasady projektowania, implementację HTML oraz narzędzia do testowania — wszystko, co potrzebne, by poprawnie wyświetlać podglądy w mediach społecznościowych na każdej platformie.
Spis treści
Czym są obrazy Open Graph i dlaczego są ważne
Open Graph to protokół stworzony przez Facebook, który pozwala kontrolować wygląd stron podczas udostępniania w mediach społecznościowych. Meta tag og:image wskazuje platformom, który obraz ma być miniaturą podglądu.
Gdy ktoś udostępnia link na Facebooku, Twitterze lub LinkedIn, platforma pobiera metadane Open Graph i tworzy kartę podglądu. To właśnie obraz, tytuł i opis na tej karcie często decydują o kliknięciu.
Starannie przygotowany obraz Open Graph znacząco zwiększa liczbę kliknięć. Brak lub nieprawidłowy rozmiar obrazu powoduje uszkodzony podgląd, przycięte miniatury lub nieprofesjonalny zastępczy obraz.
Wskaźnik klikalności
Strony z odpowiednio dobranym, kontrastowym obrazem OG osiągają lepsze wyniki niż te bez obrazu lub z niskiej jakości zamiennikiem.
Więcej kliknięć z każdego udostępnienia
Rozpoznawalność marki
Spójna identyfikacja wizualna w każdym udostępnionym linku buduje zaufanie i rozpoznawalność marki jeszcze przed odwiedzinami strony.
Spójność na wszystkich platformach
Sygnał SEO
Zaangażowanie w mediach społecznościowych dzięki atrakcyjnym podglądom generuje linki zwrotne i sygnały ruchu, które z czasem wzmacniają pozycje w organicznych wynikach wyszukiwania.
Pośrednia korzyść SEO
Wymagania dotyczące obrazów na platformach
Każda platforma społecznościowa ma zalecane wymiary, proporcje i limity rozmiaru pliku. Ich przestrzeganie zapobiega przycinaniu, zniekształceniom i zastępczym obrazom.
| Platforma | Zalecany rozmiar | Proporcje | Maksymalny rozmiar pliku | Format |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Uniwersalny bezpieczny rozmiar: 1200 × 630 pikseli
Obraz 1200 × 630 px o proporcjach 1,91:1 działa na Facebooku, LinkedIn, WhatsApp, Slack i większości innych platform. Na Twitterze obraz jest przycinany do 16:9 — ważne elementy trzymaj na środku, by uniknąć ucięcia.
Zasady projektowania skutecznych obrazów Open Graph
Obraz wyświetla się w małym rozmiarze w kanałach społecznościowych. Projektuj najpierw miniaturę, nie pełny rozmiar.
Umieść najważniejszy element wizualny — logo, mocny nagłówek lub kluczową ilustrację — w centralnej 80% obrazu. Platformy często przycinają krawędzie, więc elementy przy brzegu mogą zostać ucięte.
Wysoki kontrast
Stosuj wyraźny kontrast między tekstem, elementami pierwszego planu i tłem. Obrazy o niskim kontraście giną w zatłoczonych kanałach obok kolorowych postów konkurencji.
Czytelność w każdym rozmiarze
Czytelność typografii
Jeśli obraz zawiera tekst, używaj dużych, pogrubionych czcionek — co najmniej równoważnych 36 px — i nie przekraczaj dwóch linii. Mniejszy tekst staje się nieczytelny w miniaturze.
Zachowaj czytelność w małym rozmiarze
Spójność marki
Dodaj logo lub paletę kolorów marki do każdego obrazu OG. Każde udostępnienie to kontakt z marką, nawet bez kliknięcia.
Każde udostępnienie to kontakt z marką
Wybór odpowiedniego formatu obrazu
Używaj JPEG do zdjęć OG, a PNG do grafik z tekstem, logo lub przezroczystością. WebP zyskuje popularność, ale nie jest jeszcze obsługiwany przez wszystkie narzędzia społecznościowe.
| Format | Najlepsze do | Wsparcie społecznościowe | Typowy rozmiar pliku | Zalecenie |
|---|---|---|---|---|
| JPEG | Zdjęcia, gradienty | Uniwersalny | 60 – 150 KB | Domyślny dla zdjęć |
| PNG | Tekst, logo, przezroczystość | Uniwersalny | 100 – 300 KB | Domyślny dla grafik |
| WebP | Oba, mniejsze pliki | Twitter, Slack (nie wszystkie) | 40 – 120 KB | Tylko uzupełnienie |
Celuj w 100–200 KB dla obrazu OG. Mniejszy rozmiar jest lepszy, ale nie kompresuj tak mocno, by obraz był pikselowany w kanałach społecznościowych. WhatsApp ma limit 300 KB — jeśli udostępnianie tam jest ważne, trzymaj się tego limitu.
Więcej o kompromisach formatów obrazów znajdziesz w przewodnikiem optymalizacji obrazów na stronie . Do konwersji istniejących obrazów polecamy poradnik JPG do WebP , który opisuje codzienny proces.
Implementacja HTML i meta tagi
Umieść meta tagi Open Graph w elemencie <head> w HTML. Tag og:image musi zawierać pełny, bezwzględny URL — ścieżki względne nie są obsługiwane przez narzędzia społecznościowe.
Minimalne wymagane tagi to og:title, og:description, og:image i og:url. Tag twitter:card aktywuje format dużej karty obrazkowej na Twitterze.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Zawsze określaj og:image:width i og:image:height. Bez nich platformy muszą pobrać i przeanalizować obraz przed wyświetleniem podglądu, co spowalnia ładowanie i zwiększa ryzyko zastępczego obrazu.
Jeśli korzystasz z Blazor, komponent metadanych SEO Blazor automatycznie obsługuje wszystkie tagi Open Graph z uwzględnieniem lokalizacji URL.
Testowanie i debugowanie obrazów Open Graph
Platformy społecznościowe agresywnie buforują metadane Open Graph. Po aktualizacji tagów lub obrazu użyj oficjalnych narzędzi debugujących, aby wymusić ponowne pobranie i sprawdzić poprawność podglądu przed udostępnieniem.
Narzędzie debugowania udostępnień Facebook
Wprowadź swój URL na developers.facebook.com/tools/debug, aby pobrać aktualne metadane, zobaczyć wybrany przez Facebook obraz i zdiagnozować ewentualne błędy.
Wymuś odświeżenie cache
Walidator kart Twitter
Skorzystaj z cards-dev.twitter.com/validator, aby zobaczyć podgląd karty Twitter. Kliknij „Preview card”, by zobaczyć miniaturę, tytuł i opis w rzeczywistym formacie karty.
Podgląd przed publikacją
Inspektor postów LinkedIn
Inspektor postów LinkedIn na linkedin.com/post-inspector odświeża cache LinkedIn dla Twojego URL i pokazuje, jak będzie wyglądał podgląd posta z aktualnymi metadanymi.
Odśwież cache LinkedIn
Typowe błędy i jak je naprawić
Większość problemów z obrazami Open Graph wynika z kilku powtarzających się błędów. Wiedza, na co zwracać uwagę, oszczędza czas na debugowanie.
- Adresy URL względne. Narzędzia społecznościowe nie obsługują ścieżek względnych. Wartość og:image musi być pełnym, bezwzględnym URL z protokołem i domeną (https://twojadomena.com/sciezka/obraz.jpg).
- Brak tagów szerokości i wysokości. Bez og:image:width i og:image:height platformy muszą pobrać i przeanalizować obraz przed wygenerowaniem podglądu. Dodaj oba tagi, by tego uniknąć.
- Obrazy za uwierzytelnianiem. Narzędzia nie mają dostępu do obrazów wymagających logowania lub zablokowanych przez robots.txt. Obraz OG musi być publicznie dostępny bez uwierzytelniania.
- Nieprawidłowe proporcje obrazu. Obraz znacznie odbiegający od proporcji 1,91:1 będzie przycinany lub wyświetlany z czarnymi pasami. Zawsze testuj proporcje przed publikacją.
- Przestarzały cache platformy. Aktualizacja pliku obrazu bez zmiany nazwy lub dodania parametru w URL powoduje, że platformy wyświetlają starą wersję z cache. Zmień nazwę pliku lub wymuś odświeżenie za pomocą narzędzia debugującego.
Automatyzacja generowania obrazów Open Graph
Dla małych stron i blogów pojedynczy statyczny obraz OG na stronę to najprostsze i najpewniejsze rozwiązanie. W większych serwisach, gdzie każda strona wymaga unikalnego podglądu, praktyczna staje się generacja dynamiczna.
Dynamiczne generowanie obrazów OG tworzy unikalny obraz na żądanie lub podczas budowania strony, bazując na tytule, opisie lub innym kontencie. Efektem jest spójny, unikalny podgląd dla każdej strony bez ręcznego tworzenia obrazów.
Kiedy automatyzować
Automatyzuj, gdy masz wiele stron wymagających unikalnych obrazów, często zmieniasz treści lub ręczne tworzenie obrazów nie nadąża za publikacją.
Duża ilość lub dynamiczne treści
Kiedy stosować obrazy statyczne
Na większości stron — stronach docelowych, poradnikach i artykułach evergreen — starannie przygotowany obraz statyczny przewyższa generowany pod względem jakości i spójności marki.
Podejście nastawione na jakość
Popularne narzędzia do generacji dynamicznej to Cloudinary (transformacje przez parametry URL), Vercel OG (renderowanie React/HTML do obrazu na krawędzi) oraz pipeline’y screenshotów oparte na Puppeteer lub Playwright dla dowolnej technologii.