Obrazy na stronie a SEO: tekst alternatywny, nazwy plików, formaty i szybkość

Po co optymalizować obrazy na stronie firmowej

Optymalizacja obrazów daje cztery korzyści jednocześnie: dodatkowe źródło odwiedzin z wyszukiwania grafiki, lepsze zrozumienie strony przez wyszukiwarkę, krótszy czas ładowania i dostępność dla osób, które obrazu nie widzą. Każda z nich wynika z innych elementów, dlatego warto traktować zdjęcie na stronie jak pełnoprawną treść, a nie jak ozdobę dodawaną na końcu.

Pierwsza korzyść to ruch. Część osób szuka wzrokiem: mieszkaniec Łodzi, który planuje remont łazienki, przegląda zdjęcia gotowych realizacji, a klientka sklepu z Poznania porównuje wygląd lamp, zanim przeczyta jakikolwiek opis. Jeśli zdjęcie z Państwa strony pojawia się w takich wynikach, prowadzi prosto na podstronę z ofertą. Skalę tego ruchu można sprawdzić w Search Console: w raporcie Skuteczność, w filtrach u góry, znajduje się filtr typu wyszukiwania, w którym wybiera się wyszukiwanie grafiki zamiast wyników z sieci.

Druga korzyść to kontekst. Dokumentacja Google Search Central dotycząca obrazów opisuje, że wyszukiwarka czerpie informacje o obrazie z treści strony, w tym z podpisów i tytułów, a tekst alternatywny nazywa najważniejszym atrybutem dostarczającym metadanych o obrazie. Dobrze opisane zdjęcie jest więc dodatkową, czytelną wskazówką, czego dotyczy cała podstrona.

Trzecia korzyść to szybkość. W tej samej dokumentacji Google przypomina, że obrazy często stanowią największą część rozmiaru strony i mogą sprawiać, że otwiera się ona powoli. Czwarta to dostępność: osoba korzystająca z czytnika ekranu usłyszy dokładnie to, co zostało wpisane w tekście alternatywnym, albo nie usłyszy nic sensownego, jeśli tego tekstu zabrakło.

Jak Google znajduje obrazy i skąd wie, co przedstawiają

Google znajduje obraz w atrybucie src znacznika img, a jego treść ocenia na podstawie tekstu alternatywnego, nazwy pliku, podpisu oraz treści, która znajduje się obok. Wynika z tego prosta zasada: obraz ważny dla oferty musi być zwykłym elementem strony, otoczonym tekstem na ten sam temat.

Znacznik img zamiast tła w arkuszu stylów

Dokumentacja Google mówi o tym wprost: wyszukiwarka nie indeksuje obrazów osadzonych w CSS. Zdjęcie ustawione jako tło sekcji wygląda dla odwiedzającego tak samo, lecz dla wyszukiwarki nie jest treścią strony. Nie ma też tekstu alternatywnego, więc czytnik ekranu go nie zauważy. W praktyce spotykamy to często w kreatorach stron: duże zdjęcie na górze strony głównej, galeria realizacji albo zdjęcia zespołu bywają wstawione jako tła bloków. Jeżeli takie zdjęcie ma znaczenie, na przykład pokazuje wykonaną przez firmę elewację albo wnętrze gabinetu, powinno zostać osadzone znacznikiem img. Tło w arkuszu stylów warto zostawić dla elementów czysto ozdobnych: wzorów, gradientów, faktur.

Tytuł strony, podpis i tekst wokół obrazu

Google zaleca umieszczanie obrazów w pobliżu powiązanego tekstu i na stronach, które dotyczą tego samego tematu. Zdjęcie pieca gazowego wstawione obok akapitu o serwisie pieców jest zrozumiałe. To samo zdjęcie na dole strony kontaktowej, bez żadnego opisu, mówi wyszukiwarce niewiele. Podpis pod zdjęciem jest dobrym miejscem na informacje, które nie pasują do tekstu alternatywnego: miejscowość realizacji, użyty materiał, nazwę modelu. Znaczenie mają także tytuł i opis samej podstrony, ponieważ to one pojawiają się obok miniatury w wynikach.

Warto odróżnić podpis od atrybutu title obrazu. Podpis widzi każdy. Atrybut title to dodatkowa etykieta, o której dokumentacja WordPressa pisze, że wiele urządzeń i przeglądarek w ogóle jej nie wyświetla. Nie zastępuje on tekstu alternatywnego i nie ma potrzeby wypełniać go przy każdym zdjęciu.

Jeden, stały adres dla każdego obrazu

Google prosi o spójne odwoływanie się do obrazu zawsze pod tym samym adresem URL, aby mógł przechowywać go w pamięci podręcznej i używać ponownie. Kłopot pojawia się wtedy, gdy to samo zdjęcie jest wgrywane kilka razy, przy każdej okazji od nowa, albo gdy po przebudowie serwisu wszystkie pliki trafiają do innego katalogu bez przekierowań. Przy zmianie domeny lub systemu zarządzania treścią adresy obrazów wymagają takiej samej uwagi jak adresy podstron.

Tekst alternatywny: do czego służy atrybut alt i jak go pisać

Tekst alternatywny to krótki opis obrazu zapisany w atrybucie alt. Jest odczytywany przez czytniki ekranu, wyświetla się wtedy, gdy obraz się nie załaduje, i pomaga wyszukiwarce ustalić, co obraz przedstawia. Dobry alt opisuje to, co faktycznie widać, z uwzględnieniem tematu strony, i brzmi jak zwykłe zdanie.

Google pokazuje w dokumentacji trzy stopnie jakości na przykładzie zdjęcia psa. Najsłabszy to brak atrybutu alt albo ciąg powtarzanych wyrazów o szczeniakach. Lepszy, choć skąpy, to jedno słowo „szczeniak”. Najlepszy to pełny opis: „Szczeniak dalmatyńczyka bawi się w aportowanie”. Zalecenie brzmi jednoznacznie:

Google w zaleceniach dotyczących obrazów wprost odradza wypełnianie atrybutu alt słowami kluczowymi (źródło: Google Search Central).

Podobnie pisze kurs dostępności w serwisie web.dev: upychanie słów kluczowych męczy użytkowników czytników ekranu. Ten sam materiał radzi, by tekst alternatywny zwykle nie przekraczał 150 znaków, nie zaczynał się od słów „zdjęcie” lub „obraz” (czytnik sam informuje, że to grafika) i zawierał interpunkcję. Dodatkowe informacje lepiej przenieść do podpisu albo do treści obok.

Przykłady słabego i dobrego tekstu alternatywnego

Ten sam obraz można opisać różnie w zależności od tego, czemu służy na stronie. Zdjęcie produktu ma pozwolić rozpoznać towar, zdjęcie realizacji ma pokazać efekt pracy, wykres ma przekazać wniosek, a okładka wpisu ma oddać jego temat. Poniższe przykłady pokazują różnicę między opisem pisanym dla wyszukiwarki a opisem pisanym dla człowieka.

Wykres zasługuje na osobną uwagę. Web.dev zalicza wykresy, mapy i infografiki do obrazów złożonych, które wymagają krótkiego i długiego opisu. Krótki trafia do atrybutu alt, a dłuższy, z danymi i wnioskami, najlepiej umieścić w widocznym tekście pod wykresem albo w tabeli. Korzystają na tym wszyscy czytelnicy, a liczby zapisane tekstem są zrozumiałe dla wyszukiwarki.

Kiedy alt ma zostać pusty

Obraz czysto ozdobny, który nie niesie informacji, powinien mieć pusty atrybut alt, zapisany jako alt="". To coś innego niż brak atrybutu. Jak wyjaśnia web.dev, przy braku atrybutu technologia wspomagająca może odczytać na głos nazwę pliku lub sąsiedni tekst, natomiast pusty alt pozwala ją pominąć. Ozdobnikiem jest na przykład falista linia oddzielająca sekcje albo abstrakcyjna grafika w tle nagłówka. W razie wątpliwości ten sam kurs radzi opis jednak wpisać.

Tekst alternatywny obrazu, który jest linkiem

Jeżeli obraz jest odnośnikiem, tekst alternatywny pełni rolę tekstu linku. Google podaje, że może go użyć jako tekstu kotwicy, a web.dev dodaje, że taki obraz powinien opisywać czynność lub cel, a nie wygląd. Logo prowadzące na stronę główną, baner kierujący do kategorii czy miniatura otwierająca kartę produktu potrzebują więc opisu mówiącego, dokąd prowadzą, na przykład „Kategoria: lampy wiszące do salonu”. Pusty alt w obrazie będącym jedyną zawartością linku oznacza link bez nazwy.

