Agregar Atributos Alt y Title Automáticos en las Imágenes

Por Aizum Blog @aizumblog

Los atributos alt y title en SEO, o en el posicionamiento de imágenes por los buscadores, es muy importante, ya qué si añades estos dos atributos en una imagen, los motores de búsqueda, encontrarán más fácilmente la imagen que tienes insertada o incrustada, en tú blog o web. Y con ello recibirás un mayor impacto, tanto en un incremento en visitas, cómo en los motores de búsqueda, más importantes y relevantes.


Existe una herramienta on-line que uso, qué os puede facilitar está tarea, consiste en una herramienta SEO, que te dirá, si tienes en tu web o blog, en las imágenes, el atributo alt o title, además de comprobar si tienes las dimensiones correctamente en una imagen concreta de tú página, es decir, el ancho y el alto de una imagen, aquí os dejo el enlace: Herramienta SEO
En la herramienta anterior, hay un vídeo de Youtube, Matt Cutts qué es el director del departamento contra el spam, en la web de Google. Explicando la significación que tienen el atributo "alt" en la imágenes. Sin embargo, a pesar de que el atributo "alt" es el que va a leer Google, por el motor de búsqueda de dicha compañía, si combinas los atributos "alt & title" producirás un mayor choque, tanto en el motor de búsqueda, como en los usuarios. Para ver el vídeo de Matt Cutts explicando lo citado, lo puedes ver a continuación en el siguiente botón.
Click para verlo!
El código HTML de una imagen, básicamente, debe de ser aquel, que contiene los atributos alt y title, para ello, os voy a mostrar el código base, que podrás ver a continuación, para que veáis la estructura del código, para añadirlo en todas la imágenes manualmente de tu página web.
<img src="imagen.jpg" alt="descripción_de_imagen" title="descripción_de_imagen" />


En el navegador de Windows, es decir; Internet Explorer, el atributo 'alt' genera una descripción en forma de tool tip, al pasar el cursor del ratón sobre una imagen, mientras que en los navegadores de Firefox y Google Chrome, esta descripción es visible, o es generada por el atributo 'title'.

La descripción en una imagen con estos dos atributos estructurados en una imagen HTML, estás realizando una función muy importante. Básicamente estás ayudando a los motores de búsqueda que te encuentren más rápidamente, es decir les estás diciendo a Google, ¡eo estoy aquí! y con ello, un incremento sustancial de visitas hacía tú página web o blog.
Cabe advertir, que no puedes abusar en exceso de palabras claves en los atributos "title" y "alt" ya que con esa acción, Google, penalizará negativamente, esa acción. Ya que, no estás describiendo correctamente, lo que en realidad está sucediendo en la imagen o en el contenido de la imagen. Debes de ser escueto, y breve en la descripción, es un punto a considerar.
Para añadir en Blogger los atributos "alt & title" en cada imagen, Blogger, dispone de una herramienta de inserción, que nos facilita está tarea tan tediosa, para algunos. Para ello, debes de ir al editor de entradas de Blogger, luego le das clic sobre la imagen que tienes en esa entrada o cualquiera, elige la opción de Propiedades, y estando allí, agregas el texto del titulo y el texto del alt. Este proceso te llevará segundos, y merece la pena el esfuerzo, aunque sea manual, ya que te producirá un aumento de visitas en tu blog de Blogger, mediante las imágenes descritas que tengan estos atributos incrustados o agregados.

Para reducir el trabajo o el esfuerzo de hacerlo manualmente, y realizar este proceso manualmente, existe un script, que tomará automáticamente el nombre de la imagen y lo usará para insertar los atributos title y alt. Pero recuerda, que la mejor opción es describir el title y el alt de forma manual, la realizada manualmente es la más adecuada, consejo.
Añade el Script automático en Blogger!
  1. Ves a Blogger
  2. Ingresa en Plantilla
  3. Ahora en Editar Html
  4. Y busca con Ctrl+F la etiqueta </head>
  5. Y antes de dicha etiqueta, es decir; </head>
  6. Copia y pega el siguiente Script.
  7. Una vez añadido el Script, guarda plantilla.
  8. Atención: si tienes la primera línea del script, que es jQuery, omite ese paso.

<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>

Ahora para comprobar si el script funciona, correctamente, ves a cualquier imagen de una entrada, y asegúrate de que al pasar el cursor por encima de la imagen, salen las descripciones correctas del "alt y title" y automáticas del script insertado anteriormente. Con esto habremos acabado el tutorial de está entrada, y usted habrá optimizado el posicionamiento en sus imágenes, por lo tanto, habrás logrado que tu pagina web o blog, esté mejor ubicada en los resultados de búsqueda. Espero que os haya resultado útil éste tutorial, enjoy this tip!

Get free premium widgets for your blog and website.