Cómo Agregar el Atributo "ALT " a Imágenes del Blog en Blogger


Últimamente me he dado cuenta que las imágenes que insertamos en los post no llevan el atributo "Alt" es recomendable que nos tomemos unos segundos para agregar dicho atributo a nuestras imágenes que publicamos en los post.

Seguramente te preguntaras que es el atributo Alt, pues trataré de explicarlo de una manera sencilla y clara, este atributo se suele utilizar sobre la etiqueta "img" etiqueta que nos permite insertar imágenes en el blog o página web, y se utiliza para poner una pequeña descripción con palabras clave en la imagen a publicar.

Porque poner el atributo a nuestras imágenes,  sencillamente porque a Google les gusta las imágenes que contienes el atributo "Alt" en otras palabras agregar este atributo mejora en gran medida el posicionamiento de nuestras imágenes en el resultado de búsqueda en Google Images, y por ende tendríamos más visitas en nuestro blog.

Para agregar el atributo a nuestras imágenes, cuando insertamos una imagen en una entrada en blogger el código que nos genera automáticamente es el siguiente:

<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/imagen.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/imagenjpg" alt="aquí-descripción-breve-con-palabras-clave-de-tu-imagen"/></a></div>

Verás que la imagen está dentro de un <div, a la que hemos agregado alt="descripción" justo detrás de la etiqueta de cierre se los dejo en color rojo en el código de arriba.

Ahora si queremos agregar este atributo a cualquier otro código que contenga imagen como por ejemplo los enlace con imagen, los barnner, etcétera., tienes que localizar la etiqueta "img" en el código, veamos un ejemplo:

<a href="URL"><img src="URL-de-tu-imagen-" alt="aquí-descripción-breve-con-palabras-clave-de-tu-imagen" ></a>

Este es un código que normalmente solemos utilizar, que contiene un enlace con imagen, pero que le he añadido el atributo "Alt" se los dejo en color azul.

Si quieren más información y saber lo importante que es agregar este atributo a nuestras imágenes, pueden encontrarla en STvisual y Adseok.

12 comentarios:

Whisper el 11 de abril de 2010, 20:50 dijo...

Como hago para que cada vez que pase el mouse me salga el texto alt?..., por que lo he puesto en mi html, pero no aparece u.u.

Administrador el 12 de abril de 2010, 3:28 dijo...

Hola Whisper, para que aparezca el texto tienes que agregar el Atributo title="descripción" de está manera aparecerá el texto cuando pases el mouse por encima. El atributo title es un buen complemento del atributo alt, así que es bueno utilizarlo los dos.

Saludos!

Whisper el 12 de abril de 2010, 8:58 dijo...

Muchas gracias por la respuesta ;D

Anónimo dijo...

no me funciona, algun detalle?

Anónimo dijo...

hay que incluir:
alt="nombre imagen o palabras clave" title="nombre imagenes o palabras clave"

Con alt sólo, no se visualiza el texto

buscador el 18 de octubre de 2010, 11:14 dijo...

Eduardo tiene toda la razon, es mejor utilizar ambos atributos, el title como su nombre indica suele ser para rl titulo y el atributo alt se suele utilizar para dar una descripcion aunque tambien puede poner lo mismo en las 2 etiquetas. Me dedico a posicionamiento en buscadores y obtengo muy buenos resultados, si os interesa podeis visitarme pinchando mi nombre.
Un saludo chicos!!

Mariangeles el 27 de diciembre de 2010, 19:32 dijo...

Hola Eduardo! Primero quiero felicitarte por Pazos Blogger, lo visito a menudo y me es de gran ayuda.
Tengo una pregunta sobre este artìculo ¿ en los post ya publicados podrìa poner editar la entrada y agregarle estos atibutos? , es decir puedo hacerlo en post ya publicados o me traerìa algùn problema? es que nunca lo habia hecho hasta ahora que leì tu post :D .
Muchas gracias !! saludos y excelente 2011!!

Unknown el 10 de enero de 2011, 16:09 dijo...

Me parece muy interesante.

Hay un video, http://googlewebmastercentral.blogspot.com/2007/12/using-alt-attributes-smartly.html,
y una discusion al respecto en el blog central de gogle para web master donde se discute la forma inteligente de usar el atributo "Alt" y especifica que "mas que por gusto a medida que el robot de Google no ve las imágenes directamente, por lo general se concentran en la información proporcionada en el atributo "alt"."

Te a agradezco tu apoyo y el traspaso de conocimiento, estoy comenzando un blog y esta información para personalizar un código un poco complejo de blogger me es de mucha ayuda.

Te dejo mi blog por si gustas visitarlo y comentar, me vendría bien sugerencias y puntos de vista(recuerda que lo estoy comenzando, por lo que es bastante pobre todavía)

http://disenoypublicidadweb.blogspot.com/

Gracias

Unknown el 6 de febrero de 2011, 12:01 dijo...

Funciona perfecto. Muchas gracias.

juegos de lógica el 27 de febrero de 2011, 21:25 dijo...

Gracias.
Empezaré a usarlo hoy mismo.

Álvaro Lamela el 12 de septiembre de 2011, 13:38 dijo...

Muchas gracias por la explicación, es muy clara y de bastante utilidad.

Fernando - Agencia Social Media el 29 de noviembre de 2012, 0:23 dijo...

Muchas gracias por este post tan completo. Me ha ayudado mucho ya que soy novato en muchas cosas.

Tengo una duda aún, en Joomla viene predeterminado el atributo ALT? Es que no sé como modificarlo y viendo en el código si me aparece en la mayoría.

Saludos

Fernando

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible

¿NO PUEDES COMENTAR?

¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!

NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS

jueves, 11 de febrero de 2010

 

Ayuda para blog - Pazos Blogger Copyright 2010 | Template por:Brian Gardner | A Blogger por: Bloganol | Modificado y Diseñado por:Eduardo Sanguino