Obrazek wyróżniający WordPress: objaw, przyczyna i naprawa
Obrazek wyróżniający WordPress najczęściej nie wyświetla się z jednego z czterech powodów: nie jest ustawiony we wpisie, motyw go nie pokazuje w tym miejscu, obraz ma złe rozmiary po zmianie motywu albo wtyczka SEO wybiera inny obrazek do udostępnień. Zacznij od objawu: gdzie dokładnie go brakuje. Od tego zależy, gdzie szukać przyczyny.
Autor: Sani. Sani buduje moduł TellMyShop i na co dzień pracuje z zapleczem sklepów PrestaShop.
Aktualizacja: · 5 min czytania
Objaw, przyczyna, naprawa w jednej tabeli
| Objaw | Najczęstsza przyczyna | Naprawa |
|---|---|---|
| Na liście bloga część wpisów ma szary kwadrat albo nic | wpisy nie mają ustawionego obrazka (stare, importowane, pisane w pośpiechu) | ustaw obrazek we wpisie |
| Obrazek ustawiony, ale na liście bloga go nie ma | motyw albo szablon archiwum nie pokazuje obrazków | ustawienia motywu albo szablon w edytorze witryny |
| W edytorze nie ma pola Obrazek wyróżniający | panel ukryty w preferencjach albo brak obsługi w motywie | preferencje edytora, opiekun strony |
| Obrazek rozmazany albo ucięta głowa | stare rozmiary miniatur po zmianie motywu | ponowne wygenerowanie miniatur |
| Udostępnienie na Facebooku bez obrazka albo z innym | wtyczka SEO ma ustawiony inny obraz albo serwis pamięta starą wersję | obraz w ustawieniach wtyczki SEO, odświeżenie podglądu w serwisie |
| Produkt w sklepie pokazuje zaślepkę | brak zdjęcia produktu, czyli obrazka wyróżniającego produktu | ustaw zdjęcie produktu |
| W miejscu obrazka pusta ramka, która się nie ładuje | wtyczka od leniwego ładowania, optymalizacji albo CDN | opiekun strony |
Poniżej każdy objaw po kolei. Wybierz swój i pomiń resztę.
Wpisy na liście bloga bez obrazka
To najczęstszy przypadek i najprostszy. Wpis nie ma ustawionego obrazka, więc motyw nie ma czego pokazać. Obraz wstawiony w treść wpisu się nie liczy. Obrazek wyróżniający to osobne pole.
Takie dziury powstają zwykle po imporcie z innej platformy albo w starych wpisach, pisanych zanim motyw zaczął pokazywać miniatury. Przy kilku wpisach poprawisz je ręcznie. Przy 150 wpisach samo znalezienie braków zajmuje sporo klikania.
Ręcznie robisz to tak:
- Otwórz Wpisy → Wszystkie wpisy i otwórz wpis bez obrazka.
- W prawym panelu ustawień wpisu znajdź sekcję Obrazek wyróżniający.
- Wybierz obraz z Biblioteki mediów. Najlepiej taki, który już jest w treści wpisu.
- Sprawdź, czy obraz ma tekst alternatywny, i uzupełnij go, jeśli brakuje. Jak go pisać, wyjaśnia poradnik o tekście alternatywnym w WordPress.
- Zapisz wpis i sprawdź listę bloga w oknie prywatnym.
Obrazek jest ustawiony, a na stronie go nie widać
Wtedy decyduje motyw. W motywach blokowych listę wpisów buduje szablon w Wygląd → Edytor. Jeśli w szablonie archiwum albo strony bloga nie ma bloku obrazka wyróżniającego, obrazków nie będzie, choć są ustawione. W motywach klasycznych o tym decydują opcje motywu, najczęściej w Wygląd → Dostosuj.
Bywa też, że motyw w ogóle nie obsługuje obrazków dla danego rodzaju treści. Opisuje to dokumentacja WordPressa o obrazkach wyróżniających: motyw musi zgłosić tę obsługę, inaczej pole nie pojawi się w edytorze. Dopisanie jej to zmiana w plikach motywu, więc zostaw ją autorowi motywu albo osobie, która opiekuje się stroną.
Zanim kogoś poprosisz, sprawdź preferencje edytora. W menu z trzema kropkami w prawym górnym rogu edytora jest okno preferencji z listą paneli. Panel obrazka mógł zostać po prostu wyłączony.
Rozmazane albo źle przycięte miniatury
WordPress przy wgraniu tworzy kilka przyciętych wersji obrazu, w rozmiarach z ustawień i z motywu. Po zmianie motywu stare obrazy mają stare rozmiary, a nowy motyw rozciąga je albo przycina inaczej. Naprawą jest ponowne wygenerowanie miniatur, na przykład wtyczką Regenerate Thumbnails. Na dużej bibliotece to obciąża serwer, więc lepiej, żeby zrobił to opiekun strony.
Na przyszłość wgrywaj obrazy poziome, z ważnym elementem pośrodku. Wtedy każdy sposób przycięcia coś z niego zostawi.
Udostępnienie bez obrazka albo z innym obrazkiem
Facebook i LinkedIn biorą obrazek z ukrytego znacznika na stronie. Wpisuje go wtyczka SEO, zwykle w takiej kolejności: obraz ustawiony ręcznie w jej polach, potem obrazek wyróżniający, potem obraz z treści. Kolejność i zalecane rozmiary opisuje Yoast.
Jeśli wpis ma obrazek, a udostępnienie pokazuje inny, sprawdź pola społecznościowe wtyczki SEO w tym wpisie. Jeśli zmieniłeś obrazek po pierwszym udostępnieniu, serwis może pamiętać starą wersję. Wtedy pomaga narzędzie do odświeżania podglądu linku w samym serwisie.
Jak Claude znajduje braki i ustawia obrazki seriami
Wtyczka TellMyShop dla WordPress i WooCommerce sprawdza obrazki już w darmowym Audycie. Claude wyszukuje wpisy, strony i produkty bez obrazka wyróżniającego. Przegląd witryny dopisuje je do planu poprawek, obok innych braków, które opisujemy w tekście o audycie SEO WordPress. Przy pojedynczej stronie Claude sprawdza też, czy udostępnienie dostanie obrazek.
Z licencją Claude ustawia, zmienia albo usuwa obrazki do 50 wpisów, stron lub produktów naraz. Obraz bierze z Biblioteki mediów albo wgrywa z publicznego adresu, do 15 MB, od razu z tekstem alternatywnym i nazwą pliku. Nie tworzy grafik. Dobiera obrazy, które już masz, po nazwie pliku, tytule i wpisie, do którego obraz wgrano.
Znajdź wpisy na blogu bez obrazka wyróżniającego i zaproponuj obrazki.
Bez obrazka są 23 wpisy. W 17 z nich w treści jest już zdjęcie, więc proponuję użyć go jako obrazka wyróżniającego. Przykład:
Przycinanie róż jesienią
było: obrazek wyróżniający: brak
będzie: obrazek wyróżniający: roze-przycinanie-sekator.jpg z Biblioteki mediów
Dwa z tych zdjęć nie mają tekstu alternatywnego. Proponuję uzupełnić go osobną zmianą, zaraz po tej. 6 wpisów nie ma żadnego zdjęcia, te zostawiam tobie.
Zrób te 17.
Podgląd: 17 wpisów, obrazy z Biblioteki mediów, nic nie wgrywam. Twój motyw obsługuje obrazki we wpisach. Zapiszę po twoim „tak”.
Przed zapisem podgląd ostrzega, gdy motyw nie obsługuje obrazków dla danego rodzaju treści, gdy obraz nie ma tekstu alternatywnego i gdy produkt zostałby bez zdjęcia głównego. Każdą zmianę cofniesz z historii zmian, a cofnięcie usuwa też obrazy wgrane z adresu. Czego Claude nie zrobi: nie zmieni szablonu archiwum, nie wygeneruje ponownie miniatur i nie naprawi leniwego ładowania. To zostaje dla opiekuna strony.
O tekstach alternatywnych przeczytasz więcej w poradniku Google o grafice. Opis wtyczki znajdziesz na stronie TellMyShop dla WordPress i WooCommerce, ceny w cenniku, a kolejne poradniki na blogu.
Pytania i odpowiedzi
Gdzie ustawić obrazek wyróżniający we wpisie WordPress?
W edytorze wpisu, w prawym panelu ustawień wpisu, w sekcji Obrazek wyróżniający. Klikasz, wybierasz obraz z Biblioteki mediów albo wgrywasz nowy i zapisujesz wpis. W produkcie WooCommerce to samo pole nazywa się zdjęciem produktu.
Dlaczego w edytorze nie ma pola Obrazek wyróżniający?
Albo panel jest ukryty w preferencjach edytora, albo motyw nie obsługuje obrazków wyróżniających dla tego rodzaju treści. Najpierw sprawdź preferencje edytora i włącz panel. Jeśli go tam nie ma, obsługę musi dodać autor motywu albo osoba, która opiekuje się stroną.
Czy obrazek wyróżniający wpływa na Google?
Pośrednio. Wtyczki SEO zwykle używają go jako obrazka przy udostępnianiu w mediach społecznościowych, a Google bierze obrazy ze strony pod uwagę w wynikach z grafikami. Sam obrazek nie podniesie pozycji, ale wpis bez niego wygląda gorzej na liście bloga i w udostępnieniach.
Jaki rozmiar powinien mieć obrazek wyróżniający?
To zależy od motywu, bo każdy przycina obrazek po swojemu. Do udostępnień Yoast zaleca obrazy szerokie na około 1200 pikseli. Bezpiecznie jest wgrywać obraz poziomy, z ważnym elementem pośrodku.
Zmieniłem motyw i miniatury są źle przycięte. Co zrobić?
WordPress tworzy przycięte wersje obrazu przy wgraniu, według rozmiarów starego motywu. Nowy motyw potrzebuje innych rozmiarów, więc trzeba je wygenerować ponownie. Robi to wtyczka Regenerate Thumbnails albo osoba, która opiekuje się stroną.
WordPress jest znakiem towarowym WordPress Foundation. WooCommerce jest znakiem towarowym Automattic Inc. Claude jest znakiem towarowym Anthropic. TellMyShop nie jest powiązany z żadnym z tych podmiotów.