Atrybut alt i title: jak prawidłowo je wykorzystać? Dobre praktyki SEO

Atrybut alt mówi wyszukiwarce, czytnikowi ekranu i przeglądarce (gdy obraz się nie wczyta), co przedstawia grafika. Atrybut title pokazuje tylko dymek po najechaniu kursorem, więc dla SEO waży znacznie mniej. Poniżej znajdziesz, jak pisać oba atrybuty i co jeszcze decyduje o tym, czy Twoje grafiki pracują na widoczność.

Czym różni się atrybut alt od atrybutu title?

Alt zastępuje grafikę tekstem, a title dodaje do niej podpowiedź. Oba atrybuty wpisujesz w znaczniku <img>, np. <img src="mercedes-amg-a45-przod.jpg" alt="Mercedes-AMG A 45 w kolorze szarym, widok z przodu" title="Mercedes-AMG A 45">. Pracują jednak dla różnych odbiorców.

Cecha	alt	title
Do czego służy	opisuje treść albo funkcję grafiki	dodaje informację pomocniczą
Kto z niego korzysta	Google, czytniki ekranu, przeglądarka, gdy obraz się nie wczyta	osoba z myszką, która najedzie kursorem na grafikę
Gdzie go widać	w miejscu niewczytanej grafiki, w czytniku ekranu	w dymku po najechaniu kursorem
Na telefonie	działa tak samo	zwykle niewidoczny, bo nie ma najechania kursorem
Znaczenie dla SEO	duże: Google nazywa go najważniejszym atrybutem grafiki	dokumentacja Google o grafikach go nie wymienia
Czy wypełniać	zawsze; przy grafice dekoracyjnej pusty (alt="")	tylko gdy coś dodaje

Oba atrybuty sprawdzisz w przeglądarce: kliknij grafikę prawym przyciskiem myszy i wybierz „Zbadaj”. Jak czytać to, co się wtedy otworzy, opisujemy we wpisie o kodzie źródłowym witryny.

Jak Google rozumie, co jest na grafice?

Google łączy trzy źródła: tekst alternatywny, własną analizę obrazu i treść strony wokół grafiki. W dokumentacji Search Central pisze wprost, że używa tekstu alternatywnego razem z algorytmami widzenia komputerowego i zawartością strony.

Sama analiza obrazu może rozpoznać samochód, ale nie musi wiedzieć, że to konkretny model z Twojej oferty. Tę wiedzę dokładają alt, podpis pod zdjęciem, nagłówek i tekst obok. Dlatego Google radzi umieszczać grafiki na stronach o tym samym temacie, blisko tekstu, którego dotyczą.

Alt ma jeszcze jedną rolę. Gdy grafika jest linkiem, Google traktuje jej tekst alternatywny jak tekst tego linku (anchor text). Ikona bez opisu w roli linku nie mówi więc wyszukiwarce, dokąd prowadzi.

Jak napisać dobry tekst alternatywny?

Opisz krótko to, co widać na grafice i co jest ważne w kontekście strony. Najlepiej widać to na przykładzie zdjęcia samochodu.

Od złego do dobrego opisu.

• Źle: brak atrybutu alt. Google nie dostaje opisu, a czytnik ekranu może przeczytać nazwę pliku.
• Źle: alt="mercedes samochód auto mercedes amg tanie auta sportowe". To upychanie słów kluczowych, które Google uznaje za spam.
• Lepiej: alt="samochód". Opis jest prawdziwy, ale nic nie mówi o modelu.
• Najlepiej: alt="Mercedes-AMG A 45 w kolorze szarym, widok z przodu".

Zasady, które działają na każdej stronie.

• Opisuj cel grafiki, nie tylko jej wygląd. Zdjęcie produktu opisuje produkt, a wykres opisuje wniosek z wykresu.
• Pisz zwięźle. W3C zaleca możliwie najkrótszy opis celu grafiki z najważniejszą informacją na początku.
• Nie zaczynaj od słów „zdjęcie” ani „obrazek”. Czytnik ekranu sam informuje, że to grafika.
• Frazę kluczową wpisz tylko wtedy, gdy naturalnie opisuje to, co widać.
• Grafika dekoracyjna (tło, ozdobnik, separator) dostaje pusty alt: alt="". Wtedy czytniki ekranu ją pomijają. Brak atrybutu to nie to samo co pusty atrybut.
• Grafika, która jest linkiem albo przyciskiem, opisuje akcję lub cel: „Drukuj stronę”, a nie „ikona drukarki”. Tak radzi W3C w poradniku o grafikach funkcyjnych.
• Każde zdjęcie w galerii ma własny opis. Pięć zdjęć z identycznym alt nie mówi, czym się od siebie różnią.

Czy atrybut title ma znaczenie dla SEO?

Niewielkie. Atrybut title to podpowiedź, którą przeglądarka pokazuje w dymku po najechaniu kursorem na grafikę. W dokumentacji Google o grafikach ten atrybut się nie pojawia, a jako najważniejszy element opisu wskazany jest alt.

Title ma też ograniczony zasięg wśród ludzi. Na ekranie dotykowym nie ma najechania kursorem, więc osoba z telefonem zwykle go nie zobaczy. Nic, co jest ważne, nie powinno więc stać wyłącznie w title.

Kiedy title ma sens? Gdy dodaje informację, której nie ma w alt ani obok grafiki, np. przy klikalnej miniaturze: „Kliknij, aby powiększyć”. Nie kopiuj do niego tekstu z alt, bo niczego nie dodajesz. Przy grafikach dekoracyjnych pomiń title: według techniki W3C H67 pusty alt bez atrybutu title mówi czytnikom ekranu, że grafikę można pominąć.

Nie myl atrybutu title grafiki z tytułem strony, czyli znacznikiem title w sekcji head.

Z tego drugiego Google korzysta przy tworzeniu tytułu wyniku wyszukiwania, więc ma on dla SEO dużo większą wagę.

Co poza tekstem alternatywnym decyduje o widoczności grafik?

Kilka ustawień technicznych decyduje o tym, czy Google w ogóle znajdzie grafikę i czy nie spowolni ona strony.

• Znacznik <img> z atrybutem src. Google znajduje grafiki w atrybucie src, także wewnątrz elementu <picture>. Przy srcset i <picture> zawsze zostaw zapasowy adres w src, bo nie każdy robot obsługuje te rozwiązania.
• Nazwa pliku. Krótka i opisowa: mercedes-amg-a45-przod.jpg zamiast IMG00023.JPG. Gdy tłumaczysz stronę, tłumacz też nazwy plików.
• Format i waga. Google obsługuje grafiki w formatach BMP, GIF, JPEG, PNG, WebP, SVG i AVIF. Zdjęcia kompresuj przed wgraniem i nie wgrywaj plików większych, niż wymaga miejsce na stronie. Szczegóły opisujemy we wpisie o optymalizacji grafik i zdjęć pod SEO.
• Wymiary w kodzie. Atrybuty width i height pozwalają przeglądarce zarezerwować miejsce na grafikę, zanim się wczyta. Bez nich treść przeskakuje w dół, co pogarsza wskaźnik CLS. Google uznaje za dobry CLS poniżej 0,1. Więcej o tych wskaźnikach piszemy we wpisie o Core Web Vitals.
• Leniwe ładowanie. Grafiki niżej na stronie mogą wczytywać się dopiero przy przewijaniu. Google ostrzega jednak, żeby nie stosować go do treści widocznej od razu po otwarciu strony. Przypomina też, że wyszukiwarka nie klika w stronę, więc grafika musi się wczytać bez działania użytkownika.
• Mapa witryny dla grafik. Pomaga Google znaleźć obrazy, których mógłby nie wykryć, także te na zewnętrznym serwerze CDN.

Jak sprawdzić grafiki na swojej stronie?

Najpewniejsze dane daje Google Search Console, a nie sama wyszukiwarka.

1. W raporcie skuteczności wybierz typ wyszukiwania „Grafika”. Zobaczysz, ile kliknięć daje Ci ruch z karty Grafika w Google.
2. Sprawdź też typ „Web: multimodal”. To wyszukiwania obrazem, m.in. z Google Lens, funkcji Circle to Search na Androidzie i wyszukiwania obrazem w Chrome.
3. Dla ważnej podstrony użyj narzędzia do sprawdzania adresów URL i obejrzyj wyrenderowany HTML. Grafiki powinny mieć adres w atrybucie src znacznika <img>.
4. W kodzie strony (Ctrl+U) albo w narzędziu „Zbadaj” sprawdź, czy grafiki z treścią mają opis, a ozdobniki pusty alt.
5. Do szybkiego podglądu wpisz w Google Grafika site:twojadomena.pl. Google zaznacza jednak, że operator site: nie pokazuje wszystkich zaindeksowanych adresów, więc nie licz nim grafik.
6. Przy większej stronie użyj crawlera, który wypisze naraz wszystkie grafiki bez atrybutu alt.

Gdzie jeszcze pracują dobrze opisane grafiki?

Poza klasycznymi wynikami grafiki pracują w wyszukiwaniu obrazem i w odpowiedziach AI. W modelu Search Ecosystem™ to ten sam temat widziany z kilku stron: Google Search, Google Grafika, Google Lens oraz AI Search.

Google nie wymaga dodatkowych zabiegów, żeby strona pojawiła się w AI Overviews albo AI Mode. W poradach dla tych funkcji wymienia jednak wspieranie tekstu grafikami i filmami dobrej jakości tam, gdzie mają sens. Opisane grafiki same tego nie załatwią, ale ułatwiają powiązanie obrazu z treścią strony.

Tekst alternatywny to też podstawa dostępności. Osoba, która korzysta z czytnika ekranu, dowiaduje się z niego, co pokazuje zdjęcie produktu albo wykres. Tę stronę widoczności opisujemy w obszarze User Experience.

Co zrobić teraz?

Alt to obowiązek przy każdej grafice z treścią, a title to dodatek, z którego możesz zrezygnować. Zacznij od grafik, które sprzedają: zdjęć produktów, usług i wykresów w poradnikach.

1. Wypisz grafiki bez alt na najważniejszych podstronach.
2. Dopisz opisy treści i funkcji grafik, a ozdobnikom daj pusty alt.
3. Usuń z alt listy fraz, a z title kopie opisu z alt.
4. Sprawdź wagę plików oraz atrybuty width i height.
5. Po kilku tygodniach porównaj w Search Console ruch z karty Grafika i z wyszukiwania obrazem.

Co dalej: gdy grafiki są uporządkowane, sprawdź resztę strony pod kątem tego, co robot widzi po wyrenderowaniu: treść, linki wewnętrzne i dane strukturalne.

Najczęstsze pytania.

Ile znaków może mieć atrybut alt?

Google nie podaje limitu znaków. Gdy grafika wymaga dłuższego wyjaśnienia, np. złożony wykres, w alt daj krótki opis, a pełne wyjaśnienie umieść w tekście obok albo w podpisie pod grafiką.

Jaki alt dać logo w nagłówku strony?

Logo, które prowadzi na stronę główną, jest grafiką funkcyjną, więc alt mówi, dokąd prowadzi, np. „Nazwa firmy, strona główna”. Tak opisuje to W3C w poradniku o grafikach funkcyjnych.

Czy grafiki ustawione jako tło w CSS trafiają do Google Grafika?

Nie. Google nie indeksuje grafik z CSS, np. ustawionych jako background-image. Zdjęcie, które ma być widoczne w wyszukiwarce, wstaw znacznikiem img.

Czy grafika SVG potrzebuje atrybutu alt?

SVG wstawione znacznikiem img dostaje alt jak każda grafika. Dla SVG wklejonego bezpośrednio w kod Google wskazuje element title wewnątrz SVG.