Nazwy plików i adresy obrazów

Nazwa pliku jest dla Google dodatkową wskazówką dotyczącą tematu obrazu, dlatego powinna być krótka i opisowa. Dokumentacja zestawia dwa przykłady: nazwa opisująca czarnego kotka jest lepsza niż IMG00023.JPG, a nazw ogólnych, takich jak image1.jpg, pic.gif czy 1.jpg, należy unikać.

W praktyce wystarczy kilka wyrazów pisanych małymi literami i połączonych dywizami, bez polskich znaków i spacji: remont-lazienki-szare-plytki.jpg, botki-damskie-skorzane-czarne.webp, kancelaria-sala-spotkan.jpg. Web.dev zaleca właśnie dywizy zamiast podkreślników i zwraca uwagę, że nazwa pliku bywa odczytywana wtedy, gdy tekstu alternatywnego zabrakło. Nazwa nie musi powtarzać tekstu alternatywnego słowo w słowo i nie powinna być listą fraz. Trzy do pięciu wyrazów zwykle wystarcza.

Nazwę najlepiej nadać przed wgraniem pliku na serwer. Zmiana nazwy po publikacji oznacza zmianę adresu obrazu, a więc złamanie zasady stałego adresu opisanej wcześniej. Jeżeli witryna ma wersje językowe, Google sugeruje tłumaczenie także nazw plików. Obrazy mogą być serwowane z innej domeny, na przykład z sieci dostarczania treści, i nie stanowi to przeszkody. Dokumentacja map witryn zaleca w takiej sytuacji zweryfikowanie w Search Console również tej drugiej domeny.

Formaty obrazów: JPEG, PNG, WebP, AVIF i SVG

Wyszukiwarka Google obsługuje obrazy w formatach BMP, GIF, JPEG, PNG, WebP, SVG oraz AVIF, więc każdy z pięciu najpopularniejszych formatów może zostać zaindeksowany. Wybór między nimi zależy od rodzaju obrazu: zdjęcia zapisuje się inaczej niż logo, a ikonę inaczej niż zrzut ekranu.

Kurs o obrazach w serwisie web.dev opisuje każdy format osobno. JPEG od dziesięcioleci jest właściwym wyborem dla fotografii. Stosuje kompresję stratną, czyli usuwa szczegóły, których oko i tak by nie dostrzegło, a jakość ustawia się jedną liczbą od 0 do 100. PNG stosuje kompresję bezstratną i obsługuje półprzezroczystość, dlatego sprawdza się przy prostych grafikach z przezroczystym tłem, na przykład logo z cieniem. Ten sam kurs ostrzega, że ze względu na wagę PNG prawie nigdy nie jest dobrym wyborem dla zdjęć.

WebP powstał jako następca JPEG: przy porównywalnej jakości daje mniejsze pliki, a dodatkowo obsługuje przezroczystość i animację. AVIF jest formatem nowszym, opartym na kodeku wideo AV1, i według web.dev pozwala uzyskać dobrą jakość przy plikach mniejszych niż JPEG lub WebP. Jego słabszą stroną jest skromniejsze wsparcie w narzędziach do obróbki. SVG to format wektorowy: opisuje obraz jako zestaw kształtów, które przeglądarka rysuje od nowa w każdej wielkości. Nadaje się do ikon i grafik o ostrych liniach oraz jednolitych kolorach.

Nowe formaty można podawać bezpiecznie dzięki elementowi picture: przeglądarka wybiera pierwszy format, który potrafi wyświetlić, a na końcu znajduje się zwykły znacznik img z plikiem zapasowym. Google zaleca, aby taki zapasowy adres w atrybucie src zawsze był obecny. Dla opisu SVG osadzonego bezpośrednio w kodzie strony nie stosuje się atrybutu alt, lecz element title wewnątrz rysunku.

Wymiary, obrazy responsywne i szybkość ładowania

Najwięcej zyskuje się na trzech rzeczach: podawaniu obrazu w wymiarach zbliżonych do tych, w jakich jest wyświetlany, wpisaniu jego szerokości i wysokości do kodu oraz rozsądnym ustaleniu kolejności ładowania. Dopiero potem warto zajmować się dalszym zmniejszaniem wagi pliku.

Kilka wersji tego samego zdjęcia: srcset i sizes

Zdjęcie przygotowane dla dużego monitora jest na telefonie niepotrzebnie ciężkie. Web.dev podaje, że wysyłanie obrazów w rozmiarze komputerowym na urządzenia mobilne może zużywać od 2 do 4 razy więcej danych, niż potrzeba. Rozwiązaniem są obrazy responsywne, czyli dopasowujące się do ekranu. Atrybut srcset zawiera listę wersji pliku wraz z ich szerokością, a atrybut sizes informuje, ile miejsca obraz zajmie w układzie. Na tej podstawie przeglądarka sama pobiera najodpowiedniejszą wersję. Ten sam materiał wskazuje, że zwykle przygotowuje się od 3 do 5 rozmiarów jednego obrazu. W atrybucie src zostaje wersja zapasowa.

W wielu systemach, także w WordPressie, mniejsze wersje powstają przy wgrywaniu pliku. Mimo to warto zajrzeć do kodu gotowej podstrony i upewnić się, że przy najważniejszych zdjęciach lista wersji rzeczywiście się znajduje. Narzędzie Lighthouse wbudowane w przeglądarkę Chrome wskazuje w audycie wydajności obrazy, które są większe, niż wymaga tego miejsce na stronie.

Atrybuty width i height a stabilność układu

Gdy przeglądarka nie zna wymiarów obrazu, nie może zarezerwować dla niego miejsca. Tekst wyświetla się od razu, a po pobraniu zdjęcia przesuwa się w dół. Czytelnik traci miejsce, w którym czytał, albo klika nie ten przycisk, który zamierzał. Zjawisko to mierzy wskaźnik CLS (Cumulative Layout Shift, czyli łączne przesunięcie układu), jeden z trzech wskaźników Core Web Vitals, którymi Google opisuje wygodę korzystania ze strony.

Zalecenie web.dev jest krótkie: zawsze podawać atrybuty width i height przy obrazach i filmach. Współczesne przeglądarki wyliczają z nich proporcje i rezerwują miejsce jeszcze przed pobraniem pliku, nawet jeśli obraz jest potem skalowany arkuszem stylów do szerokości ekranu. Dobry wynik CLS to 0,1 lub mniej dla co najmniej 75 procent odwiedzin strony.

Leniwe ładowanie i priorytet obrazu głównego

Leniwe ładowanie, włączane atrybutem loading="lazy", odkłada pobranie obrazu do chwili, gdy czytelnik zbliży się do niego podczas przewijania. Dla zdjęć położonych niżej na stronie to dobre rozwiązanie. Dla obrazu widocznego zaraz po otwarciu strony jest błędem. Taki obraz bywa największym elementem pierwszego widoku, a czas jego wyświetlenia mierzy wskaźnik LCP (Largest Contentful Paint, czyli wyświetlenie największego elementu treści). Web.dev pisze, że obrazu LCP nigdy nie należy ładować leniwie, ponieważ zawsze prowadzi to do zbędnego opóźnienia. Dobry wynik LCP to 2,5 sekundy lub mniej dla co najmniej 75 procent odwiedzin.

Główny obraz można dodatkowo wyróżnić atrybutem fetchpriority="high", który podnosi jego priorytet pobierania. Ma to sens dla jednego, najwyżej dwóch obrazów na stronie, bo wyróżnienie wielu plików naraz przestaje cokolwiek zmieniać. Ważne jest też, aby adres głównego obrazu znajdował się w kodzie HTML wysyłanym przez serwer. Zdjęcie wstawiane skryptem albo ustawione jako tło w arkuszu stylów przeglądarka odkrywa późno. To kolejny powód, by ważne obrazy osadzać znacznikiem img. Przy leniwym ładowaniu atrybuty width i height są tym bardziej potrzebne: web.dev wyjaśnia, że obraz bez wymiarów ma początkowo zerową wielkość, przez co przeglądarka może uznać, że cała galeria mieści się na ekranie, i pobrać wszystkie zdjęcia od razu.

Kompresja i waga pliku

Kompresja to zmniejszenie wagi pliku przy zachowaniu wyglądu, który czytelnik uzna za dobry. Kolejność czynności ma znaczenie: najpierw przycięcie i zmniejszenie zdjęcia do potrzebnych wymiarów, potem wybór formatu, na końcu ustawienie jakości. Autor kursu web.dev radzi ustawić jakość JPEG nieco niżej, niż wydaje się zauważalne, zwłaszcza gdy obraz jest wyświetlany w mniejszym rozmiarze, oraz zapisywać JPEG w trybie progresywnym, w którym cały obraz pojawia się od razu i stopniowo się wyostrza. Nie podajemy uniwersalnej granicy wagi w kilobajtach, ponieważ zależy ona od wymiarów i treści zdjęcia. Lepszą miarą jest wynik konkretnej podstrony w PageSpeed Insights i lista obrazów, które narzędzie wskazuje jako zbyt ciężkie. Porządkowanie obrazów w całym serwisie jest zwykle częścią szerszych prac, jakie obejmuje SEO techniczne.

Jeśli chcą Państwo zamówić pozycjonowanie grafiki, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Mapa witryny, dane strukturalne i podglądy obrazów

Trzy dodatkowe sygnały pomagają Google odnaleźć obrazy i właściwie je pokazać: mapa witryny z obrazami, właściwość image w danych strukturalnych oraz ustawienia podglądu. Żaden z nich nie zastępuje dobrze osadzonego i opisanego zdjęcia, ale każdy usuwa konkretną przeszkodę.

Mapa witryny z obrazami

Mapa witryny z obrazami to zwykła mapa witryny, w której przy adresie podstrony wymienione są adresy znajdujących się na niej obrazów. Dokumentacja Google wskazuje, że jest to dobry sposób na poinformowanie wyszukiwarki o obrazach, których mogłaby sama nie znaleźć, na przykład ładowanych skryptem. Przy jednym adresie podstrony można wymienić do 1000 obrazów, a jedynym potrzebnym elementem opisu obrazu jest jego adres. Dodatkowe pola, takie jak podpis, tytuł czy licencja, zostały z dokumentacji wycofane, więc nie warto ich uzupełniać. Dla małej strony usługowej z kilkunastoma zdjęciami osadzonymi znacznikiem img taka mapa ma niewielkie znaczenie. Przydaje się w sklepach i serwisach z dużymi galeriami.

Obraz w danych strukturalnych Product i Article

Dane strukturalne to opis strony zapisany w kodzie w słowniku schema.org, zrozumiały dla wyszukiwarek. W opisie produktu przeznaczonym do informacji o ofercie sprzedawcy właściwość image należy do wymaganych, obok nazwy i oferty. Google dodaje, że preferowane są zdjęcia wyraźnie ukazujące produkt, na przykład na białym tle. W opisie typu Article, stosowanym dla wpisów i aktualności, obraz ma pasować do treści, a nie być logo ani napisem.

Wymagania w obu przypadkach są zbieżne. Adres obrazu musi być dostępny do pobrania i zaindeksowania, plik musi być w formacie obsługiwanym przez Grafikę Google, a obraz ma przedstawiać to, co opisują znaczniki. Najlepsze efekty daje podanie kilku obrazów w wysokiej rozdzielczości, czyli o iloczynie szerokości i wysokości wynoszącym co najmniej 50 tysięcy pikseli, w proporcjach 16:9, 4:3 i 1:1. Dostępność adresu można sprawdzić narzędziem do sprawdzania adresów URL w Search Console. Szerzej o tym, jak wdrażać takie opisy, piszemy we wpisie o danych strukturalnych schema.org.

Obraz podglądu: og:image i max-image-preview

Znacznik og:image wskazuje obraz, który ma reprezentować stronę po udostępnieniu jej w mediach społecznościowych i komunikatorach. Specyfikacja Open Graph zalicza go do czterech właściwości wymaganych na każdej stronie i zaleca, aby razem z nim podać og:image:alt, czyli opis tego, co obraz przedstawia. Google również bierze ten znacznik pod uwagę przy wyborze obrazu, który pokazuje obok wyniku. Radzi wybierać obraz reprezentatywny dla strony, unikać ogólnego logo i grafik z tekstem, a także skrajnych proporcji. Kancelaria z Krakowa, która na każdej podstronie podaje to samo logo, traci szansę na czytelny podgląd przy każdym udostępnionym wpisie.

