Pozycjonowanie obrazów - SEO dla Google Images

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)

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:

<img srcset="obraz-320w.jpg 320w,
             obraz-640w.jpg 640w,
             obraz-1280w.jpg 1280w"
     sizes="(max-width: 320px) 280px, (max-width: 640px) 600px, 1200px"
     src="obraz-1280w.jpg"
     alt="Opis obrazu">

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:

{
  "@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

Lazy loading:

<img src="obraz.jpg" loading="lazy" alt="Opis">

Wymiary:
- Zawsze określaj width i height
- Zapobiega CLS (layout shift)

<img src="obraz.jpg" width="800" height="600" alt="Opis">

CDN dla obrazów:
- Cloudflare, Bunny CDN, imgix
- Automatyczna optymalizacja
- Serwowanie z najbliższego serwera

Preload dla hero image:

<link rel="preload" as="image" href="hero.webp">

Nie blokuj obrazów:
- Sprawdź robots.txt
- Nie blokuj folderu /images/