SEO pentru imagini: text alt, dimensiunea fișierelor, formate și lazy loading

Imaginile fac paginile mai ușor de înțeles și mai atractive. Pot aduce și vizitatori din Google Imagini și din funcțiile de căutare vizuală. Dar sunt de obicei cea mai grea parte a unei pagini, iar imaginile neoptimizate sunt unul dintre cele mai frecvente motive pentru care site-urile sunt lente.

SEO pentru imagini înseamnă să faci bine ambele părți: imaginile să fie înțelese de motoarele de căutare și accesibile tuturor, rămânând totodată rapide.

Scrie text alt util

Atributul alt descrie o imagine în cuvinte:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

Textul alt are trei roluri:

1. Accesibilitate – cititoarele de ecran îl citesc persoanelor care nu pot vedea imaginea
2. Rezervă – browserele îl afișează dacă imaginea nu se încarcă
3. Înțelegere – motoarele de căutare îl folosesc, împreună cu textul din jur, ca să afle ce arată imaginea

Cum scrii un text alt bun

• Descrie ce arată imaginea și de ce este pe pagină
• Fii concret: „bicicletă pliabilă Brompton roșie, pliată lângă un birou” e mai bine decât „bicicletă”
• Păstrează-l concis – de obicei sub 125 de caractere
• Nu începe cu „imagine cu” sau „fotografie cu”; cititoarele de ecran anunță deja că este o imagine
• Folosește cuvinte cheie relevante doar acolo unde descriu natural imaginea

Imaginile decorative

Imaginile pur decorative – separatoare, ornamente de fundal – ar trebui să aibă un atribut alt gol: alt="". Asta le spune cititoarelor de ecran să le sară. Omiterea completă a atributului este o greșeală; unele cititoare de ecran vor citi atunci numele fișierului.

Folosește nume de fișiere descriptive

IMG_4821.jpg nu spune nimic nimănui. brompton-folding-bike-folded.jpg le dă motoarelor de căutare încă un indiciu. Folosește cuvinte cu litere mici, separate prin cratime (fără diacritice).

Alege formatul potrivit

Pentru majoritatea site-urilor, livrarea WebP sau AVIF cu elementul <picture> (și JPEG ca rezervă, dacă e nevoie) este cea mai mare îmbunătățire individuală:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

Majoritatea CMS-urilor, pluginurilor de imagini și CDN-urilor pot converti automat imaginile în formate moderne.

Redimensionează și comprimă

O greșeală frecventă este să încarci o fotografie lată de 4.000 de pixeli direct din aparat și să o afișezi la 800 de pixeli lățime. Browserul descarcă totuși întregul fișier.

• Redimensionează imaginile la cea mai mare dimensiune la care sunt afișate efectiv (dublează-o pentru ecranele cu densitate mare, dacă e nevoie)
• Comprimă-le – setările de calitate în jur de 75–85% nu se deosebesc de obicei de original
• Urmărește ca majoritatea imaginilor de conținut să fie sub 150–200 KB, iar imaginile hero ideal sub 300 KB

Livrează imagini responsive

Telefoanele nu au nevoie de imagini la dimensiune de desktop. Atributele srcset și sizes îi permit browserului să aleagă fișierul potrivit:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress și majoritatea framework-urilor moderne le generează automat.

Setează width și height ca să previi deplasarea aspectului

Dacă o imagine nu are atributele width și height, browserul nu știe cât spațiu să rezerve, așa că conținutul sare când se încarcă imaginea. Asta afectează Cumulative Layout Shift (CLS), unul dintre Core Web Vitals. Include întotdeauna dimensiunile imaginii (sau folosește proprietatea CSS aspect-ratio); CSS-ul responsiv o poate scala în continuare.

Încarcă leneș imaginile de sub linia de plutire

loading="lazy" îi spune browserului să încarce o imagine doar când urmează să intre în câmpul vizual:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Folosește-l pentru imaginile mai de jos din pagină, dar nu pentru imaginea hero principală. Încărcarea leneșă a celei mai mari imagini din primul ecran întârzie Largest Contentful Paint. Pentru acea imagine, ia în considerare fetchpriority="high".

Ajută imaginile să fie găsite

• Plasează imaginile lângă text relevant și adaugă legende unde e util – Google folosește conținutul din jur ca să înțeleagă imaginile
• Folosește elemente standard <img> în loc de fundaluri CSS pentru imaginile cu semnificație, ca motoarele de căutare să le poată găsi
• Adaugă imaginile în sitemapul XML sau într-un sitemap de imagini pentru bibliotecile mari de imagini
• Include o imagine în datele structurate, acolo unde e relevant (Product, Article, Recipe)
• Setează un og:image, ca distribuirile pe rețelele sociale să afișeze o previzualizare puternică

Lista de verificare SEO pentru imagini

• Text alt descriptiv pe fiecare imagine cu semnificație; alt gol pe cele decorative
• Nume de fișiere descriptive, cu cratime
• Format WebP sau AVIF
• Redimensionate la dimensiunea de afișare și comprimate
• srcset pentru livrare responsivă
• Atributele width și height setate
• Lazy loading pentru imaginile de sub linia de plutire, nu pentru hero
• Durată lungă de cache setată pe server sau CDN

SEO pentru imagini în e-commerce

Imaginile de produs fac o mare parte din vânzare. Pentru magazine:

• Arată mai multe unghiuri și produsul în folosință. Google Imagini și rezultatele de cumpărături favorizează fotografiile de produs clare, de calitate.
• Folosește o imagine principală consecventă și curată pentru fiecare produs – este des folosită în rezultatele de cumpărături.
• Scrie text alt care identifică produsul și varianta: „Pantof de alergare pentru femei Trail Runner X, turcoaz, vedere laterală.”
• Include imaginile în datele structurate Product, folosind URL-uri absolute.
• Imaginile cu zoom ar trebui să încarce versiunea mare doar când e nevoie, nu la încărcarea paginii.

SEO pentru imagini pe bloguri și site-uri de publicații

• Folosește imagini originale ori de câte ori e posibil. Fotografiile, diagramele și graficele originale pot câștiga linkuri și ies în evidență în căutarea de imagini; fotografiile de stoc sunt folosite pe mii de site-uri.
• Adaugă legende când imaginea transmite informații. Legendele sunt printre cele mai citite texte de pe o pagină.
• Creează diagrame și infografice ușor de distribuit pentru subiectele complexe, cu informațiile cheie scrise și în text.
• Alege o imagine reprezentativă puternică, lată de cel puțin 1200 de pixeli. Google Discover favorizează imaginile mari, de calitate, iar previzualizările mari le poți permite cu setarea robots max-image-preview:large.

Imaginile de fundal și CSS

Imaginile setate cu CSS background-image sunt invizibile pentru motoarele de căutare ca și conținut și nu au text alt. Folosește-le doar pentru decor. Dacă o imagine are semnificație – un produs, un grafic, o fotografie a echipei – folosește un element <img>.

CDN-uri de imagini și optimizare automată

Gestionarea manuală a mai multor dimensiuni și formate devine rapid nepractică. CDN-urile și serviciile de imagini (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer și altele) și multe pluginuri WordPress pot:

• Converti automat imaginile în WebP sau AVIF
• Redimensiona din mers pentru fiecare dispozitiv
• Comprima inteligent
• Stoca imaginile în cache aproape de vizitatori

Dacă folosești un astfel de serviciu, verifică dacă URL-urile imaginilor rămân stabile și accesibile pentru crawlere și dacă CDN-ul nu blochează Googlebot.

Măsurarea impactului

Deschide raportul Performanță din Google Search Console și schimbă tipul de căutare în Imagine ca să vezi câte clicuri și afișări primesc imaginile tale și pentru ce interogări. Urmărește Core Web Vitals în același instrument ca să confirmi că optimizarea imaginilor îmbunătățește Largest Contentful Paint și Cumulative Layout Shift.

Greșeli frecvente

1. Încărcarea fotografiilor la dimensiunea din aparat și lăsarea browserului să le micșoreze
2. Atribute alt lipsă sau text alt supraîncărcat cu cuvinte cheie
3. Încărcarea leneșă a imaginii hero
4. Lipsa width și height, care provoacă deplasarea aspectului
5. Text inclus în imagini în loc să fie scris în HTML – este invizibil pentru motoarele de căutare și cititoarele de ecran și nu poate fi tradus
6. Blocarea folderelor de imagini în robots.txt

Concluzii principale

• Scrie text alt care descrie ce arată imaginea și de ce este acolo; folosește alt gol pentru imaginile decorative.
• Livrează WebP sau AVIF, redimensionate la dimensiunea de afișare și comprimate.
• Setează întotdeauna width și height ca să previi deplasarea aspectului.
• Încarcă leneș imaginile de sub linia de plutire, dar niciodată imaginea hero principală.
• Folosește elemente img reale pentru imaginile cu semnificație, lângă text relevant, cu nume de fișiere descriptive.
• Verifică datele de căutare de imagini din Search Console ca să măsori traficul adus de imagini.

Întrebări frecvente

Textul alt ajută la clasare?

Ajută imaginile să se claseze în Google Imagini și adaugă context paginii. Scopul lui principal este accesibilitatea, iar textul alt scris pentru oameni funcționează de obicei cel mai bine și pentru motoarele de căutare.

Ar trebui să folosesc WebP sau AVIF?

Amândouă sunt bine acceptate. AVIF produce adesea fișiere mai mici; WebP se codifică mai repede și este acceptat mai larg de instrumentele mai vechi. Multe site-uri livrează AVIF cu WebP ca rezervă.

Contează numele fișierelor de imagine?

Puțin. Numele de fișiere descriptive sunt un mic semnal suplimentar și îți fac biblioteca media mai ușor de gestionat.

Lazy loading este bun pentru SEO?

Da, dacă este folosit corect. Google acceptă loading="lazy" nativ. Doar nu încărca leneș imaginile vizibile la prima încărcare a paginii.