SEO: Atributos Alt y Title Automáticos en las Imágenes

Los atributos 'alt' y 'title' son los que describen una imagen y su contenido. El atributo 'alt' se utiliza para describirle el contenido a los motores de búsqueda, y el atributo 'title' describe el contenido a los usuarios.

En este video Matt Cutts explica la importancia del atributo "Alt" en la imágenes. El el video el hace mucho énfasis en al tributo 'alt' mas que en el 'title', ya que el atributo alt es el que Google va a leer, sin embargo al combinar estos dos se obtiene un mayor impacto tanto en el motor de búsqueda como en los usuarios.

El código base de una imagen debe ser este:

<img src="imagen.jpg" alt="descripcion" title="descripcion" />

En Internet Explorer el atributo 'alt' genera una descripción (tool tip) al pasar el puntero de mouse sobre una imagen, mientras que en Firefox y Google Chrome, esta descripción visible es generada por el atributo 'title'.

Al describir lo que sucede en una imagen le estas ayudando a los motores de búsqueda a encontrar dicha imagen mas rapidamente y esto generara un aumento de trafico hacia tu sitio web.

No debes exceder en el uso de palabras clave en los atributos 'title y 'alt' ya que Google penalizará eso, puesto que no estas describiendo lo que en realidad esta sucediendo en la imagen.

Para agregar estos atributos a las imagenes, Blogger ha implementado un herramientas desde el editor de entradas.

Simplemente, después de agregar un imagen y estando en el editor de entradas, das un clic sobre la imagen y te diriges a Propiedades, allí agregas el texto del titulo y el texto del alt. En lo posible realiza este proceso desde el editor de entradas y agrega un descripción correcta manualmente.

Sin embargo, para reducir el trabajo y realizar este proceso automáticamente, te dejare un script que tomará el nombre de la imagen y lo usará para insertar los atributos title y alt. Pero recuerda que la mejor descripción es la realizada manualmente.

Este script utiliza Jquery; si ya lo tienes en tu blog entonces omite el código resaltado en verde.

Ve a Plantilla>Editar HTML> das un clic dentro de la plantilla, presionas Ctrl + F y buscas</head> Justo antes pega este código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*Atributos alt y title*/
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Guardas lo cambios realizados y vas a una entrada donde exista una imagen. Pasando el mouse sobre ella observaras que se muestra una descripción de dicha imagen y efectivamente esto es lo que queremos lograr.

Con esto se optimizara el posicionamiento de tus imágenes y por lo tanto tu pagina web estara mejor ubicada en los resultados de búsqueda.

Aplícalo si aun no lo has hecho, esto te ayudará.

Imprimir artículo