Rozmiar obrazu Open Graph: jeden plik na każdą platformę

Jeden obraz 1200 na 630 pikseli, w PNG lub JPEG, poniżej około 1 MB, z ważną zawartością wewnątrz środkowych 1080 na 600. Ten plik spełnia opublikowane specyfikacje Mety i LinkedIna, co jest całą odpowiedzią na pytanie o rozmiar obrazu Open Graph dla niemal każdej strony.

Wymiary to łatwa część. Zwykle też nie one się psują. Psuje się tekst położony zbyt blisko krawędzi, którą jedna platforma przycina, obraz, który nigdy się nie aktualizuje, bo crawler zapisał stary miesiące temu, albo karta renderowana bez żadnego obrazka, bo plik miał 4 MB na wolnym serwerze źródłowym. Pytanie o rozmiar obrazu OG to tak naprawdę trzy pytania, a tylko jedno dotyczy pikseli. Ten przewodnik omawia specyfikację, strefę bezpieczną, zachowanie pamięci podręcznej, przez które ludzie myślą, że ich tagi są błędne, oraz to, jak podglądy się rozwiązują, gdy udostępniany jest krótki link. Jeśli podgląd w ogóle nie istnieje, a nie jest źle przycięty, diagnozuje to przewodnik podgląd linku się nie pokazuje.

Rozmiar i dlaczego akurat taki

Proporcje 1,91:1 pojawiają się zarówno w dokumentacji Mety, jak i LinkedIna. Sam protokół Open Graph (dostęp 2026-10-25) nie ustala rozmiaru; jego przykłady to 400x300 i 300x300, a przy każdym podanym obrazie prosi o og:image:alt. Wokół liczb platform ukształtował się standard de facto.

Źródła to wskazówki Mety dotyczące obrazów i strona pomocy LinkedIna o podglądzie linków. X dokumentuje swoje karty osobno, ale nie udało nam się załadować tej dokumentacji, więc sprawdź ją, zanim oprzesz się na rozmiarze dla X.

Strefa bezpieczna, o której nikt nie mówi

Karta rzadko jest pokazywana w proporcjach, w których ją zaprojektowałeś. Strona LinkedIna mówi, że obrazy kwadratowe i pionowe mogą być przycinane, a wszystko poniżej 401 px szerokości staje się małą miniaturą. Strefa 1080 na 600 poniżej to nasza reguła kciuka, a nie liczba platformy.

Trzymaj wszystko, co musi przetrwać, wewnątrz środkowych 1080 na 600, wyśrodkowane, a zewnętrzny pas traktuj jako dekorację, którą możesz stracić. W praktyce oznacza to, że nagłówek leży na środku z lewej, a nie przy samej krawędzi, logo mieszka wewnątrz marginesu, a nie w rogu, i nie ma cienkiej ramki, bo ramka to jedyny element projektu, który wygląda na zepsuty w chwili przycięcia.

Liczy się też kontrast. Karty leżą w jednych klientach na jasnym tle, w innych na ciemnym, więc obraz, który polega na otoczeniu przy rozdzielaniu się od tła, może stracić krawędzie.

Tagi wokół obrazu

Pracę wykonują cztery tagi. Dwa z nich to te, które ludzie pomijają.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

Użyj bezwzględnego adresu URL ze schematem i hostem, bo crawler czyta tag bez kontekstu strony. Meta mówi, że szerokość i wysokość pozwalają jej crawlerowi wyrenderować obraz przy pierwszym udostępnieniu bez wcześniejszego pobierania. A og:image:alt to tag dostępności, który nic nie kosztuje, a prawie wszędzie go brakuje.

Dlaczego Twój nowy obraz się nie pokaże

To ten, który generuje zgłoszenia do wsparcia. Poprawiłeś obraz, widzisz nowy plik pod jego adresem, a karta nadal pokazuje projekt sprzed kwartału.

