Kiedy wklejasz link do wiadomości, tweeta, wpisu na LinkedInie albo kanału na Slacku, platforma pobiera kartę podglądu — duży obrazek, tytuł, fragment tekstu. Ten obrazek to grafika Open Graph (OG) i pracuje mocniej niż Twój nagłówek. W szybko przewijanym feedzie to właśnie zdjęcie zatrzymuje kciuk. Pusty albo zepsuty podgląd wygląda na niedbały i ląduje w pominiętych.
Oto jak zrobić taki, który zapracuje na kliknięcie — w odpowiednim rozmiarze i z tekstem, który naprawdę da się przeczytać.
Rozmiar: 1200×630
Standardowy obrazek OG ma 1200×630 pikseli, czyli proporcje 1,91:1. Facebook, LinkedIn, Slack, Discord i większość systemów podglądu linków są zbudowane właśnie wokół niego. Zrób ten jeden dobrze, a masz pokryte niemal wszędzie.
W zależności od tego, gdzie trafi link, pojawia się kilka pokrewnych rozmiarów:
| Platforma / zastosowanie | Rozmiar | Proporcje |
|---|---|---|
| Open Graph (domyślny) | 1200×630 | 1,91:1 |
| Duża karta Twitter/X | 1200×628 | ~1,91:1 |
| Miniatura YouTube | 1280×720 | 16:9 |
| Kwadrat (feedy/IG) | 1080×1080 | 1:1 |
| Story / pionowy | 1080×1920 | 9:16 |
Do wpisu na blogu nie potrzebujesz wszystkich — koniem roboczym jest 1200×630. Ale jeśli robisz też miniaturę do wideo albo kwadratowy post, warto od razu wygenerować właściwy kształt, zamiast brzydko kadrować jeden obrazek na siłę.
Zasady dotyczące tekstu: czytelność w rozmiarze miniatury
Błąd, który zabija obrazki OG, to traktowanie ich jak plakatu oglądanego na pełnym ekranie. Nikt tak ich nie ogląda. Większość ludzi widzi kartę w może jednej trzeciej jej prawdziwego rozmiaru, na telefonie, w trakcie przewijania. Projektuj pod to.
- Duży tekst, mało słów. Krótki tytuł — pięć do ośmiu słów — czytelny, gdy karta się skurczy. Jeśli musisz mrużyć oczy w pełnym rozmiarze, w feedzie będzie nieczytelny.
- Mocny kontrast. Jasny tekst na ciemnym lub nasyconym tle, albo odwrotnie. Tekst leżący na ruchliwym zdjęciu bez podkładu po prostu znika.
- Ważne rzeczy trzymaj wyśrodkowane. Różne platformy inaczej przycinają krawędzie. Trzymaj tekst i logo z dala od zewnętrznych marginesów, żeby nic się nie ucięło.
- Jedna myśl na obrazek. Grafika OG to haczyk, nie streszczenie. Tytuł, może podtytuł i tyle.
Tła, na których tekst się wybija
Płaski gradient to bezpieczny wybór. Daje tekstowi czyste podłoże, wygląda nowocześnie i nigdy nie walczy ze słowami tak, jak robi to ruchliwe zdjęcie. Gradient od ciemnego do nieco ciemniejszego z jasnym tekstem jest niemal niezawodny.
Narzędzie do obrazków OG jest zbudowane dokładnie wokół tego: wybierz gotowy rozmiar (OG 1200×630, Twitter, YouTube, kwadrat albo story), wybierz gradientowe tło i dodaj tytuł oraz podtytuł. Dostajesz kartę do udostępniania, która czytelnie wygląda w każdym rozmiarze, bez otwierania pełnego programu graficznego.
HTML, dzięki któremu obrazek się pokaże
Zrobienie obrazka to połowa roboty. Platforma musi wiedzieć, gdzie go znaleźć. Dodaj te znaczniki do sekcji <head> swojej strony:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Twój tytuł">
<meta property="og:description" content="Jedno jasne zdanie.">
<meta name="twitter:card" content="summary_large_image">
To linia twitter:card ustawiona na summary_large_image daje Ci dużą kartę na X zamiast maleńkiej miniatury. Ważne są bezwzględne adresy URL (z https://) — ścieżki względne często nie dają się rozwiązać, gdy skrobak pobiera Twoją stronę.
Po wdrożeniu przetestuj to. Wklej swój adres URL do debuggera podglądu linków danej platformy (Sharing Debugger Facebooka, Post Inspector LinkedIna), żeby potwierdzić, że obrazek się ładuje, i wyczyścić ewentualną starą wersję z cache. Platformy agresywnie buforują podglądy, więc jeśli zaktualizowałeś obrazek, a wciąż widzisz stary, przycisk ponownego skanowania w debuggerze to rozwiązanie.
Zrób go, nie wysyłaj
Całość działa w Twojej przeglądarce — obrazek jest składany lokalnie za pomocą Canvas i nigdy nie trafia na serwer. Jest darmowy, bez rejestracji, bez znaku wodnego odbitego przez całą kartę i działa offline po pierwszej wizycie. Wygeneruj 1200×630, podepnij znaczniki meta, przepuść raz przez debugger, a Twoje linki zaczną zarabiać na siebie.