Entradas

Optimización de las imágenes de tu web

El peso de las imágenes y también de cara al posicionamiento web, es algo a lo que normalmente no se le presta atención. Pero cada vez más son variables que determinan una mejor posición en el resultado de los buscadores web.

Os vamos a dar una serie de recomendaciones a tener en cuenta a la hora de actualizar vuestros sitios web de cara a optimizar tanto el peso como los parámetros SEO:

Optimización SEO de imágenes para los buscadores

Nombre del archivo de imagen
Este es uno de los elementos básicos en la optimización de imagenes, el nombre del archivo es de lo más valorado. Por ejemplo, si hablas de “Aves Migratorias” un nombre de la imagen perfecto sería “aves-migratorias.jpg”.
Preferiblemente en minúsculas y como separador un guión. Si tienes más imagenes del mismo tipo, lo recomendable sería nombrarlas con un orden numérico logico. Por ejemplo “aves-migratorias-2.jpg”.

Formato de archivo de las imagenes
Por lo que hemos visto en  los SERPs y por experiencia propia, parece que son mejor valorados los formatos .jpg y .gif y desde mi punto de vista, algo menos el .png. Pero claro, los jpg no tienen la opción de transparencia y los gif sólo tienen 256 colores.

Etiqueta ALT en las imagenes
El texto de la etiqueta ALT fue diseñado para las personas con discapacidad visual para definir con texto lo que no veian con imagen.
Sabiendo esto, el texto de la etiqueta ALT tiene que satisfacer a los navegadores de texto y lectores de pantalla, con palabras claves concretas para los motores de búsqueda.

Básicamente se trata de encontrar un equilibrio, intentando que sean frases cortas, concisas y que realmenten definan la imagen a la que se refieren.

Etiqueta title de la imagen
Se tiende a pensar que la etiqueta ALT y title en una imagen sirven para lo mismo, pero no es así. La etiqueta title tiene mucho menos peso que la ALT y se podría utilizar para complementar la etiqueta title, pero sin abusar.
La etiqueta title aparece cuando pasas el raton por encima, por ejemplo en firefox.
Un problema que podría suceder, es que una persona con discapacidad visual escuche dos veces contenido parecido para la misma imagen (alt y title)

Titulos y textos en negrita
También he notado que las imagenes con titulos o textos en negrita cerca de la imagen (en cuanto a codigo) dan buenos resultados para búsquedas con esos titulos o textos en negrita.

Leyendas de imagen
Las típicas leyendas debajo de la imagen tampoco dan mal resultado, y evidentemente están relacionadas con el punto anterior, así que si puedes ponerlas, ponlas…

Imágenes en carpeta
También hemos observado resultados positivos en este punto, aunque quizás sea manía, y es el de introducir las imágenes en una misma carpeta, tipo ejemplo.com/imagenes/ o ejemplo.com/fotos/ y a partir de ahí organizarlas como quieras.

Optimización del peso y tamaño de imágenes para los buscadores

En este apartado hay que tener en cuenta dos variables:

El peso de la imagen

Se recomienda no publicar las imágenes con un peso excesivo, ya que ralentiza la carga de la página web. Para ello recomendamos utilizar la opción Guardar para web dentro de Photoshop, que optimiza la compresión de la imagen y ajusta los colores para su visualización en monitores

– El tamaño de la imagen

Por lo que hemos comprobado, suelen aparecer en mejores posiciones imágenes con un tamaño razonable, es decir ni grande ni pequeño., lo que no quiere decir que las imágenes grandes o pequeñas no posicionen, y más ahora que hay búsqueda por tamaños en las imágenes. En general parece que imágenes más grandes de 100x100px y más pequeñas que 1200x1200px tienden a tener mejores posiciones en una búsqueda normal de imágenes.

Uno de nuestros últimos trabajos: BIRDCÁDIZ

Hoy tenemos el placer de presentaros uno de nuestros últimos trabajos: BIRDCÁDIZ, el Portal de Ornitología de la Provincia de Cádiz. Es, hasta el momento, la solución web de la que nos sentimos más orgullosos. Tanto por las sinergias de trabajo que hemos compartido con el equipo de profesionales de Ornitour, como por la respuesta que está teniendo entre los aficionados a la Ornitología.

El punto de arranque de Birdcádiz se inició en 2005 con un diseño muy atractivo pero con unas limitaciones funcionales para un proyecto tan interesante y ambicioso como este. Cinco años después de su inicio y aprovechando el auge de las redes sociales, Ornitour se puso en contacto con Solucionesproit para solicitarnos una solución integral que englobara un portal web dinámico y administrado mediante un gestor de contenidos y el inicio de su andadura por las principales redes sociales: Facebook, twitter y Youtube. Después de varias reuniones compartiendo ideas y debatiendo sobre las distintas estrategias a llevar a cabo, nos pusimos manos a la obra hasta conseguir un portal web atractivo y eficiente que ha cumplido con creces las expectativas de nuestro cliente.

Birdcádiz ya no es una web estática que requería ser actualizada mediante Dreamweaver, sino que ha saltado a su versión 2.0 y se ha integrado perfectamente con su presencia en las redes sociales.

El centro de la estrategia desarrollada es el propio portal, desde el que se publican contenidos que automáticamente aparecen en las distitnas redes sociales. De este modo, se aprovechan todas las funcionalidades del Gestor de Contenidos Web y no es necesario realizar el mismo trabajo varias veces. Es decir, el contenido que aparece en Birdcádiz.com se autopublica en su página de Facebook, su perfil de twitter y su canal en Youtube.

Pero como ya hemos comentado, hemos ofrecido una solución web integral. También hemos llevado a cabo acciones de optimización de su posicionamiento web (SEO). Entre las mejoras conseguidas destacan el incremento de su Pagerank y el resultado de la búsqueda en Google ofrece enlaces de sitio.

Sin más, queremos agradecer desde aquí a Ornitour la confianza depositada en nosotros y felicitarlos por el excelente trabajo que están realizando a través del Portal de Ornitología.

Tips clave para la usabilidad de un sitio web

La USABILIDAD de un sitio web es una variable que no podemos pasar por alto, y que se debe tener en cuenta antes de empezar a trabajar con el desarrollo de una página web.

Los puntos que vamos a destacar están agrupados por 4 secciones básicas: Accesibilidad, identidad, navegación y contenido. Veamos y analicemos cada una de ellas en profundidad:

1. Accesibilidad

En este apartado debemos tener en cuenta cualquier cosa que pueda provocar que un usuario no sea capaz de acceder a información de la página. Se trate de lo que se trate, ya sea porque la web no carga, que el texto sea demasiado pequeño, o porque utilice un navegador para el que no hemos optimizado.

1.1 – El tiempo de carga es razonable

La velocidad de carga no solamente nos mejora el posicionamiento natural, sino que también mejora la experiencia del usuario. El usuario está acostumbrado a las páginas rápidas, y cada vez tiene menos paciencia. Cualquier página debería cargar en menos de dos segundos. Para monitorizar esta velocidad podéis utilizar las extensiones para Firefox: Firebug y PageSpeed

1.2 – Contraste del texto con el fondo

El diseño muchas veces va reñido con la usabilidad. Fondo gris claro sobre texto gris oscuro podrá ser muy bonito, pero va dejar ciegos a los usuarios. Además, cada monitor y cada ordenador muestra los colores de forma distinta. No te la jueges, y usa contrastes altos, a ser posible el negro sobre blanco.

1.3 – Tamaño y espaciado entre caracteres

El tamaño de la fuente es importante. Letra demasiado pequeña o junta produce frustración, y abandono. Lo mismo con el espaciado entre lineas. No hace falta un doble interlineado como si fuera un trabajo del cole, pero si lo suficiente como para mejorar la experiencia del usuario.

1.4 – Flash

Nadie espera un minuto para cargar una web. De hecho, todo lo que pase de dos segundos es malo, y nadie espera más de 10. O sea que no es una buena opción optar por un web hecho completamente en flash, por muy fantástico que sea el resultado. Si quieres hacer algo en flash, que sea esporádico y solamente en algunos puntos de la web. A lo que hay que añadir los inconvenientes de indexación que puede conllevar.

1.5 – Etiqueta ALT

No solamente para el SEO, sino también para los usuarios invidentes. El correcto uso de las etiquetas ALT está más que contrastado para lograr buenos resultados. No los pases por alto.

1.6 – Página 404 personalizada

Se debe cambiar la página de error 404 que existe por defecto, por una personalizada, indicando que la página no se encuentra, y con enlaces a las principales páginas de la web, así como un buscador, para guiar al usuario y no perderlo.

2. Identidad

Una pregunta clave que se hace un usuario cuando llega a una web es “¿Quien es esta gente?” Y es importante responder esa pregunta, ya que si esa información no aparece, el usuario puede sospechar de la credibilidad de la empresa, especialmente si está interesado en adquirir algún artículo.

2.1 – Logo

La gente quiere ver el logo de la empresa arriba a la izquierda. Eso es lo que esperan, y eso es lo que se les debe dar, al menos en la mayoría de casos (siempre hay excepciones). De hecho, esperan hacer clic en ese logo para ir a la página inicial. O sea que démosles lo que quieren.

2.2 – Qué hacemos

Seguramente tenemos muy claro lo que hace nuestra empresa. Y seguramente lo sabemos tanto, que lo damos por obvio. Y a veces ni tan solo lo decimos. El usuario debe tener claro lo que hacemos, leyendo la página inicial. No demos nada por sentado.

2.3 – Digerir la página de inicio en 5 segundos

Algunos dicen que 2, algunos que 7, algunos que 5. Lo que queda claro, es que el usuario debe poder “digerir” la página inicial de la web en un breve período de tiempo.

2.4 – Quiénes somos

Alguien que quiere comprar un producto, pagar por un newsletter o establecer una relación comercial con alguien, quiere saber “quién es” ese alguien. Y eso se contesta en la sección “quiénes somos”, donde factores como la antigüedad de la empresa, nombres propios, localización o referencias, da la confianza necesaria al usuario para realizar ese paso.

2.5 – Contactar

Debe aparecer de forma clara y en todos los apartados de la web. Debemos dar el máximo de posibilidades. Teléfono, correo, formulario o dirección física si procede. Facilitemos ese contacto al máximo.

3 – Navegación

Una vez el usuario ya sabe quiénes somos y qué hacemos, ahora debemos facilitarle al máximo el acceso a la información de toda la web, sin que se pierda en ningún momento.

3.1 – Navegación principal

Los menús de navegación existen desde los inicios de laRed. Ha cambiado la localización, la tecnología y los estilos, pero siempre debe haber un menú de navegación principal que nos lleve a las diversas áreas principales de la web, no solo para guiar al usuario, sino para dejarle claro cual es la estructura.

3.2 – Menos es más

Sé claro y conciso. No hace falta una opción “comunícate online con nuestro equipo” cuando puede ser “contactar”. Menos es más.

3.3 –  Número de elementos

Los psicólogos no se ponen de acuerdo con el numero máximo de elementos que el cerebro puede procesar de forma inconsciente y ágil, pero el número suele estar de 4 a 7. Así pues, los enlaces o botones de los menús, que se limiten a esos varemos, o mejor pensar en otra distribución.

3.4 – Link del logo a la homepage

Lo avanzábamos en el punto 2.1. El logo de la empresa (normalmente colocado arriba a la izquierda) debe ser un enlace  la página inicial. La gente lo espera, no les frustremos.

3.5 – Enlaces coherentes e identificables

No hace falta que sea el típico enlace azul y subrayado, pero el link debe ser siempre con el mismo estilo, y a ser posible azul o subrayado, para que el usuario lo identifique rápidamente.

3.6 – Búsqueda

Normalmente, arriba a la derecha, con el botón “buscar”. Al menos ahí es donde van a buscar los usuarios. Cada vez se utiliza más y en la mayoría de veces con una mala experiencia por parte del usuario. El formulario de búsqueda no sólo debe ser visible, sino que los resultados deben ser relevantes y tan cuidados como cualquier otra sección de la web.

4 – Contenido

En SEO, solemos decir que “el contenido es el rey”. Lo mismo es aplicable para la usabilidad. No solo debemos tener un buen contenido, fresco y relevante. También debe ser coherente, organizado y de fácil acceso.

4.1 – Encabezados

Prácticamente ningún usuario lee una web, a no ser que se trate de un web de contenidos, como  blogs, revistas o prensa. En las páginas corporativas, nadie lee de arriba a abajo las paginas, sino que suelen hacer una lectura en diagonal, fijándose en los encabezados, inicios de párrafos, listas y negritas, buscando lo que les interesa. Así pues, usemos las etiquetas <H> pensando en ese comportamiento.

4.2 – Información importante antes del scroll

La mayoría de mortales tienen un monitor de 1024×768. Piensa en eso cuando diseñes o organices la información, y mantén la información crítica e importante por “encima” del scroll. Es decir, que el usuario no tenga que utilizar las barras de desplazamiento verticales ni, por supuesto, horizontales.

4.3 – Coherencia en los estilos

Elige un estilo y cíñete a él. Colores, fuentes y cualquier estilo. No cambies el tipo de color de los encabezados, enlaces o párrafos de una sección a otra, o uses plantillas distintas, ya que puede confundir al usuario.

4.4 – Negrita

Intentando destacar demasiada información, no destacas nada. Si colocas demasiado texto en negrita, al final no se aprecia lo que realmente es importante. Lo mismo con las novedades de la web. Si la mitad de los apartados del menú están acompañadas por un “nuevo!” parpadeante en rojo, ya nada es nuevo.

4.5 – Anuncios y pop-ups

Los anuncios deben estar muy bien integrados en el contenido de la web, sin “confundirlos” con el mismo. Tampoco fuerces anuncios encima del contenido, ni pop-ups intrusivas. El usuario odia ese tipo de comportamiento.

4.6 – Sé conciso y explicativo

Mira tu homepage. ¿Puedes decir lo mismo con la mitad de palabras? Pues hazlo. Se conciso y descriptivo, y evita argot innecesario. A nadie le importa que “busques la excelencia de la productividad” o que “aproveches sinergias interdepartamentales”.

4.7 – URL amigables

Las URLs deben ser compresibles y significativas. Ya sabemos que funciona muy bien con el SEO, pero también para la experiencia del usuario.

4.8 – Títulos auto explicativos

Los títulos de cada página (los de la etiqueta TITLE) deben ser descriptivos, únicos y relevantes. No solamente una retahila de palabras clave embutidas. No solo los buscadores los pueden ver “sospechosos”, sino también los usuarios, que ante esa posibilidad, pasaran  la siguiente web de la página de resultados.

Hasta ahí esos 25 puntos clave, básicos y tan importantes. Como os decíamos, el checklist es de UserEffect, y os podéis bajar el PDF aquí. Evidentemente, es ampliable y personalizable en función de las necesidades de cada cliente, pero es un buen punto de partida.