10 consells per a l’optimització SEO d’imatges

El contingut visual s’ha d’optimitzar per als teus clients i per als motors de cerca. Utilitzant aquests consells d’optimització SEO d’imatges, milloraràs la velocitat del web i la seva posició als resultats dels cercadors.

L’optimització d’imatges suposa molts avantatges, com per exemple una millor experiència d’usuari, temps de càrrega de pàgines més ràpids i noves oportunitats de classificació. I cada cop és més important.

Més del 20% de totes les cerques web dels EUA es produeixen a Google Images, segons dades de Jumpshot del 2018.

Dan Morgan, de WebSpection, va aconseguir que una de les seves fotos ocupés el lloc número 1 de Google Images per a la cerca “millor persona a Cardiff” en menys de quatre dies, optimitzant la seva imatge.

Troba tot seguit 10 consells d’optimització SEO d’imatges que hauries de conèixer:

1. Escull el format més adequat

Tot i que hi ha molts formats d’imatge per escollir, PNG, JPEG i GIF són els més habituals per a la web. Cadascun d’ells utilitza un mètode de compressió diferent. Això vol dir que les mides dels fitxers poden variar de forma considerable depenent del format que escullis. I això és molt important:

Les imatges solen ser el principal contribuent a la mida general de la pàgina, cosa que pot fer que les pàgines siguin lentes i pesades.

El temps de càrrega de les pàgines és clau per al SEO. Google ha confirmat que és un factor de classificació tant per a escriptori com per a mòbil. Has d’escollir format de fitxer més adequat per a cada imatge, és a dir, la que ofereix la millor compressió amb la menor reducció de qualitat.

En general, els JPEG són el millor format per a les fotografies, mentre que els PNG són els millors per a il·lustracions de línies, text, etc. Els GIF són els millors per a les imatges en moviment.

Des de fa un temps, els navegadors també soporten imatges SVG, que són ideals per a logotips o imatges vectorials.

2. Comprimeix les imatges

Google té una documentació molt àmplia sobre l’optimització SEO d’imatges per al web. En aquesta documentació, Google explica com trobar la mida òptima dels fitxers d’imatge:

Per a obtenir els millors resultats, prova amb diversos paràmetres de qualitat i no tinguis por de rebaixar-la: els resultats visuals solen ser molt bons i l’estalvi de mida dels fitxers pot ser força gran.

Google recomana tres eines de codi obert per ajudar-te amb la compressió: Guetzli, MozJPEG (de Mozilla) i pngquant. Això sí, són eines de línia d’ordres, o sigui, d’escriure. Si prefereixes un entorn gràfic, ImageOptim és una eina gratuïta per a Mac, i també hi ha eines totalment en línia, com per exemple TinyPNG.

3. Personalitza els noms dels fitxers

Mira què diu Google sobre els noms dels fitxers d’imatge:

[…] el nom del fitxer pot proporcionar pistes a Google sobre el tema de la imatge. Per exemple, el-meu-gat-negre.jpg és millor que IMG00023.JPG.

Aquest punt és de SEO bàsic totalment, la majoria de persones ho fan. Però això no significa fer keyword stuffing (farciment de paraules clau): els noms dels fitxers han de ser descriptius i directes.

Correcte: el-meu-gat-negre.jpg

Incorrecte: gat-el-gat-meu-gat-negre-gat.jpg

No suposa gaire esforç canviar el nom de les imatges perquè siguin més descriptives. Així que val la pena fer-ho, ja que és una forma fàcil d’optimització SEO d’imatges.

4. Utilitza un text descriptiu per al paràmetre Alt

El paràmetre Alt (text alternatiu) descriu la imatge. És el que el navegador mostra als usuaris amb lectors de pantalla. Els navegadors també mostren el text Alt si hi ha algun problema a l’hora de carregar les imatges. I aquest és un dels punts més importants en l’optimització SEO d’imatges.

Tenir un text correcte al paràmetre Alt també és beneficiós per a l’estratègia SEO de pàgina. A més, afegir un text Alt adequat a les imatges del teu web pot posicionar millor les imatges als motors de cerca. Fins i tot Google ha remarcat la importància de tenir el text Alt a les imatges.

I com s’escriu correctament el text Alt? Hi ha un petit truc, consistent en finalitzar la següent frase:

Això és una imatge de _____________

Elimina qualsevol article o preposició de la frase resultant i utilitza la darrera part com a text Alt, deixant un text natural. Per exemple:

“Això és una imatge d’un pastís de xocolata“

“Això és una imatge de la meva gata, la Bagui, jugant“

Ah! I no t’oblidis de les llegends, també són importants. Mira què diu Google:

Google extreu informació sobre el tema de la imatge del contingut de la pàgina, inclosos les llegendes i els títols de les imatges. Sempre que sigui possible, assegureu-vos que les imatges estiguin situades a prop del text rellevant i a les pàgines que siguin rellevants per a la temàtica de la imatge.

Per tant, utilitzeu les llegendes sempre que sigui possible, i també l’atribut title. Com a text, podeu posar-hi el mateix que a l’Alt.

5. Tingues en compte l’estructura de les carpetes

Google, tal com especifica a les Directrius sobre les imatges, utilitza la ruta del fitxer i el nom del fitxer per classificar les imatges:

Google utilitza la ruta i el nom del fitxer per comprendre les teves imatges. Organitza les teves imatges de manera que els URL es creïn lògicament.

Per exemple, si tens un comerç electrònic amb diversos productes, en lloc de col·locar totes les imatges dels productes en una carpeta genèrica /imatges/, Google recomana que estructuris les subcarpetes amb temes relacionats amb les categories com ara: /malles/ o /texans/.

6. Treballa amb imatges mobile-friendly

Imagina’t que puges al teu web una imatge de 840px d’ample. Si algú la visita amb un dispositiu mòbil amb una pantalla molt més petita, diguem de 320px d’amplada, el teu navegador encara haurà de carregar la imatge de 840px. Aquesta imatge quedarà perfectament bé, però també ho faria una imatge de 320px.

La càrrega de la imatge de 840px és una pèrdua d’amplada de banda i només serveix per alentir la velocitat de càrrega de la pàgina. I això no va bé per al SEO.

La solució és utilitzar el paràmetre srcset, que permet al navegador carregar diferents versions d’una imatge per a diferents resolucions de pantalla:

<img src="imatge.jpg" srcset="imatge-mitjana.jpg 1000w, imatge-gran.jpg 2000w">

La primera part de la sintaxi és un etiquetatge estàndard. Però després, incloem enllaços a dues altres versions de la mateixa imatge en diferents mides: mitjanes (1000px d’amplada) i grans (2000px d’ample).

Quina imatge escull el navegador? Doncs ho fa en funció de la mida de la imatge i de si la pantalla és retina (2x) o no (1x).

Com escull la imatge correcta el navegador?

Suposem un dispositiu amb una amplada de pantalla de 320px i que és una pantalla 1x (no retina). Les imatges que tenim són petita.jpg (500px d’amplada), mitjana.jpg (1000px d’amplada) i gran.jpg (2000px d’ample).

El navegador fa:

500/320 = 1.5625

1000/320 = 3.125

2000/320 = 6,25

D’acord, així que com que sóc una pantalla 1x, 1.5625 (> 1) és la més propera a la que necessito. És una mica alt, però és la millor opció en comparació amb les altres, que són massa altes. Per tant, carrego la imatge petita.jpg.

Ara un altre navegador visita el lloc. També és una pantalla de 320px, però és una pantalla de retina (2x). El navegador fa el mateix:

D’acord, així que com que sóc una pantalla 2x, descarto la imatge 1.5625 (< 2) perquè és massa baixa per a mi i la imatge es podria veure malament. Utilitzaré la imatge 3.125, mitjana.jpg.

El navegador, bàsicament, tria la imatge més eficient per enviar a l’usuari, reduint així l’amplada de banda i millorant el temps de càrrega.

