SEO y CSS

Hace unos días, un buen colaborador, diseñador él, que está empezando a curiosear en esto de la optimización del posicionamiento web, y yo, quedamos a tomar un café, cuando todavía se podía fumar en los bares y no nos habían desterrado a galeras.

En mitad de la charla, me comentó que todo el tema de WPO (Web Performance Optimization) se le estaba haciendo muy “cuesta arriba” por sus escasos conocimientos técnicos, y que no sabía muy bien como aprovechar toda la experiencia que había acumulado como diseñador al SEO.

Yo, que personalmente envidio la habilidad de muchos diseñadores por hacer las cosas sencillas (KISS) gracias al uso intensivo de CSS me quedé un poco sorprendido y le conté una técnica, que me está dando buenos resultados desde hace más de 3 años, en la que él no había caído.

Las hojas de estilo en cascada, bonito nombre por cierto, CSS para los amigos, te permiten no sólo separar contenido de diseño, sino que además te da la flexibilidad de mostrar el contenido en el orden que deseas, por lo que una web clásica (de izquierda a derecha y en sentido descendente: Logo → Cabecera || Menú lateral de navegación || Menú superior de navegación || Contenido || Pie de página) podemos mostrarla como mejor creamos.

Si tenemos en cuenta que “el que todo lo lee” quiere tener el contenido relevante cuanto antes, lo lógico sería que nuestro contenido estuviese al principio y no detrás de: logo, cabecera y distintos menus ¿no?, pero claro, quedaría “raroraro” tener una web en la que sueltas la parrafada, con su H1 y todo y después pones el logo y los menus, por no hablar ya de conceptos relacionados con usabilidad y navegabilidad.

Si utilizamos contenedores div para maquetar nuestra web podríamos definir las siguientes zonas:

  • div id=”contenido”
  • div id=”logo”
  • div id=”menu_lateral”
  • div id=”menu_superior”
  • div id=”pie de página”

A la hora de definir cada capa podemos aprovechar la potencia de CSS y utilizando las propiedades que nos permiten alterar el flujo de la información, position, float, clear, …, para mostrarle “al que todo lo quiere saber” primero el contenido y al usuario una estética agradable, usable y navegable.

Como fuentes para poder investigar sobre este tema:

  • Visual formatting model, quizás un poco dura de leer, pero obviamente una de las que más información aporta.
  • CSS Zen Garden, en la que creo que todos hemos bebido alguna vez, sobre todo para ver lo que puede llegar a hacerse.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *