Jak przygotować obraz podglądu linku do swojej strony

Czym jest obraz podglądu linku?

Wysyłasz komuś artykuł. Odbiorca może zobaczyć sam adres, niewłaściwy obraz albo czytelną kartę ze zdjęciem i tytułem. Obraz na tej karcie to grafika do udostępniania, obraz podglądu linku lub obraz Open Graph.

Towarzyszy linkowi do strony. Ma inne zadanie niż post na Instagramie, mała ikona karty przeglądarki (favicon) czy widoczna okładka artykułu. Możesz użyć tego samego oryginału, ale dopasuj kadr, tekst i ustawienia do zastosowania.

Tworząc podgląd, serwis odczytuje tytuł, opis i adres obrazu zapisane na stronie. Te informacje to metadane. Open Graph pozwala je oznaczyć tak, aby inne serwisy je rozpoznawały. Zwykle wpisujesz je w ustawieniach witryny bez pisania kodu. Poradnik MDN o metadanych wyjaśnia ich różnicę względem widocznej treści strony.

Aplikacje nie pokazują identycznych podglądów. Mogą przycinać obraz, skracać tytuł lub pomijać kartę. Witryna nie kontroluje więc całego wyglądu. Sprawdź link w serwisie, w którym chcesz go udostępnić.

Jaki rozmiar obrazu wybrać?

Zacznij od 1200 × 630 pikseli, jeśli twoja witryna nie zaleca innych wymiarów. To 1200 małych punktów szerokości i 630 wysokości, czyli prawie dwa razy więcej na szerokość. Jest to praktyczne zalecenie, a nie wspólny wymóg wszystkich serwisów.

Na przykład wskazówki LinkedIn zalecają 1200 × 627 dla podglądu wpisu publikowanego przez Stronę. Nie rozciągaj obrazu dla kilku pikseli różnicy. Przygotowując wersję do konkretnego miejsca, stosuj wskazówki danego serwisu.

Wymiary i rozmiar pliku oznaczają co innego. Piksele opisują szerokość i wysokość; kilobajty (KB) i megabajty (MB) zajmowane miejsce. Nie ma idealnej liczby KB dla każdego obrazu. Porównaj kopie i wybierz mniejszą, jeśli jest czytelna. Sprawdź również maksymalny limit serwisu.

Jeśli oryginał ma 1600 × 1600, najpierw zaplanuj poziomy kadr. Bezpośrednia zmiana na 1200 × 630 może rozciągnąć temat, jeśli narzędzie nie zachowuje proporcji. Nasz poradnik zmiany rozmiaru bez zniekształceń wyjaśnia różnicę między kadrowaniem a zmianą wymiarów.

Zaprojektuj obraz czytelny w małym rozmiarze

Karta często pojawia się na telefonie wśród innych treści. Małe szczegóły mogą zniknąć. Wybierz to, co odbiorca powinien zrozumieć od razu: temat artykułu, rodzaj wydarzenia albo produkt pod linkiem.

„Lepsze zdjęcia produktów” może działać lepiej niż pełny tytuł z podtytułem. Tytuł często jest też widoczny poza obrazem. Nie próbuj zmieścić wszystkiego w grafice; istotne informacje powinny również znaleźć się w tekście strony.

Dobierz kolory tak, aby tekst odcinał się od tła. Zostaw miejsce wokół tematu i odsuń twarze, produkty oraz ważne słowa od krawędzi. Nie ma jednej bezpiecznej strefy dla wszystkich serwisów. Sprawdź cały obraz i ciaśniejszy kadr wokół środka.

Wyświetl projekt w szerokości około 300 pikseli albo w małym rozmiarze na telefonie. To próba czytelności, nie wymóg techniczny. Czy da się czytać bez powiększenia i rozpoznać temat? Jeśli nie, skróć tekst, powiększ litery lub usuń drobne szczegóły.

W sklepie produkt powinien być rozpoznawalny. Grafika wydarzenia może oddawać atmosferę, ale data i zapisy powinny też być w tekście. Logo pomaga rozpoznać markę; to samo duże logo przy każdym artykule niewiele mówi o jego temacie.

Wybierz format i skompresuj kopię

JPG to praktyczny początek dla zdjęć. PNG pomaga, gdy JPG pogarsza litery lub ostre krawędzie. Świadomie wybierz tło: przezroczysta grafika zależy od interfejsu, a jasne logo może na nim zniknąć.

WebP i AVIF mogą pasować do obrazów na stronie. Obsługa przez przeglądarkę nie oznacza obsługi przez serwis tworzący podgląd. Tutaj zacznij od JPG lub PNG. Inne formaty sprawdź w serwisie docelowym.

Przygotuj kompozycję w programie graficznym. Użyj narzędzia Pixilo do kadrowania do wybrania kadru, a narzędzia do zmiany rozmiaru do ustawienia wymiarów. Gdy obowiązuje limit pliku, wypróbuj zmniejszanie do maksymalnego rozmiaru. Sprawdź pobrany plik: te narzędzia nie ustawiają grafiki udostępniania w twojej witrynie.

Kompresja zmniejsza miejsce zajmowane przez plik. Zachowaj oryginał i pracuj na kopii. Porównaj litery, krawędzie logo i przejścia kolorów. Jeśli jakość spada, wróć do oryginału i zastosuj słabszą kompresję. Obróbka rozmytej kopii nie przywraca szczegółów. Nasze porównanie JPG i PNG pomaga wybrać format dla tekstu i zdjęć.

Dodaj obraz w WordPressie lub kreatorze stron

Otwórz artykuł w panelu witryny. Poszukaj ustawienia obrazu udostępniania, Social image lub Open Graph image. Może znajdować się w ustawieniach optymalizacji dla wyszukiwarek, czyli SEO. Wykonaj te kroki:

1. Otwórz właściwą stronę. Edytuj ten artykuł lub stronę, której link chcesz udostępnić.
2. Wybierz obraz dla tej strony. Wgraj gotowy plik lub wybierz go z biblioteki mediów, gdzie są już zapisane obrazy.
3. Sprawdź tytuł i obraz domyślny. Zmiana ma dotyczyć tej strony, nie wspólnego obrazu całej witryny.
4. Zapisz i opublikuj. Samo wgranie pliku do biblioteki nie zmienia danych podglądu.
5. Przetestuj publiczny link. Przed udostępnieniem wykonaj kontrole opisane niżej.

W WordPressie ustawienie może zapewniać obecna wtyczka SEO. Wtyczka dodaje funkcje do WordPressa. Na przykład instrukcja Yoast opisuje ustawienia obrazów społecznościowych. Menu i podglądy zależą od wersji oraz abonamentu. Sprawdź dostępne funkcje przed instalacją kolejnej wtyczki.

Obraz wyróżniający może służyć jako obraz udostępniania, zależnie od motywu i wtyczek. Dokumentacja techniczna Yoast wyjaśnia jego wybór. Obraz domyślny to wspólna grafika zastępcza dla stron bez własnego obrazu. Przy ważnych artykułach wybierz osobną grafikę, jeśli domyślna nie oddaje tematu.

Jeśli nie znajdujesz ustawienia, przekaż administratorowi adres strony i gotowy obraz. Poproś o konfigurację oraz sprawdzenie opublikowanych danych. Wklejenie metadanych do widocznego tekstu artykułu nie umieszcza ich we właściwym miejscu.

Opcjonalnie: dodaj obraz w kodzie strony

Pomiń ten fragment, jeśli wybrano obraz w ustawieniach witryny. Jest dla ciebie lub administratora przy bezpośredniej edycji kodu. HTML opisuje strukturę strony; część head zawiera informacje, które nie pojawiają się jako tekst artykułu. Umieść tam poniższe dane. og:image podaje adres obrazu; pozostałe pola Open Graph opisują stronę. Specyfikacja Open Graph wyjaśnia te pola. Przykład dotyczy artykułu. Na zwykłej stronie informacyjnej użyj website jako typu.

Zastąp domenę, adresy, tytuł, opis i plik własnymi wartościami. Jeśli podajesz 1200 × 630, obraz musi faktycznie mieć te wymiary.

<meta property="og:type" content="article">
<meta property="og:title" content="Lepsze zdjęcia produktów w twoim sklepie">
<meta property="og:description" content="Przygotuj czytelne obrazy i sprawdź je na stronie produktu.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Niebieski kubek na jasnym tle z napisem Lepsze zdjęcia produktów.">

Użyj pełnego adresu HTTPS z nazwą witryny i ścieżką pliku. Adres strony trafia do og:url, a adres obrazu do og:image. Strona powinna używać zamierzonego adresu głównego. W witrynie wielojęzycznej sprawdź tytuł i adres każdej wersji.

Opisz temat obrazu i istotny tekst w polu og:image:alt. Jest to tekst alternatywny, nazywany też alt. Nie zastępuje opisu obrazu widocznego w artykule. Jeśli używasz tam tego samego pliku, uzupełnij jego opis osobno.

Najpierw sprawdź, czy motyw lub wtyczka już tworzy te pola, i zmień istniejące ustawienie. Wiele obrazów może być zamierzonych, ale sprzeczne stare i nowe dane utrudniają przewidzenie wyboru. Umieść główny obraz i jego wymiary razem.

Dane muszą znajdować się w opublikowanym HTML, gdy serwis pobiera stronę. Ustawienie dodawane później w przeglądarce może pozostać nieodczytane. Jeśli są osobne ustawienia kart X, sprawdź również ich obraz: poprawienie Open Graph nie zmienia innych pól.

Sprawdź opublikowany link przed udostępnieniem

Wklej publiczny adres do szkicu nowego wpisu lub wiadomości. Poczekaj na podgląd. Czy obraz i tytuł są właściwe? Czy tekst jest czytelny? Testuj w wybranym serwisie bez wysyłania szkicu. Gdy obraz jest nieprawidłowy lub go brakuje, wykonaj następne kontrole.

Otwórz źródło opublikowanej strony w przeglądarce i wyszukaj og:image. Nazwa funkcji zależy od przeglądarki. Sprawdź obraz, tytuł i adres albo poproś administratora. Adres szkicu z edytora nie jest testem publicznego linku.

Dla LinkedIn użyj Post Inspector. W Facebooku odpowiednikiem jest Sharing Debugger. Wklej adres strony i uruchom sprawdzanie; może być wymagane logowanie. Następnie obejrzyj nowy szkic wpisu. Niczego nie trzeba publikować wyłącznie do testu.

Zapisz adres strony, obrazu i nazwę serwisu. Jeśli działa tylko w jednym miejscu, te dane pomagają ustalić przyczynę bardziej niż ciągła zmiana grafiki. Pomoc LinkedIn dotycząca pamięci podręcznej wyjaśnia, że odświeżenie przez Post Inspector dotyczy nowych wpisów; istniejące podglądy pozostają bez zmian.

Dlaczego obrazu brakuje lub wyświetla się zła wersja?

Rozróżnij trzy przyczyny: strona wskazuje niewłaściwy obraz, serwis nie może pobrać pliku albo pokazuje wcześniej zapisany podgląd. Wyższa jakość nie naprawia błędnego adresu. Odświeżenie przeglądarki nie czyści pamięci innego serwisu.

Jeśli adres obrazu otwiera stronę internetową, ścieżka może być błędna lub pliku może brakować. Niektóre witryny pokazują wtedy stronę główną. Przekaż administratorowi oba adresy i poproś o sprawdzenie dostępu do prawdziwego pliku bez logowania.

Pamięć podręczna przechowuje kopię strony lub obrazu. Przyspiesza wczytywanie, ale kopia może się zestarzeć. CDN dostarcza pliki z różnych serwerów i też może przechowywać kopie. W razie potrzeby poproś o aktualizację kopii witryny. Najpierw sprawdź publiczną stronę i plik, potem zleć serwisowi ponowne odczytanie. Wyczyszczenie własnej przeglądarki nie aktualizuje pozostałych kopii.

Możesz zapisać nowy obraz pod odrębną nazwą, na przykład product-photos-social-v2.jpg, i zmienić jego adres na stronie. To rozróżnia pliki, ale nie wymusza ponownego odczytu strony ani zmiany wcześniejszych wiadomości.

Nie zmieniaj pochopnie stałego adresu artykułu i nie wyłączaj zabezpieczeń na próbę. Przekaż administratorowi adres i komunikat błędu. Może ustalić, co blokuje dostęp do tej konkretnej publicznej treści.

Przykład: podgląd poradnika o zdjęciach produktów

Wyobraź sobie poradnik dla sklepu: okładką jest kwadratowe zdjęcie kubka, a długi tytuł dotyczy zdjęć na różne urządzenia. Automatyczny poziomy kadr ucina uchwyt. To przykładowy sposób pracy, a nie zmierzony wynik.

1. Przygotuj poziomą wersję. Zacznij od 1200 × 630, pokaż cały kubek i zostaw przestrzeń wokół.
2. Skróć tekst na obrazie. Spróbuj „Lepsze zdjęcia produktów”. Pełny tytuł zostaw w artykule i ustawieniu tytułu podglądu.
3. Zapisz i sprawdź. Porównaj JPG i PNG: rozmiar pliku, litery i krawędzie produktu w małym podglądzie.
4. Ustaw obraz strony. Wybierz plik w ustawieniach udostępniania artykułu. Zapisz i opublikuj.
5. Przetestuj link. Sprawdź plik, dane strony i nowy podgląd w wybranym serwisie.

Wersja może pasować do linku, ale nie być najlepsza na Instagram czy szeroką okładkę witryny. Zachowaj oryginalny projekt do kolejnych wariantów zamiast wielokrotnie przerabiać gotowy JPG.

Jak obrazy podglądu wiążą się z SEO?

Obraz pomaga zrozumieć udostępniony link. Samo dodanie og:image nie gwarantuje wyższej pozycji w wyszukiwaniu. Obraz w wynikach, na stronie i w linku to różne zastosowania. Jedno ustawienie nie kontroluje wszystkich.

Wybierz opisową nazwę pliku i tytuł zgodny z treścią. Opisuj obraz dla człowieka, nie jako listę słów kluczowych. Poradnik SEO Google omawia przydatne treści i zrozumiałe obrazy. Nasz poradnik tekstów alternatywnych i nazw plików pomaga opisywać obrazy widoczne na stronie.

Zmniejszenie grafiki udostępniania nie przyspiesza automatycznie widocznego obrazu głównego. Jeśli strona używa innego pliku, zoptymalizuj go osobno. Oceniaj wydajność według obrazów faktycznie wczytywanych.

Najczęstsze pytania

Czy Open Graph wymaga 1200 × 630?

Nie. To praktyczny rozmiar początkowy. Open Graph opisuje sposób podawania adresu i wymiarów; serwis docelowy określa wygląd i limity.

Czy okładka może być grafiką udostępniania?

Tak, jeśli kompozycja pasuje, a witryna wskazuje właściwy plik. Osobna wersja pomaga przy pionowej lub kwadratowej okładce oraz tekście nieczytelnym w małej karcie.

Czy każda strona potrzebuje własnego obrazu?

Niekoniecznie. Obraz domyślny jest dobrym zastępstwem. Własne grafiki pomagają szczególnie przy udostępnianych poradnikach, produktach i wydarzeniach, których tematu nie wyjaśnia logo.

Dlaczego nowego obrazu nie ma w starym wpisie?

Serwis może zachować pierwotny podgląd. Sprawdź nowy szkic i wskazówki aktualizacji. Zmiana pliku w witrynie nie gwarantuje zmiany wysłanych już wiadomości.

Czy przycisk Udostępnij dodaje obraz do podglądu?

Nie. Ułatwia wysłanie linku, ale nie zastępuje danych strony. Serwis odbiorcy decyduje o pobraniu i pokazaniu karty. Udostępnienie samego pliku obrazu to inna czynność.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)