I quantes imatges hauré de penjar? Doncs depèn. WordPress, per exemple, ho fa automàticament: quan puges una imatge, et crea diferents mides, i posa el paràmetre srcset al codi. Si la web l’has programat tu mateix, ho hauràs de fer manualment.

7. Utilitza la càrrega diferida (lazy loading)

S’anomena càrrega diferida al fet que el navegador retardi la càrrega d’imatges (o qualsevol altre objecte, vídeo, etc.) fins que s’ha de mostrar en pantalla. Per tant, les imatges es carregaran mentre es va desplaçant la pàgina.

Fins no fa massa, hi ha hagut molts debats sobre si les imatges carregades diferidament són bones o dolentes pel SEO. Sobre el lazy loading, l’any 2018 Google deia el següent:

Planteja’t la càrrega diferida de les imatges ocultes o fora de pantalla un cop s’hagin carregat tots els recursos crítics.

Es tracta d’una recomanació de l’eina de la pròpia Google PageSpeed ​​Insights.

Sobre la implementació la càrrega diferida, Google en parla en aquesta pàgina. Hi ha uns quants mètodes diferents, i tots impliquen l’ús de Javascript.

8. Utilitza un CDN

La majoria dels llocs web serveixen tots els fitxers (incloses les imatges) des d’un sol servidor en una única ubicació.

Si suposem que tens el servidor web a Holanda, les imatges no hauran de viatjar gaire quan algú d’Holanda el visiti. Però si el visitant és al Canadà, la cosa ja canvia. Les imatges han de viatjar molt més lluny per arribar-hi. I això disminueix la velocitat amb què es carrega el teu web.

Les xarxes de lliurament de contingut (CDNs) solucionen aquest problema cachejant els teus fitxers en una xarxa global de servidors. De forma que, quan algú visiti el teu web, les imatges es descarregaran des del servidor més proper.

Hi ha molts CDNs, alguns dels més utilitzats són:

• Cloudflare
• KeyCDN
• Amazon CloudFront
• Google Cloud CDN

Tingues en compte que el teu CDN tindrà un URL del tipus xyz.proveidorcdn.com. I aquest URL no afavoreix al SEO:

• Les teves imatges s’allotjaran en un domini independent. Si algú decideix utilitzar alguna de les teves imatges i enllaçar-te, pot passar que enllaci amb el CDN i per tant estiguis perdent un enllaç.
• Pot provocar problemes si vols canviar de proveïdor de CDN posteriorment. Hauràs de canviar (o redirigir) tots els URL de les teves imatges.

Aquests dos problemes es poden evitar configurant un registre CNAME. Imagina-ho com un àlies que pots utilitzar en lloc de l’URL que el proveïdor de CDN t’ha assignat. De forma que, en lloc de xyz.proveidorcdn.com, el teu CDN pot tenir l’URL cdn.elteudomini.com.

9. Afegeix les imatges al sitemap

Què diu Google sobre les imatges i els sitemaps?

Les imatges són una font d’informació important per conèixer de què tracta el teu web. Pots proporcionar a Google detalls addicionals sobre les teves imatges, i proporcionar l’URL de les imatges que d’altra manera no podríem descobrir, afegint les imatges al teu sitemap.

Google explico com fer-ho en aquest article.

10. No utilitzis bancs d’imatges

Aquest consell també és de nivell 0. No és que hi hagi un moviment contra aquestes pàgines, sinó que, bàsicament, hi ha molts llocs web amb les mateixes imatges genèriques.

Si vols que el teu web destaqui a primer cop d’ull, no posis la imatge d’un empresari somrient que pots trobar a un munt de pàgines del mateix sector que el teu.

Encara que puguis tenir les imatges perfectament optimitzades, no tindrà el mateix impacte ni possibles beneficis SEO una imatge generalista que una imatge original i de gran qualitat.

Com més fotos originals tinguis, més bona serà l’experiència per a l’usuari i millor serà el posicionament cerques rellevants.

I segurament, aquest és el punt més complicat de seguir 🙂

Imatge creada per Freepik i descarregada des de Freepik