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.
Para optimizar nuestros atributos aquí en blogger existen dos métodos :
METODO 1
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 sigue estos pasos:
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.
- Das un clic sobre la imagen.
- Te diriges a Propiedades.
- Allí agregas el texto del titulo y el texto del alt.
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 azul.
- 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 estará mejor ubicada en los resultados de búsqueda. Si tienes alguna duda escríbeme en comentarios.
