Optimización de imágenes: atributos ALT, TITLE y más

Muchas veces damos por supuesto que el simple hecho de añadir imágenes chulas en nuestro site es suficiente para atraer y fidelizar visitas. Y hasta cierto punto es correcto, una cuidada estética y creatividad es muy importante en la web, pero un buscador no sabe “descifrar” qué contiene una imagen si no se lo decimos… entonces, ¿cómo lo hacemos?

Pues para ello, debemos especificarle al robot el contenido de cada imagen mediante atributos insertados en el código fuente. Estos son “alt” y “title“.

Según las recomendaciones de W3C, el atributo alt se utiliza como alternativa al texto para los bots, mientras que el atributo title es suplementario:

• ALT: debe ser un equivalente textual del contenido de la imagen descrito de forma breve.
• TITLE: debe ser información complementaria que aclara sobre el elemento que titula.

Igualmente, se recomienda que los atributos “title” y “alt” no sean iguales para no crear confusión. Además, con estos dos elementos disponemos de un nicho en nuestro site donde introducir palabras clave del long tail, por lo que no sería inteligente desaprovechar uno de los dos atributos repitiendo la misma descripción en ambos. Por cierto, cabe destacar que Google le da más importancia a alt que a title.

Con estos atributos, además de facilitar la búsqueda a robots, contribuimos a crear un código más claro y accesible que puede ser de gran utilidad para invidentes. Los lectores de caracteres leen el “alt”, los navegadores muestran en tooltip al pasar el cursor del ratón el contenido de “title”, y si tardara en cargar o no se cargaran las imágenes de una página, se muestra en el hueco dejado por la imagen la descripción de “alt”.

Así, poniendo en práctica todo lo anterior, una buena descripción de imagen sería la siguiente:

<img src=”volkswagen-tuareg.jpg” alt=”Volkswagen Tuareg de ocasión TDI en negro” title=”Comprar coche de segunda mano VW Tuareg diésel negro” />

Por último, existen también otros aspectos que influyen en el SEO de las imágenes como el nombre del archivo, el peso del mismo, atributos de altura y anchura, y el texto adyacente a la imagen. Puedes verlo en este post.

Y tú, ¿cuidas tus imágenes? 😉

Several time we think that the simple fact of adding beautiful images on our web site is sufficient to attract and develop loyalty of visitors. And this is not a bad thing because a page having a well-kept estheticism and creativity is very important on the Web. However a search engine doesn’t know how to “decipher” what contains an image if we don’t indicate it… So how do we make it?
For that purpose, we have to specify in the robot contents of every image via attributes inserted into the source code which are “alt” and “ title “.
Following W3C recommendations, the attribute alts is used as an alternative to the text to the bots, while the attribute title, is additional:
ALT: Must be a textual equivalent of the image contents described in a brief way
TITLE: Must be a further information which enlightens the element which he(it) titles
It’s also recommended that the attributes “title ” and “alt” do not identical to prevent from doing confusion. Furthermore, with these two elements, we have a niche on our web site where we can introduce keywords tail length, and it would be necessary it’s a pity to repeat twice the same description while we possess two attributes. Obviously, you have to take into account that Google gives more importance in alt than for title.
With these attributes, besides facilitating the search in robots, we contribute to create a more clear and accessible code which can be of a big utility for the blind persons. Characters readers read the “alt”, browsers show tooltip in the passage of the mouse cursor the contents of ” title “, and if the load time makes long or if the images don’t load, it appears the hollow left by the image of “alt”
To summarize, if you put into practice all that we saw previously, an excellent image description would be the following one:
<img src=”volkswagen-tuareg.jpg” alt=”Volkswagen Tuareg secondhand TDI black” title=”Buy Secondhand Car VW Tuareg diésel black” />
Finally, there are also other criteria which have an influence on the SEO images as for example the name of the image, its weight, the attributes as well as the text neighboring to the image. You can see it HERE.
And you, do you take into account the importance of your images? 😉

À de nombreuses reprises nous pensons que le simple fait d’ajouter de belles images sue notre site internet est suffisant pour attirer et fidéliser les visiteurs. Et cela est loin d’être faux puisqu’une page ayant un esthétisme soigné et une créativité est très important sur la web. Cependant un moteur de recherches ne sait pas “déchiffrer” ce que contient une image si nous ne lui indiquons pas…alors comment faisons-nous?

Pour cela, nous devons spécifier au robot le contenu de chaque image via des attributs insérés dans le code source qui sont “alt” et “title”.

Selon les recommandations de W3C, l’attribut alt s’utilise comme alternative au texte por les bots, alors que l’attribut title, lui. Est supplémentaire:

• ALT: doit être un équivalent textuel du contenu de l’image décrite de façon brève
• TITLE: doit être une information complémentaire qui éclaire l’élément qu’il titre

Il est également recommandé que les attributs “title” et “alt” ne soient pas identiques pour ne pas créer de confusion. De plus, avec ces deux éléments, nous disposons d’une niche sur notre site internet où nous pouvons introduire des mots clés long tail, et il serait dommage de répéter deux fois la même description alors que nous possédons deux attributs. Evidemment, vous devez prendre en compte que Google donne plus d’importance à alt qu’à title.

Avec ces attributs, en plus de faciliter la recherche aux robots, nous contribuons à créer un code plus clair et accessible qui peut être d’une grande utilité pour les aveugles. Les lecteurs de caractères lisent le « alt », les navigateurs montrent en tooltip au passage du curseur de la souris le contenu de « title », et si le temps de chargement se fait long ou que les images ne se chargent pas, il apparait le creux laissé par l’image de « alt »

Pour résumer, si vous mettez en pratique tout ce que nous avons vu précédemment, une excellente description d’image serait la suivante :

<img src=”volkswagen-tuareg.jpg” alt=”Volkswagen Tuareg d’occasion TDI en noir” title=”Acheter voiture d’occasion VW Tuareg diesel noir” />

Enfin, il existe aussi d’autres critères qui influent sur le SEO des images comme par exemple le nom de l’image, son poids, attributs de longueur et de largeur, ainsi que le texte adjacent à l’image. Vous pouvez le voir sur ce post.

Et vous, accordez vous de l’importance à vos images?