SEO d'imatges: 9 elements clau

1. Consideracions generals per al SEO d'imatges

Sovint posem tots els nostres esforços a posicionar les nostres URLs valuoses per al SEO a les SERPs. No obstant això, com hem esmentat abans, optimitzar les imatges és important per posicionar-se més amunt als resultats de cerca de Google Imatges i augmentar les nostres possibilitats d'atraure trànsit orgànic a través d'elles.

Els bots de Google no poden "llegir" imatges. Estan pensats per llegir codi en un lloc web, no en una animació o imatge particular. Per aquest motiu, hem de proporcionar-los aquesta informació seguint un conjunt simple de directrius SEO. Això determinarà si els bots poden interpretar la informació que estem intentant mostrar, avaluar les imatges i posicionar-les més amunt a la secció de Google Imatges.

2. Mida i pes de la imatge

Dos dels principals factors a considerar a l'hora d'optimitzar les imatges són el seu pes i mida.

Pes:

Utilitzar imatges pesades al teu lloc web pot augmentar el temps de càrrega de la URL on s'implementen i, per tant, de tot el lloc. El temps de càrrega és un dels factors que afecten el posicionament orgànic en escriptori i mòbil, fent que l'optimització d'imatges sigui essencial.

Eines per reduir el pes de les imatges:

Hi ha moltes eines que podem utilitzar per reduir el pes de les imatges. Encara que no tinguem programari professional d'edició d'imatges com Photoshop o Illustrator, podem utilitzar plataformes online com:

• ›

  ImageOptim o TinyJPG, que redueix el pes de la imatge sense afectar la qualitat.

• ›

  Website Speed Test Image Analysis Tool permet descarregar nous formats d'imatge fàcilment.

Mida:

A més, també és important implementar diverses mides d'imatge per a cada lloc per mostrar la més adequada segons el dispositiu en què es visualitzi. Encara que hi ha plugins que adapten la mida d'imatge, aquesta opció pot no ser la millor a la pràctica. La raó és que, per exemple, una imatge de 1000px es pot reescalar a 400px, reduint la seva mida visual, però la imatge encara serà tan pesada com una imatge de 1000px, afectant el rendiment i la velocitat del teu web.

Eines:

El factor més important a l'hora de triar imatges és conèixer la plataforma en què treballarem. Si treballem a WordPress, per exemple, podem utilitzar SmushIt, un plugin que permet definir una amplada i alçada màximes per a les nostres imatges abans de reescalar-les, comprimir-les i pujar-les al servidor.

Si, al contrari, treballem amb una plataforma de codi propi, hem de crear un procés manual o automàtic que permeti optimitzar les imatges abans de pujar-les al servidor.

3. Format d'imatge SEO-friendly

Actualment, la manera més òptima de desar imatges web és utilitzant un dels quatre formats següents:

• ›

  WebP: Pot reduir el pes original d'una imatge entre un 25-35%. És un dels formats més recomanats actualment; encara que algunes versions de navegadors encara no els poden llegir, és un dels formats que permet més compressió sense afectar la qualitat de la imatge.

• ›

  PNG: És la millor opció per a imatges amb pocs colors i fons transparents. S'utilitza àmpliament en logos.

• ›

  JPG: El format que s'hauria d'utilitzar per a fotografies i imatges en general. Es perd una mica de qualitat en comprimir-les, però els colors i tons es mantenen iguals.

• ›

  GIF: S'utilitza en animacions i imatges en moviment.

Recomanacions:

• ›

  Utilitza sempre el format d'imatge més adequat en termes de pes i compatibilitat.

• ›

  Comprimeix sempre les imatges, ja sigui manualment o mitjançant una eina de processament automàtic.

• ›

  Si el web conté diversos icones, agrupa'ls en una sola imatge mitjançant CSS Sprites per reduir el nombre de peticions al servidor i millorar el rendiment del teu web.

4. Camps SEO d'imatge

Cada imatge ve amb un conjunt de camps associats per proporcionar als robots dels cercadors (i als usuaris, per descomptat) una millor accessibilitat.

Nom de la imatge

El nom de la imatge es refereix al nom del fitxer. És el títol de la imatge, que utilitza guions i guions baixos entre paraules. Es recomana incloure la paraula clau per a la qual volem posicionar la nostra imatge més amunt, evitant caràcters inusuals (com "ñ", "?" o lletres accentuades, "á", etc.)

També és aconsellable ometre preposicions o altres caràcters no essencials al nom de la imatge per escurçar la URL i fer-la el més SEO-friendly possible.

Title

És el text que apareix en col·locar el cursor a la imatge. Recomanem omplir-lo per afegir un títol semàntic a la imatge, incloent-hi la paraula clau que volem posicionar més amunt.

Aquest pot ser el mateix que el text alt, encara que reescriure aquest atribut amb lleus modificacions no porta gaire temps.

Atribut "Alt"

Aquest és l'element més important, ja que és el que llegeix Google. Ha de contenir la paraula clau principal per a la qual volem posicionar la nostra URL més amunt i se suposa que ha de contenir descripcions curtes.

La seva sintaxi és la següent:

<img src=”ENLLAÇ DE LA IMATGE” alt=”DESCRIPCIÓ ALT DE LA IMATGE” />

Exemple d'una imatge optimitzada:

Vegem com es podria optimitzar cada camp per a aquesta imatge basant-nos en la paraula clau objectiu "ciberseguridad pymes", la mitjana mensual de cerca de la qual és 90 (a Espanya):

Nom del fitxer:

• ›

  Incorrecte: 04745892595295.jpg

• ›

  Correcte: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes. (Consells de ciberseguretat per a empresaris i pimes.)

Text alt: Ciberseguridad para pymes y empresarios: consejos. (Ciberseguretat per a pimes i empresaris: consells.)

D'aquesta manera, optimitzarem tots els camps i obtindrem una imatge llesta per lluitar per les primeres posicions. Per descomptat, optimitzar les imatges no garanteix que apareguin primeres, però és un primer pas per aconseguir-ho :)

5. Context semàntic

Google considera que les imatges més rellevants són les que van en línia amb el contingut que les envolta. Per tant, es recomana incloure text relacionat. D'aquesta manera, ampliarem el context semàntic total a la URL.

6. Sitemap específic d'imatges

Per ajudar els bots de Google a rastrejar les nostres imatges més eficientment, és necessari crear un sitemap.xml exclusiu amb aquest tipus de fitxer. A WordPress, es pot crear automàticament amb eines (plugins) com Yoast o RankMath. Si no treballes a WordPress, pots utilitzar eines alternatives o eines de programació manual (rastreig d'URLs).

A continuació, veuràs un exemple de sitemap amb dues imatges dins de l'article:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://example.com/sample.html&lt;/loc> <image:image> <image:loc>http://example.com/image.jpg&lt;/image:loc> </image:image> <image:image> <image:loc>http://example.com/photo.jpg&lt;/image:loc> </image:image> </url> </urlset>

Algunes de les etiquetes més utilitzades a l'hora de crear un sitemap d'imatges són:

→ Títol de la imatge

→ La URL o el camí on es desa el fitxer

→ La nota al peu

→ Tipus de llicència

→ Informació de geolocalització

• ›Documentació: Es pot trobar molta informació al blog de Google sobre sitemaps d'imatges amb exemples, tutorials d'implementació i més.

Després d'acabar la implementació, podrem verificar l'estat de cobertura d'indexació a Search Console.

7. Lazy Loading d'imatges (càrrega sota demanda)

Les imatges són alguns dels recursos més utilitzats als llocs web, perquè, "una imatge val més que mil paraules", diuen. Per això l'aspecte visual de cada lloc web es desenvolupa acuradament utilitzant aquests elements multimèdia. No obstant això, no optimitzar-los pot tenir un impacte negatiu a l'experiència de l'usuari i al temps de càrrega del web. Per aquest motiu, és aconsellable el lazy loading.

Gràcies al lazy loading, les imatges només es carreguen quan apareixen a la pantalla. Per exemple, si es troben en una part inferior de la pàgina que encara no és visible a la pantalla d'un dispositiu, aquestes no es carregaran fins que l'usuari faci scroll cap avall. Això redueix considerablement el nombre de peticions HTTPS i redueix els temps de càrrega, fent que la teva pàgina sigui més agradable per a Google.

Plugins per implementar Lazy loading a WordPress

Si gestiones llocs web en aquesta plataforma de programari, hi ha un conjunt de plugins que cridaran la teva atenció si vols optimitzar les imatges implementant lazy loading. Recorda comprovar si el tema instal·lat inclou aquesta funció. Si no, aquí en tens uns quants d'interessants:

• ›

  BJ Lazy Load: fàcil d'instal·lar i configurar, és una de les eines més populars, amb més de 90.000 instal·lacions. Gràcies a aquest complement, pots escalar imatges per adaptar-les a diferents mides de pantalla.

• ›

  Lazy Load by WP Rocket: simple i fàcil de configurar (bàsicament perquè no proporciona opcions diferents), l'avantatge d'aquest plugin és no utilitzar una biblioteca JavaScript com jQuery.

8. Utilitzar un CDN per a imatges

Un CDN (Content Delivery Network) és un conjunt de servidors distribuïts arreu del món que faciliten el contingut a la memòria cau d'un lloc web segons on es trobi qui ho sol·licita. Gràcies a aquesta xarxa d'allotjament, el servidor que estigui més a prop de qui ho sol·licita proporcionarà una còpia del lloc web sol·licitat.

Per tant, utilitzar un CDN ajuda a fer que les nostres URLs es descarreguin més ràpid, reduint els temps de càrrega del nostre lloc i promovent el seu posicionament orgànic.

Si utilitzem un CDN (per exemple, Cloudflare) per mostrar imatges, aquestes es descarregaran i es mostraran més ràpid. Aquest flux directe millorarà directament el nostre SEO.

9. Altres consideracions

Les imatges valuoses per al SEO, és a dir, aquelles que volem posicionar més amunt, han d'estar incloses al codi font de la URL. Aquelles implementades com a propietat de fons a CSS no seran visibles per a Google, ja que no pot comprendre aquest tipus de fulls d'estil.

A més, hi ha altres detalls imprescindibles a tenir en compte a l'hora d'optimitzar les nostres imatges:

• ›

  Exif: Amb cada imatge, es desa un conjunt d'atributs, com la data en què es va prendre la imatge i altres dades rellevants per a professionals d'aquest camp. No obstant això, aquesta informació no és valuosa per al SEO i només ocupa espai. Eliminar aquesta informació pot ajudar a optimitzar les imatges i fer-les menys pesades.

• ›

  "longdesc": Aquest atribut s'oblida sovint, però pot ser interessant implementar-lo a les nostres imatges. Aquesta és una descripció llarga de la imatge.

• ›

  Enllaçat: El link-building té un paper fonamental al creixement orgànic de les nostres pàgines, però també de les nostres imatges. Aquestes també es poden enllaçar i, per tant, aconseguir un major reconeixement als cercadors.

Ens estem oblidant d'algun consell essencial? Ens encantaria escoltar-te. Deixa un comentari a continuació i no dubtis a compartir el teu coneixement!