Dokumentacja Mety mówi, że jej crawler buforuje obrazy według adresu URL i że zmiana obrazu nie aktualizuje podglądów istniejących udostępnień. Trzy wyjścia, w kolejności, w jakiej bym je próbował:

• Wymuś ponowne pobranie przez Sharing Debugger Facebooka. LinkedIn ma też Post Inspector, choć strona pomocy, którą czytaliśmy, nie opisuje jego buforowania.
• Opublikuj obraz pod nową nazwą pliku, czyli innym adresem bez wpisu w pamięci podręcznej. Meta to zaleca i to jest niezawodny sposób.
• Zmień sam udostępniany adres, co jest banalnie łatwe, gdy udostępniasz krótki link, który kontrolujesz, a nie stały adres strony.

Przed publikacją darmowy sprawdzacz Open Graph pobiera adres URL i pokazuje tytuł, opis, obraz, nazwę witryny oraz podgląd karty Twittera, które znajdzie. Czyta tylko tagi. Nie raportuje wymiarów obrazu ani nie czyści pamięci podręcznej żadnej platformy.

Podglądy przy udostępnianiu krótkiego linku

Krótki link nie ma własnych tagów Open Graph i żadne nie są mu potrzebne. Edge Elido odpowiada crawlerom zwykłym przekierowaniem, bo podglądy linków w komunikatorach muszą za nim podążać, i nie liczy tych pobrań jako kliknięć (filtr botów to lista user-agentów, więc część skryptowych pobrań może się prześlizgnąć). Karta jest budowana z tagów celu. Jeśli jest błędna, napraw cel.

Dwie rzeczy zależą od warstwy linków. Przekierowanie po stronie serwera to bezpieczny wybór, kolejny powód, by utrzymywać łańcuch krótkim. A przekierowanie krótkiego linka gdzie indziej zmienia jego podgląd, choć platformy, które zbuforowały starą kartę, nadal ją pokazują.

Jedna luka: Elido nie ma nadpisania obrazu OG ani tytułu per link, więc krótki link nie może nieść innej karty niż jego cel. Strony mikrowitryn mają pole obrazu OG. Jeśli potrzebujesz kart per link, daj nam znać; jest w naszym backlogu.

Aby mieć link i dane o kliknięciach w jednym miejscu, załóż przestrzeń roboczą na własnej domenie i sprawdź kartę przed wysyłką.

Lista kontrolna warta zachowania

• 1200 na 630, PNG lub JPEG, bezwzględny adres HTTPS, poniżej 1 MB według naszego nawyku. To cała decyzja o rozmiarze obrazu OG.
• Nic ważnego poza środkowymi 1080 na 600 (nasza reguła kciuka), żadnych cienkich ramek.
• Obecne og:image:width, og:image:height i og:image:alt.
• twitter:card ustawione na summary_large_image, jeśli chcesz dużą kartę w X.
• Nowy obraz, nowa nazwa pliku, potem ponowne pobranie, zanim cokolwiek ogłosisz.

Ustaw te pięć rzeczy raz, wstaw je szablonem do nagłówka strony i obrazy Open Graph przestaną być czymś, o czym myślisz. To właściwa ilość uwagi, jaką im poświęcić.

Przeczytaj serię filarową

Ten wpis należy do klastra poradników. Dla podglądów, które zawodzą całkowicie, a nie są źle przycięte, podgląd linku się nie pokazuje to naprawa platforma po platformie, a jak zrobić klikalny link opisuje warstwę poniżej.

Powiązane na blogu

• Podgląd linku się nie pokazuje? Przyczyny i jak to naprawić
• Skracanie linku dla X (Twitter): co robi z nim t.co
• Jak śledzić linki w mediach społecznościowych: kliknięcia według kanału
• Czym jest link markowy i dlaczego lepiej konwertuje
• Jak przekierować URL: sześć sposobów i kiedy który jest właściwy
• Krótkie linki na własnej domenie: DNS, TLS i edge