Druga sprawa to wielkość podglądu w wynikach wyszukiwania. Reguła max-image-preview w znaczniku meta robots przyjmuje trzy wartości: none (bez podglądu), standard (podgląd domyślny) oraz large (większy podgląd, nawet o szerokości widocznego obszaru). Dokumentacja podaje, że bez tej reguły Google może wyświetlać podgląd w rozmiarze domyślnym. Jeżeli zależy Państwu na dużych miniaturach, warto sprawdzić w kodzie strony, czy wartość large jest ustawiona. W tym samym miejscu można trafić na regułę noimageindex, która uniemożliwia indeksowanie obrazów z danej strony. Pozostawiona przez pomyłkę po pracach nad serwisem wyjaśnia czasem, dlaczego zdjęcia w ogóle nie pojawiają się w Grafice Google.

Obrazy w sklepie internetowym

W sklepie obraz jest częścią oferty, dlatego wymaga więcej staranności niż na stronie usługowej: każdy produkt potrzebuje własnych, wyraźnych zdjęć, własnego tekstu alternatywnego i poprawnego obrazu w danych strukturalnych. Skala sprawia, że błędy powielają się setki razy, więc najwięcej daje poprawienie szablonu, a nie pojedynczych kart.

Najczęstszy kłopot to tekst alternatywny tworzony automatycznie z samej nazwy produktu i taki sam dla wszystkich zdjęć w galerii. Sklep z Poznania, który przy ośmiu zdjęciach jednej sofy podaje osiem identycznych opisów, nie przekazuje ani klientom, ani wyszukiwarce, czym ujęcia się różnią. Lepiej uzupełnić nazwę o to, co widać na danym zdjęciu: widok z boku, zbliżenie tkaniny, sofa po rozłożeniu, kolor wariantu. Drugi kłopot to zdjęcia od producenta wgrywane w pełnej rozdzielczości i wyświetlane jako małe miniatury na liście kategorii. Strona kategorii z kilkudziesięcioma takimi plikami otwiera się powoli zwłaszcza na telefonie.

Na liście produktów miniatura jest zarazem linkiem do karty produktu, więc jej tekst alternatywny działa jak tekst odnośnika. Zdjęcia poniżej pierwszego ekranu mogą ładować się leniwie, natomiast główne zdjęcie na karcie produktu powinno ładować się od razu i mieć podane wymiary. Warto też sprawdzić, czy po zmianie wariantu (kolor, rozmiar) obraz w danych strukturalnych nadal odpowiada temu, co widzi klient. Więcej o porządkowaniu oferty opisujemy we wpisie o tym, jak przebiega pozycjonowanie sklepu internetowego, a prace nad zdjęciami są stałym elementem usługi, jaką jest pozycjonowanie sklepów.

Obrazy tworzone przez AI i prawa do zdjęć

Dokumentacja Google dotycząca obrazów nie różnicuje zaleceń technicznych ze względu na sposób powstania grafiki: obraz wygenerowany potrzebuje tekstu alternatywnego, nazwy, formatu i wymiarów tak samo jak fotografia. Różnica dotyczy oznaczenia pochodzenia i odpowiedzialności za to, co obraz pokazuje.

W opisie metadanych obrazu Google wymienia pole „typ źródła cyfrowego” w standardzie IPTC, które informuje, czy obraz powstał z udziałem algorytmu. Metadane mogą też zasilać funkcję „O tym obrazie”. Te same metadane służą do podania twórcy, informacji o prawach autorskich i licencji, a prawidłowo oznaczona licencja może sprawić, że obraz będzie kwalifikować się do plakietki „Na licencji” w Grafice Google. Dokumentacja ostrzega przy tym, że usuwanie metadanych z plików w celu zmniejszenia ich wagi może być w niektórych krajach niezgodne z prawem, i zaleca pozostawienie co najmniej informacji o twórcy i prawach autorskich.

Z naszej praktyki wynikają dwie ostrożne uwagi. Grafika wygenerowana nie powinna udawać dokumentacji: zdjęcie „realizacji”, której firma nie wykonała, albo portret pracownika, który nie istnieje, podważa zaufanie do całej strony. Piszemy o tym szerzej we wpisie o wiarygodności strony. Druga uwaga dotyczy praw: zdjęcie znalezione w wyszukiwarce nie jest przez to dozwolone do użycia. Przed publikacją warto mieć pewność, skąd pochodzi plik i na jakich warunkach można z niego korzystać, a w razie wątpliwości zapytać prawnika. Najbezpieczniejsze i zwykle najskuteczniejsze są własne zdjęcia firmy.

Typowe błędy z obrazami w WordPressie

W WordPressie najwięcej nieporozumień dotyczy tego, gdzie wpisuje się tekst alternatywny. Są dwa miejsca: biblioteka mediów oraz ustawienia bloku obrazu na konkretnej podstronie, i nie działają one tak samo.

Według dokumentacji WordPressa tekst alternatywny dodany w bibliotece mediów ustawia wartość domyślną, używaną przy wstawianiu obrazu w kolejnych miejscach. Tekst wpisany w ustawieniach bloku dotyczy natomiast tylko tego jednego użycia obrazu na danej stronie lub we wpisie. Wniosek praktyczny: uzupełnienie opisów w bibliotece nie daje pewności, że zmienią się opisy przy zdjęciach wstawionych wcześniej. Po takiej akcji warto otworzyć kilka opublikowanych podstron i obejrzeć ich kod albo pole „Tekst alternatywny” w panelu bocznym bloku. Dotyczy to zwłaszcza stron budowanych kreatorami, które mają własne pola dla obrazów.

Drugi błąd to automatyczne nazwy plików. Telefon lub aparat nadaje zdjęciom nazwy typu IMG z numerem, a zrzuty ekranu dostają nazwy złożone z samych cyfr. Plik wgrany pod taką nazwą zachowuje ją w adresie. Nazwę należy więc zmienić na komputerze, przed wgraniem. Tytuł nadany w bibliotece mediów nie zmienia adresu pliku.

Trzeci błąd to wstawianie ważnych zdjęć jako tła sekcji lub okładki, przez co nie mają tekstu alternatywnego i nie są indeksowane. Czwarty to wtyczki, które włączają leniwe ładowanie dla wszystkich obrazów, łącznie z głównym zdjęciem na górze strony. Piąty to wgrywanie zdjęć prosto z aparatu, w pełnej rozdzielczości, i wybieranie w bloku rozmiaru „Pełny” tam, gdzie wystarczyłby średni. Dla obrazów ozdobnych edytor ma osobną opcję oznaczenia obrazu jako dekoracyjnego, która zostawia tekst alternatywny pusty. Jeżeli strona jest dopiero planowana, wiele z tych spraw można rozstrzygnąć na etapie projektu, o czym piszemy we wpisie o stronie firmowej przygotowanej pod SEO.

Lista kontrolna przed publikacją obrazu

Przed publikacją każdego ważnego obrazu warto odpowiedzieć na kilka pytań dotyczących opisu, pliku i sposobu ładowania. Zajmuje to chwilę, a oszczędza późniejszego poprawiania setek plików naraz.

• Obraz jest osadzony znacznikiem img, a nie jako tło w arkuszu stylów, jeżeli ma znaczenie dla treści.
• Tekst alternatywny opisuje to, co widać, jednym zdaniem, bez listy słów kluczowych. Obraz ozdobny ma alt pusty.
• Obraz będący linkiem ma tekst alternatywny mówiący, dokąd prowadzi.
• Nazwa pliku jest krótka i opisowa, zapisana małymi literami z dywizami, nadana przed wgraniem.
• Format odpowiada rodzajowi obrazu: zdjęcie w JPEG, WebP lub AVIF, logo i ikony w SVG, przezroczystość w PNG lub WebP.
• Wymiary pliku są zbliżone do wyświetlanych, a w kodzie znajdują się wersje dla mniejszych ekranów.
• Znacznik ma atrybuty width i height.
• Obraz główny ładuje się od razu, obrazy położone niżej leniwie.
• Obraz stoi obok tekstu na ten sam temat, a w razie potrzeby ma podpis.
• Podstrona ma własny obraz podglądu og:image, a obraz w danych strukturalnych jest dostępny do pobrania.
• Pochodzenie zdjęcia i prawo do jego użycia są znane.

Taką kontrolę dla całej witryny, razem z pomiarem szybkości i przeglądem indeksowania, obejmuje audyt SEO. Osobno zajmujemy się widocznością zdjęć w wynikach graficznych w ramach usługi pozycjonowanie grafiki. Zaczynamy wtedy od sprawdzenia, które obrazy są już zaindeksowane i na jakie zapytania się wyświetlają, a dopiero potem ustalamy kolejność poprawek.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl