Diseño Web, Registro de dominio y Hospedaje Web

miércoles, 4 de agosto de 2010

Optimización de imágenes: la puerta trasera de la web

La búsqueda de imágenes de Google es una potente herramienta que nos permite encontrar fotografías, ilustraciones y gráficos en Internet utilizando palabras clave. Hay millones de ellas indexadas en todo el mundo, incluidas seguramente las de nuestro propio sitio web.

¿Cómo aprovechar estas búsquedas de imágenes en nuestro beneficio de cara a los buscadores? Y sobre todo, ¿cómo hacer que nuestras imágenes atraigan visitantes aunque éstos no estén buscando imágenes?

1. Qué hace Google en sus resultados

Resultado de imágenes en la búsqueda 'circuitos electrónicos'

Cuando alguien busca en Googlecircuitos electrónicos, el buscador le presentará, además de los resultados normales de texto y antes de éstos, resultados de imágenes relacionadas con esas palabras clave. Estas imágenes están enlazadas a las páginas web en las que Google las ha encontrado.

2. Cómo llevar esas visitas a nuestra web

Vamos a imaginar que vendemos circuitos electrónicos pre-impresos a través de Internet. Nuestro público objetivo son estudiantes de electrónica o aficionados a soldar cosas pequeñitas en sus ratos libres; es decir, justo las personas que harían la búsqueda del punto 1. ¿Cómo atraeríamos estos visitantes hacia nuestra web? ¿Qué tal si fueran nuestras imágenes las que Google les presentara como resultado de su búsqueda?

El secreto: asociar las palabras clave a nuestras imágenes.

3. Qué cebo poner para atraer visitas

Está claro que quien pulsa sobre esas imágenes que muestra Google es porque las encuentra atractivas. Por eso, lo primero que debemos hacer (si es que vamos a lanzarnos a la aventura de asignar valor SEO a nuestras imágenes) es ofrecer material de calidad. Las imágenes van a ser nuestro cebo, y por eso deben ser atrayentes.

4. Cómo llamar a los archivos de imagen

Seguramente los productos de nuestra web estarán ilustrados con fotografías. Muchas veces encontramos que las imágenes que acompañan a la descripción de un producto tienen como nombre 132495843-b8.jpg o algo parecido, que puede ser el código de producto dado por el fabricante o un simple número identificativo para la propia imagen.

Pues bien, una vez identificadas nuestras palabras clave más importantes para ese producto en concreto, deberíamos utilizarlas para renombrar la imagen a, por ejemplo, circuito-electronico-impreso-detector-proximidad-01.jpg. Nuestra recomendación es separar las palabras con un guión normal y no utilizar espacios, acentos u otros caracteres especiales; ni siquiera mayúsculas. De esta forma evitamos errores.

<img src=”./img/circuito-electronico-impreso-detector-proximidad-01.jpg”>

Una alternativa, para no alargar demasiado los nombres de los ficheros, es aprovechar los nombres de las carpetas o directorios en los que se almacenan las imágenes, como

img/circuitos-electronicos-impresos/detector-proximidad-01.jpg.


5. Cómo informar a los robots de nuestras intenciones

Ejemplo de texto alternativo en una imagen

No debemos olvidar que los robots que hacen la indexación de las páginas web sólo son capaces de leer texto, y nunca podrán interpretar el contenido de una imagen. Por eso es buena idea utilizar el texto alternativo para las ilustraciones, contenido en el atributo ALT del código de la imagen, de la siguiente forma:

<img src=”./img/circuito-electronico-impreso-detector-proximidad-01.jpg”alt=”Imagen de circuito electrónico impreso para detector de proximidad”>

¿Y por qué no poner únicamente circuito electrónico impreso detector proximidad como texto alternativo? Pues porque no son sólo los robots los que van a ver nuestras páginas en modo texto; los navegadores utilizados por las personas invidentes (en combinación con digitalizadores de voz) también verán las páginas sin imágenes y transmitirán su interpretación al usuario de esta forma. Por otro lado, si por lo que sea el servidor no es capaz de mostrar la imagen, también se verá el texto alternativo en su lugar (como en la ilustración de la derecha).

6. Dónde poner más información para nuestros visitantes

Ejemplo de título en una imagen

Si después de lo anterior queremosreforzar más aún la relación de la imagen con esas palabras clave, todavía hay otra forma de hacerlo, y es con el atributo TITLE. Éste es especialmente útil, en lo que a usabilidad se refiere, al enlazar una imagen desde el listado de productos hacia la página del producto, porque ofrece más información al usuario sobre lo que va a encontrar cuando haga click en la imagen.

<img src=”./img/circuito-electronico-impreso-detector-proximidad-01.jpg” alt=”Imagen de circuito electrónico impreso para detector de proximidad” title=”Circuito electrónico impreso – Detector de proximidad”>


O, si está enlazada:

<a href=”pagina-destino.htm” title=”Circuito electrónico impreso – Detector de proximidad – Pulse para más información”><img src=”./img/circuito-electronico-impreso-detector-proximidad-01.jpg” alt=”Imagen de circuito electrónico impreso para detector de proximidad”></a>


7. Por qué mejorar el resto de la página

El texto cercano a la ilustración también será importante a la hora de que ésta responda a determinadas palabras clave, por lo que si la rodeamos de contenido que tenga que ver con la imagen representada, Google la relacionará por contexto.

Esto también significa que el resto de la página debería estar optimizada para esos términos de búsqueda. Si desde el principio nos hemos planteado la utilización de las imágenes para atraer tráfico de calidad (es decir, a nuestro público objetivo), lo natural será que el contenido de la página sea homogéneo y coherente, y por tanto todo responderá a las mismas dos o tres palabras clave.

8. Cuánto aumentar el tamaño de la imagen

Aunque en última instancia el tamaño de la imagen tendrá que depender del diseño y la usabilidad de la página donde está inserta, parece que Google da prioridad a las imágenes más grandes (o al menos de cierto tamaño mínimo). Si el aspecto queda igual de bien con la imagen a 300 píxeles de ancho que a 150, es mejor que elijamos la talla mayor. Ajustaremos la compresión al máximo aceptable para que no disminuya demasiado la calidad, y de esta forma no tarde mucho en cargarse en pantalla.

No olvidemos asignarle a la imagen el tamaño adecuado en el código para que a Google no se le pase este detalle. Así también haremos más agradable a nuestros visitantes la experiencia de navegar por nuestras páginas, que no se irán “recolocando” a medida que se cargan elementos.

<img src=”./img/circuito-electronico-impreso-detector-proximidad-01.jpg” width=”200″ height=”150″ style=”width: 200px; height: 150px;”alt=”Imagen de circuito electrónico impreso para detector de proximidad” title=”Circuito electrónico impreso – Detector de proximidad”>


9. A quién abirle la puerta de nuestra web

No olvidemos que si queremos que Google tenga en cuenta nuestras imágenes deberemos hacérselo saber… o al menos no darle con la puerta en las narices.

Para controlar el acceso a determinadas zonas de nuestra web utilizaremos el ficherorobots.txt. Si éste tiene algo parecido a:

User-agent: *

Disallow: /admin

Disallow: /img

significa que ningún robot entrará a indexar el contenido de la carpeta img, que es donde guardamos las imágenes. Tenemos dos alternativas:

  • Permitir el acceso indiscriminado a la carpeta de imágenes, para lo cual simplemente retiraremos de robots.txt la línea correspondiente a ese directorio:

User-agent: *

Disallow: /admin


  • Limitar el acceso a todos menos a Google, con lo que el código se parecerá más a:

User-agent: Googlebot

Allow: /img


User-agent: *

Disallow: /admin

Disallow: /img


10. Dónde poner el límite de lo razonable

Por último, como siempre, tenemos que recomendar mesura y sentido común. Atiborrar una página de palabras clave (lo que se conoce como keyword stuffing) no es bueno, bonito ni barato. Los textos, estén donde estén (en títulos de imágenes o en el contenido principal), han de ser naturales y fluir en la mente del lector. Recordemos que Google es capaz de reconocer sinónimos; utilicémoslos para embellecer nuestra prosa.

Créditos: La imagen utilizada en el ejemplo del punto 6 es © NitzuDreamstime.com

http://10enseo.es/

No hay comentarios: