Pozycjonowanie obrazów - SEO dla Google Images
Google Images to drugie największe źródło ruchu z wyszukiwania. Dla wielu branż (moda, wnętrza, jedzenie) obrazy generują więcej kliknięć niż wyniki tekstowe. Optymalizacja obrazów to często pomijany element SEO z dużym potencjałem.
Krótka odpowiedź
Podstawy optymalizacji obrazów
Nazwa pliku:
- Opisowa, ze słowami kluczowymi
- Zamiast: IMG_1234.jpg, DSC_0056.png
- Lepiej: buty-sportowe-nike-air-max.jpg
- Używaj myślników, nie podkreśleń
Atrybut ALT:
- Opisuje co jest na obrazku
- Dla niepełnosprawnych (screen readers)
- Zawiera słowo kluczowe naturalnie
- Max 125 znaków
- Przykład: alt="Białe buty sportowe Nike Air Max 90"
Atrybut title:
- Pokazuje się przy najechaniu
- Mniejsze znaczenie SEO niż ALT
- Dodatkowy kontekst dla użytkownika
Nie rób tego:
- alt="buty buty nike buty sportowe buty białe" (keyword stuffing)
- alt="" (puste - tylko dla obrazów dekoracyjnych)
- alt="obrazek" lub alt="zdjęcie" (bezwartościowe)
Format i kompresja obrazów
Formaty i zastosowania:
- WebP - najlepszy: mały rozmiar, dobra jakość, przejrzystość. Używaj jako domyślny.
- JPEG - zdjęcia bez przejrzystości, fallback dla starych przeglądarek
- PNG - grafiki z przejrzystością, loga, screenshoty
- SVG - wektorowe ikony, loga (skalowalne bez utraty)
- AVIF - nowszy format, jeszcze lepsza kompresja niż WebP
Kompresja:
- Cel: poniżej 100-200KB dla większości obrazów
- Hero images: do 300KB
- Narzędzia: TinyPNG, Squoosh, ShortPixel
- Jakość 80-85% zwykle optymalna
Responsive images:
```html
src="obraz-1280w.jpg"
alt="Opis obrazu">
```
Kontekst i dane strukturalne
Kontekst na stronie:
- Obraz w treści powiązanej tematycznie
- Bliskość tekstu z słowami kluczowymi
- Nagłówek nad/pod obrazem
- Caption (podpis) z opisem
ImageObject schema:
```json
{
"@type": "ImageObject",
"contentUrl": "https://example.com/obraz.jpg",
"name": "Buty Nike Air Max 90",
"description": "Białe buty sportowe Nike Air Max 90 w rozmiarze 42",
"author": {
"@type": "Person",
"name": "Jan Kowalski"
}
}
```
Product schema z obrazem:
- image property w Product schema
- Pokazuje produkt w wynikach
- Zwiększa CTR
Image sitemap:
- Dedykowany sitemap dla obrazów
- Lub rozszerzenie głównego sitemap
- Pomaga Google znaleźć wszystkie obrazy
Techniczne aspekty obrazów
Lazy loading:
```html
```
- Ładuj obrazy dopiero gdy są potrzebne
- Poprawia LCP dla above-the-fold content
- Nie używaj dla hero image!
Wymiary:
- Zawsze określaj width i height
- Zapobiega CLS (layout shift)
```html
```
CDN dla obrazów:
- Cloudflare, Bunny CDN, imgix
- Automatyczna optymalizacja
- Serwowanie z najbliższego serwera
Preload dla hero image:
```html
```
Nie blokuj obrazów:
- Sprawdź robots.txt
- Nie blokuj folderu /images/