Sprawdzanie SEO obrazów

Sprawdzanie SEO obrazów: jak liczona jest ocena

Narzędzie pobiera HTML strony (bez wykonywania JavaScriptu) i analizuje wszystkie znaczniki <img> — do 100 na stronę. Jeśli w src jest zaślepka leniwego ładowania (data URI, plik typu „placeholder” lub „blank”), prawdziwy adres jest brany z data-src, data-lazy-src, data-original lub podobnych atrybutów, a data-srcset liczy się jako srcset.

Ocena zaczyna się od 100 punktów, a kary zależą od odsetka obrazów spełniających warunek:

Strona bez żadnego <img> dostaje 50 punktów. W tabeli „Wszystkie obrazy” każdy plik ma własną listę problemów, a filtr „Z problemami” zostawia tylko to, co trzeba poprawić.

Przykład obliczenia

Załóżmy, że strona ma 20 obrazów: alt ma 12 (60% — kara −15), loading="lazy" ma 5 z 17 obrazów po pierwszych trzech (29% — −15), wymiary mają wszystkie, wszystkie są w JPG (−10), żaden nie ma srcset (−10). Wynik: 50. Uzupełnienie alt w ośmiu obrazach podniesie ocenę do 65, a lazy dla wszystkich niższych obrazów — o kolejne 15, do 80. Zacznij więc od alt i leniwego ładowania: mają największą wagę i nie wymagają ponownego zapisywania plików.

Audyt obrazów całej witryny

Problemy z obrazami prawie zawsze wynikają z szablonów. Sprawdź po jednej stronie każdego typu — główną, kategorię, kartę produktu, wpis na blogu — i popraw szablon: jedna zmiana usunie uwagi na tysiącach podstron. Osobno sprawdź strony, na które redaktorzy wgrywają obrazy ręcznie — tam najczęściej brakuje alt.

Co test widzi, a czego nie

• Format jest rozpoznawany po rozszerzeniu w adresie. Obraz z CDN bez rozszerzenia (/img/123?w=800) nie dostanie uwagi „Nie format WebP/AVIF”, ale nie wliczy się też do odsetka nowoczesnych formatów.
• Element <picture> nie jest brany pod uwagę. Jeśli <source> podaje AVIF lub WebP, a zapasowy <img> wskazuje JPG, oznaczony zostanie JPG. To normalne.
• Waga plików nie jest mierzona — obrazy nie są pobierane. Ciężkie pliki znajdziesz w teście szybkości strony.
• Analizowanych jest pierwsze 100 znaczników <img>. Na bardzo długich listingach z nieskończonym przewijaniem pozostałe obrazy nie trafią do raportu — testuj szablon na krótszej podstronie.
• Obrazy tła z CSS i obrazy dodawane przez JavaScript nie występują w źródłowym HTML.
• Wymiary ustawione tylko w CSS (np. aspect-ratio) się nie liczą — potrzebne są atrybuty w znacznikach.
• Leniwe ładowanie przez data-src nie jest oznaczane jako błąd przy obrazie, ale do odsetka lazy w ocenie wlicza się tylko natywne loading="lazy".

Jak poprawić najczęstsze uwagi

„Brak atrybutu alt” i „Pusty alt=""”

Tekst alternatywny opisuje, co widać na obrazie, a nie frazę, na którą chcesz się pozycjonować: „Szara trzyosobowa kanapa na dębowych nóżkach”, a nie „tanie kanapy sklep internetowy”. Pusty alt="" jest właściwy dla elementów dekoracyjnych — separatorów, wzorów tła, ikon obok tekstu, który wszystko wyjaśnia. Narzędzie pokaże je jako ostrzeżenie, żebyś potwierdził, że to celowe. W WordPressie alt wpisuje się w Bibliotece mediów („Tekst alternatywny”); motywy korzystające z wp_get_attachment_image() pobiorą go same.

Jeśli obraz jest linkiem, jego alt działa jak anchor tego linku, dlatego banery i przyciski graficzne potrzebują sensownego opisu. Przy logo w nagłówku wystarczy nazwa firmy.

„Brak loading="lazy"”

Leniwe ładowanie stosuj dla obrazów poniżej pierwszego ekranu. Główny obraz na górze strony, zwykle element LCP, nie powinien być leniwy — nadaj mu priorytet:

<img src="/img/hero-1200.webp" width="1200" height="600"
     alt="Warsztat naprawy rowerów" fetchpriority="high">

Dlatego narzędzie nie wymaga lazy przy pierwszych trzech obrazach. Aktualny WordPress sam dodaje loading="lazy" i pomija pierwszy obraz treści.

„Brak width/height”

Atrybuty przekazują proporcje, zanim plik się pobierze, więc przeglądarka rezerwuje miejsce i układ nie skacze (CLS). Podaj rzeczywiste wymiary pliku, a responsywność zapewnij w CSS:

img { max-width: 100%; height: auto; }

„Brak srcset” i „Nie format WebP/AVIF”

Obie uwagi usuwa <picture> z kilkoma szerokościami:

<picture>
  <source type="image/avif"
          srcset="/img/kanapa-640.avif 640w, /img/kanapa-1280.avif 1280w"
          sizes="(max-width: 700px) 100vw, 700px">
  <img src="/img/kanapa-1280.webp"
       srcset="/img/kanapa-640.webp 640w, /img/kanapa-1280.webp 1280w"
       sizes="(max-width: 700px) 100vw, 700px"
       width="1280" height="853" loading="lazy"
       alt="Szara trzyosobowa kanapa na dębowych nóżkach">
</picture>

WebP obsługują wszystkie aktualne przeglądarki, więc zapasowy JPG nie jest potrzebny. Pliki przekonwertujesz w konwerterze obrazów, a zmniejszysz w kompresji obrazów — oba działają w przeglądarce. W kreatorach stron (Wix, Shoper, Shopify) formaty i srcset zwykle generuje platforma, więc pozostaje dopilnować alt.

WordPress

WordPress sam dodaje srcset i sizes do obrazów wstawionych przez edytor i tworzy ich mniejsze kopie. WebP można wgrywać od wersji 5.8, AVIF — od 6.5. Jeśli narzędzie mimo to pokazuje „Brak srcset”, motyw lub page builder najpewniej wypisuje znaczniki <img> ręcznie, z pominięciem funkcji WordPressa — poprawka należy do szablonu motywu.

Co jeszcze zrobić pod wyszukiwarkę grafiki

Tych punktów narzędzie nie sprawdza, ale wpływają one na to, jak Google znajduje i pokazuje obrazy:

• Nazwa pliku. szara-kanapa-dab.webp mówi więcej niż IMG_4821.webp; słowa oddzielaj myślnikiem.
• Tekst wokół obrazu. Podpis i sąsiedni akapit pomagają zrozumieć obraz tak samo jak alt.
• Mapa obrazów. W sitemap można wymienić obrazy strony znacznikiem <image:image><image:loc>. Google obsługuje już tylko image:loc; znaczniki caption, title i license są ignorowane.
• Dostęp dla robota. Katalog z obrazami nie może być zablokowany w robots.txt.

Na koniec pamięć podręczna. Obrazy zmieniają się rzadko, więc przeglądarka może je trzymać przez rok; przy podmianie pliku zmień jego nazwę (kanapa-v2.webp), inaczej odwiedzający zobaczą starą wersję. Przykład dla nginx:

location ~* \.(avif|webp|jpe?g|png|gif|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Wymagania Google opisuje przewodnik po obrazach, a związek obrazów z szybkością — nasz artykuł o Core Web Vitals.