Wchodzą Państwo do edytora WordPress, aby napisać wpis. Klikają „Dodaj blok" i widzą dziesiątki opcji. Wśród nich „Okładka". A na panelu bocznym, na samym dole, kryje się „Obrazek wyróżniający". Oba dotyczą obrazków. Oba wpływają na wygląd wpisu. Ale robią zupełnie różne rzeczy.

Zamieszanie między okładką a obrazkiem wyróżniającym to jedna z tych rzeczy, o których nie pisze się w poradnikach dla początkujących. I szkoda. Niewłaściwy wybór psuje układ na stronie głównej, zniekształca podgląd w mediach społecznościowych i pozostawia artykuł bez wizualnego haczyka w treści wpisu. I odwrotnie: gdy rozumie się różnicę, obie funkcje działają jak jeden system.

Poniżej analiza bez zbędnych słów: co robi każda z nich, gdzie się znajduje, jak dodać i w jakich przypadkach włączać obie.

💡 Szybki przegląd:

• Proszę zrozumieć, czym jest okładka i gdzie jest wyświetlana
• Proszę dowiedzieć się, jak działa obrazek wyróżniający i gdzie się pojawia
• Proszę porównać kluczowe różnice w tabeli według ośmiu kryteriów
• Proszę dodać okładkę przez edytor bloków krok po kroku
• Proszę ustawić obrazek wyróżniający i wypełnić tekst alternatywny
• Proszę skonfigurować oba formaty dla maksymalnej widoczności wpisu

Czym jest okładka w WordPress

Okładka to blok edytora Gutenberg, który wstawia szeroki obraz tła bezpośrednio w treść wpisu. Technicznie jest to blok Cover, który pojawił się wraz z edytorem bloków w WordPress 5.0. Umieszcza się go wewnątrz treści, sami Państwo decydują, w którym miejscu artykułu go umieścić.

Główną zaletą okładki jest nakładka tekstowa. Piszą Państwo nagłówek lub frazę na obrazku, zmieniają kolor tekstu i tła, dostosowują przezroczystość podkładu. Rezultat wygląda jak magazynowa wstawka: duży wizualny element + komunikat na nim. Szczególnie dobrze sprawdza się w długich artykułach: rozbija tekst, daje oku odpocząć i podkreśla przejście do nowego tematu.

Co jeszcze potrafi blok Cover:

• Stałe tło. Włącza się przełącznikiem w ustawieniach bloku. Obrazek pozostaje na miejscu podczas przewijania, lekki efekt paralaksy bez wtyczek.
• Wideo zamiast obrazka. Można przesłać plik wideo, a będzie on odtwarzany jako tło okładki.
• Nakładka z gradientem. Oprócz jednolitego koloru dostępny jest gradient, od przezroczystego do gęstego w dowolnym kierunku.
• Ustawienia wysokości. Minimalna wysokość bloku jest określana w pikselach, vh lub innych jednostkach.

Okładkę widać tylko wewnątrz wpisu. Na stronie głównej bloga, w strumieniu kategorii i w wynikach wyszukiwania jej nie ma. To element wewnętrznego układu, a nie metadanych.

Czym jest obrazek wyróżniający

Obrazek wyróżniający to metapole wpisu, które istnieje w WordPress od wersji 2.9. Nie jest wstawiany do treści artykułu (chociaż motyw może go automatycznie pokazywać na początku wpisu). Jego zadaniem jest reprezentowanie wpisu na zewnątrz.

Gdzie pojawia się obrazek wyróżniający:

• Strona główna bloga. Motyw wyświetla siatkę wpisów, a każdy pokazany z miniaturą to właśnie obrazek wyróżniający, zmniejszony do wymaganego rozmiaru.
• Media społecznościowe. Gdy wpis jest udostępniany w Telegramie, X czy Facebooku, serwis społecznościowy pobiera obrazek wyróżniający przez znaczniki Open Graph. Bez niego jest tylko link tekstowy, który zostanie przewinięty.
• Google Discover i wyszukiwarka. Google może pokazywać miniaturę obok wyniku, a źródłem ponownie jest obrazek wyróżniający.
• Bloki wewnętrzne. Blok „Ostatnie wpisy" i podobne pobierają obrazek właśnie stąd.

Rozmiary kontroluje motyw: rejestruje on zestaw rozmiarów miniatur (thumbnail, medium, large plus własne), a WordPress podczas przesyłania tworzy kopie dla każdego z nich. Oryginał pozostaje w bibliotece mediów.

Ważny niuans: obrazek wyróżniający nie musi być obecny w treści wpisu. Mogą Państwo przesłać obrazek tylko do metapola, a nie pojawi się on nigdzie wewnątrz artykułu, tylko w zewnętrznych reprezentacjach. I odwrotnie: obrazek wewnątrz treści nie staje się automatycznie wyróżniającym.

Tabela różnic

Jak dodać okładkę w edytorze bloków

Proszę otworzyć istniejący wpis lub utworzyć nowy. W edytorze Gutenberg proszę kliknąć przycisk „+" (dodaj blok) w tym miejscu tekstu, gdzie chcą Państwo widzieć okładkę. W pasku wyszukiwania bloków proszę wpisać „Okładka", pojawi się ikona bloku Cover. Proszę na nią kliknąć.

Blok zostanie wstawiony do treści z przyciskiem „Wybierz obrazek". Proszę go kliknąć, otworzy się biblioteka mediów. Proszę wybrać obrazek lub przeciągnąć nowy z komputera. Po przesłaniu obrazek rozciągnie się na szerokość treści.

Teraz proszę skonfigurować blok przez prawy panel:

• Nakładka. Na panelu bloku zobaczą Państwo ustawienie „Overlay", kolorową podkładkę między obrazkiem a tekstem. Domyślnie szara z przezroczystością 50% (patrz dokumentacja bloku Cover). Mogą Państwo zmienić kolor, usunąć przezroczystość do zera (nakładka zniknie) lub zastąpić ją gradientem.
• Tekst. Proszę kliknąć bezpośrednio na blok i wpisać nagłówek lub akapit. Czcionka, rozmiar i kolor są konfigurowane standardowymi narzędziami.
• Stałe tło. Przełącznik „Fixed background" na panelu bocznym włącza efekt paralaksy.
• Minimalna wysokość. W ustawieniach bloku proszę podać wartość w pikselach, na przykład 400px dla komputera stacjonarnego.

Alternatywny sposób: blok Cover nie musi być oddzielny. W edytorze można przekształcić dowolną grupę bloków w okładkę: proszę je zaznaczyć i kliknąć „Grupuj" → „Okładka".

Jak ustawić obrazek wyróżniający

Proszę otworzyć edytor wpisu. Na prawym panelu bocznym proszę znaleźć zakładkę „Wpis" (pierwsza ikona w górnym rzędzie). Proszę przewinąć w dół do sekcji „Obrazek wyróżniający". Jeśli jej Państwo nie widzą, proszę rozwinąć zakładkę przez „Ustawienia" (pionowy wielokropek w prawym górnym rogu → „Ustawienia" → „Wpis").

Proszę kliknąć „Ustaw obrazek wyróżniający". Otworzy się biblioteka mediów. Proszę wybrać obrazek. Po wyborze koniecznie proszę wypełnić dwa pola:

• Tekst alternatywny. Krótki, ale informacyjny opis tego, co jest na obrazku. Potrzebny dla dostępności (czytniki ekranu) i SEO. Proszę nie powielać tytułu wpisu, proszę pisać właśnie o zawartości obrazka.
• Podpis. Wyświetla się pod obrazkiem, jeśli motyw to obsługuje. Można pozostawić puste.

Przycisk „Gotowe" zapisuje wybór. Obrazek pojawi się w sekcji „Obrazek wyróżniający" z podglądem. Aby go zastąpić, proszę kliknąć na podgląd i wybrać inny.

Ważne: proszę nie mylić tekstu alternatywnego i tytułu. Tekst alternatywny jest dla programów, tytuł to dymek pojawiający się po najechaniu kursorem. Dla obrazka wyróżniającego priorytetowy jest tekst alternatywny, ponieważ to właśnie go odczytują wyszukiwarki w Open Graph.

Kiedy używać obu

Optymalny scenariusz dla bloga to używanie obu formatów jednocześnie, ale z różnymi obrazkami.

Obrazek wyróżniający niech będzie informacyjny: zrzut ekranu interfejsu, schemat, zdjęcie rezultatu. Ten obrazek pojawi się w mediach społecznościowych i wyszukiwarce, powinien sprzedawać kliknięcie. Żadnych clipartów i stockowych zdjęć „człowiek przy laptopie".

Okładkę proszę umieszczać w jednym lub dwóch miejscach długiego artykułu, jako wizualny separator między blokami tematycznymi. Obrazek może być nastrojowy, abstrakcyjny, z nakładką tekstową w formie cytatu z tekstu. Nie musi nieść ładunku informacyjnego, jej zadaniem jest zatrzymanie czytelnika wewnątrz.

Kiedy okładka nie jest potrzebna: krótkie notki informacyjne na 2-3 akapity. Kiedy obrazek wyróżniający nie jest potrzebny: praktycznie nigdy. Wpis bez obrazka wyróżniającego traci klikalność w mediach społecznościowych i wygląda na niedokończony w strumieniu bloga.

Jeden techniczny niuans: niektóre motywy automatycznie wyświetlają obrazek wyróżniający na początku wpisu. Jeśli używają Państwo takiego układu, proszę umieszczać okładkę nie na samym początku, a po pierwszym lub drugim akapicie, aby nie otrzymać dwóch dużych obrazków jeden po drugim.

Wideo: okładka kontra obrazek wyróżniający

Na kanale YouTube WebTutorials wizualnie pokazano proces dodawania obu typów obrazków w rzeczywistym edytorze WordPress: od wyszukania bloku do publikacji.

⁉️🤔 Często zadawane pytania

Czy można użyć jednego obrazka zarówno jako okładki, jak i obrazka wyróżniającego?

Technicznie tak. Ale rezultat rzadko wygląda dobrze. Obrazek wyróżniający jest skalowany przez motyw do zadanych proporcji (często 16:9 lub 4:3), a okładka rozciąga się na całą szerokość treści z nakładką. Ten sam obrazek w jednym miejscu zostanie przycięty, w innym kompozycja się rozjedzie. Lepiej dobrać dwa różne obrazy.

Co jest ważniejsze dla SEO, okładka czy obrazek wyróżniający?

Obrazek wyróżniający. Trafia on do znaczników Open Graph, jest wyświetlany w Google Discover i może pojawić się obok snippetu w wyszukiwarce. Okładka nie wpływa bezpośrednio na SEO, ale pośrednio pomaga poprzez obniżenie współczynnika odrzuceń: ładnie sformatowany wpis czyta się dłużej.

Dlaczego obrazek wyróżniający nie wyświetla się w mediach społecznościowych po publikacji?

Media społecznościowe buforują dane Open Graph. Jeśli najpierw opublikowali Państwo wpis bez obrazka, a potem go dodali, Facebook i X będą pokazywać starą wersję. Rozwiązanie: przepuścić URL przez walidator Open Graph (Facebook Sharing Debugger, Twitter Card Validator) lub po prostu odczekać 24-48 godzin.

Czy można umieścić okładkę we wpisach utworzonych przed Gutenbergiem?

Tak. Klasyczny edytor nie pokazywał bloku Cover, ale po przejściu na bloki mogą Państwo otworzyć dowolny stary wpis, a zostanie on przekonwertowany do zgodnego formatu. Proszę wstawiać okładkę jak zwykły blok.

Jak przyspieszyć ładowanie strony z dużą liczbą okładek?

Proszę nie umieszczać więcej niż dwóch okładek na wpis. Dla każdego obrazka proszę używać nowoczesnego formatu (WebP lub AVIF). Proszę zoptymalizować rozmiar: szerokość obszaru treści rzadko przekracza 1200 px, nie ma sensu ładować obrazka o szerokości 4000 px. Darmowe wtyczki takie jak ShortPixel lub EWWW Image Optimizer kompresują automatycznie podczas przesyłania. Więcej o optymalizacji w naszym poradniku o obrazkach w WordPress.

Okładka czy obrazek wyróżniający: co umieścić we wpisie

Krótka odpowiedź: i to, i to. Obrazek wyróżniający promuje wpis na zewnątrz: strona główna, media społecznościowe, wyszukiwarka. Okładka zatrzymuje czytelnika wewnątrz: wizualny separator, nakładka z cytatem, tło z paralaksą. Funkcje nie pokrywają się, lecz uzupełniają.

Jeśli wybierają Państwo jedno, zawsze obrazek wyróżniający. Wpis bez niego jest ślepy w świecie zewnętrznym. Okładka to opcja dla tych, którzy chcą wycisnąć maksimum z długiego formatu.

Proszę nie oszczędzać na obrazkach. Dwa przemyślane obrazy na wpis to nie luksus, a minimalny standard wizualnie kompetentnego bloga na WordPress.