Les imatges ajuden les webs a ser més interessants i més atractives visualment. Però, si no s’optimitzen amb el text alternatiu (també anomenat text Alt o etiqueta Alt), es perd una oportunitat clau per millorar l’experiència i l’accessibilitat de l’usuari.
Per utilitzar aquesta etiqueta correctament, és important conèixer primer què són les etiquetes Alt. En aquesta entrada comentaré què són les etiquetes alt i per què s’utilitzen. També explicaré algunes bones pràctiques sobre com fer-ho.
Som-hi!
Què és una etiqueta Alt?
Les etiquetes Alt descriuen el contingut i el context de les imatges a la pàgina web. Aquesta descripció és la que el navegador mostra quan el fitxer d’imatge no es pot carregar ni mostrar correctament, al costat d’una icona que representa un document trencat.
Les etiquetes Alt ajuden les persones que utilitzen lectors de pantalla, com ara persones amb deficiències visuals, a comprendre el contingut de la pàgina que visiten. A més, els robots dels motors de cerca els utilitzen per interpretar les imatges quan rastregen, indexen i classifiquen el lloc web.
Afegida dins de l’etiqueta d’imatge, una etiqueta Alt de qualitat és una breu descripció que explica no només el que mostra la imatge, sinó també el seu propòsit a la pàgina. Quan s’utilitza en codi HTML, l’etiqueta d’imatge sencera s’assembla a una cosa així:
<img src="bicicleta-platja.png" alt="Home amb banyador estampat empenyent una bicicleta per la platja"/>De vegades es confonen les etiquetes Alt de la imatge amb el títol o la llegenda. Però els títols d’imatges són un atribut diferent. Es mostren com a text emergent quan un usuari posa el ratolí sobre una imatge. D’altra banda, la llegenda apareix sota de la imatge, i proporciona informació addicional o informació sobre ella. En circumstàncies normals, els visitants no veuran mai les etiquetes Alt de les imatges.
Per què s’han d’utilitzar etiquetes Alt a les imatges?
Les etiquetes Alt serveixen per a diverses funcions. Tot i que no és obligatori utilitzar-les, hi ha uns avantatges importants en fer-ho. Atès que són utilitzades tant per les aranyes dels motors de cerca com per eines de lectura de pantalla, són un component crític de l’accessibilitat web i de l’optimització dels motors de cerca (SEO).
Milloren l’accessibilitat web
Les etiquetes Alt permeten que els visitants puguin accedir i gaudir del contingut del teu lloc web, fins i tot quan utilitzen tecnologia d’assistència o navegadors només de text. Quan algú amb una deficiència visual visiti el teu web, el lector de pantalla els llegirà el text de la pàgina. Quan arribi a una imatge, utilitzarà l’etiqueta Alt per descriure què és aquella imatge.
Si falta l’etiqueta Alt, el lector de pantalla pot llegir el nom del fitxer d’imatge. Això normalment no serveix per descriure la imatge, a més que pot afegir confusió, sobretot si el nom del fitxer no està optimitzat per SEO.
Si es deixa el camp Alt d’una imatge buit, el lector de pantalla pot arribar a obviar-la. Si se suposa que les imatges que inclous a les pàgines web tenen un propòsit, aquesta absència significarà que el visitant no rebrà tota la informació ni tota l’experiència d’usuari que tenies previst en crear el contingut.
Poden millorar el posicionament en els motors de cerca
Les etiquetes Alt de la imatge poden millorar el posicionament per les paraules clau a les quals t’orientes. Els robots de cerca són intel·ligents, però no poden interpretar i comprendre els aspectes visuals d’una imatge de la mateixa manera que els humans ho podem fer.
Els atributs Alt ofereixen una alternativa basada en text per traduir les imatges i, més concretament, per incorporar paraules clau rellevants. Les descripcions textuals que contenen les paraules clau poden millorar la classificació a les cerques d’imatge.
Per destacar el paper tan important que tenen les imatges (i, a la vegada, les etiquetes Alt), fixa’t en la pàgina de resultats de la cerca (SERP) per a “llit doble”:
La primera pàgina dels resultats d’una cerca no només mostra resultats basats en text; també hi ha molts resultats d’imatges. Quan s’optimitzen i s’utilitzen correctament, les etiquetes Alt poden ajudar a millorar el SEO i generar clics a les imatges que es mostren en cerques com aquesta. Això és especialment beneficiós per a botigues online i per a landings.
Consells i bones pràctiques per escriure l’etiqueta Alt
Quan s’escriu el text de les etiquetes Alt, cal tenir en compte alguns punts clau. Seguir aquestes bones pràctiques ajudarà a fer més efectives aquestes etiquetes:
- Sigues específic i descriptiu. L’objectiu de les etiquetes Alt és descriure la imatge, de manera que s’ha de ser el més específic possible. Si no tens clar si la descripció és suficientment acurada, pensa en quina imatge t’imaginaries si només veiessis el text de l’etiqueta Alt.
- Fes-lo curt. Tot i que cal detallar la descripció, tampoc cal que l’etiqueta Alt sigui un paràgraf llarg (ni tan sols una frase completa). Màxim de 100 a 125 caràcters.
- Sense redundància. Per aprofitar al màxim les etiquetes Alt, no hi incloguis paraules innecessàries. Per exemple, Imatge de o Fotografia de abans de la descripció.
- Incorpora paraules clau rellevants de forma natural. Incorpora les paraules clau de forma natural dins el context de la pàgina.
- Evita el farciment de paraules clau. Si utilitzar paraules clau a les etiquetes Alt pot millorar el SEO, utilitzar-ne massa el pot perjudicar.
- No utilitzis imatges en lloc de text. El principal objectiu principal d’una etiqueta Alt és proporcionar un context textual a les màquines que no poden processar i interpretar els elements visuals d’una pàgina. Per tant, no té sentit utilitzar text en imatges.
Quan escriguis etiquetes Alt, pensa sempre que l’objectiu és descriure la imatge a aquells que potser no la podran veure. Si bé tenir en compte el SEO i paraules clau és sens dubte una idea intel·ligent, escriure les etiquetes Alt tenint al cap els usuaris reals ajuda a obtenir resultats més positius.
Conclusió
Les imatges fan més atractives, interessants i informatives les pàgines web. Però per optimitzar el seu impacte, la millor solució és utilitzar les etiquetes alt. Aquestes explicacions breus i descriptives proporcionen context tant per als usuaris com per als motors de cerca. Les etiquetes Alt ajuden a millorar l’experiència de l’usuari, a millorar l’accessibilitat i a facilitar la classificació de les paraules clau rellevants.
Imatge creada per Freepik i descarregada des de Freepik
