Usar CSS para optimizar el SEO

A la hora de afrontar el “diseño de una página web“, un diseñador debe tener en cuenta muchos factores, se trata fundamentalmente de elaborar un proyecto que sea atractivo y útil para el cliente y sobre todo para sus usuarios, pero para llegar hasta “meta”, tenemos que plantearnos muchas otras “etapas”.

Mi experiencia me dice que un buen diseñador web, no puede quedarse sólo en el aspecto general y superficial de la web. Tenemos que conocer a la perfección cómo maquetar una web, si no expertos, saber bastante de SEO y tener alguna noción de al menos, cómo influye el código de programación en la estructura de la página.

Los conocimientos de maquetación son importantes a la hora de diseñar, ya que nos dirán si es más o menos conveniente hacer un diseño de una forma u otra. El SEO, nos dirá dónde es más conveniente colocar los títulos por ejemplo, y conocer algo de programación, nos ayudará a plantear por ejemplo colocar aquí o allá un menú css, o una galería ajax. Todo en su conjunto, contribuye a realizar un buen trabajo, una buena página web.

Desgraciadamente esta práctica no es muy habitual, y desgraciadamente en España, el trabajo del Director de ARte o diseñador, esta muy infravalorado, no hay más que ver los sueldos aquí y en el resto de los países y las “chapuzas” que invaden la red.

Hoy vamos a comentar la importancia que tiene el flujo del Html a la hora de posicionar bien una web e incluso de que cargue con mayor rapidez.

Cuando un navegador lee una página web, lo hace interpretando el código Html que lee. Independientemente de que la web esté programada o no, el resultado es un código Html y eso es lo que el navegador lee.

El navegador va leyendo línea a línea, en el mismo orden que nosotros leemos un texto.

Cuando trabajábamos con tablas, el navegador iba leyendo la página del mismo modo que nosotros la pintábamos, es decir, si primero estaba el título y luego los párrafos, ese sería el mismo orden que vería el navegador.

Ahora con las CSS esto ya no es así.

Existen varios atributos que nos pueden ayudar a la hora de “engañar” al navegador a la hora de cargar antes (hablamos de lectura) un código que otro.

Nada mejor que un ejemplo para entenderlo.

Si analizáis la página que estáis viendo, la de este blog, veréis que lo primero que leéis es una cabecera, luego los post y finalmente la columna de la derecha. Es lo lógico, ya que es conveniente que el código que queremos posicionar se lea lo antes posible, y lo menos importante es el contenido de la columna derecha, que es lo último que lee el navegador.

Sin embargo, imaginemos que fuese el caso contrario, que quisiéramos manteniendo el aspecto, que el navegador leyese antes la columna de la derecha y luego los post. Pues bien, como decía antes, hay atributos que nos pueden ayudar a realizar esta acción, por ejemplo el atributo style=”float: right”. Nosotros podríamos colocar en nuestro código primero la columna de la derecha con el atributo mencionado, el navegador la leería primero, pero sin embargo la pintaría en el mismo orden que la estamos viendo, es decir, a la derecha de la pantalla.

Vamos a ver esto con código, para que no quede ninguna duda, y para ello nos vamos a ayudar de la siguiente imagen, en la que podemos ver 3 bloques colocados en 3 columnas.

Ejemplo de Flujo en Html

Flujo del Html opuesto al diseño.

Imaginad que quiero enseñar las columnas en el siguiente orden c-b-a y sin embargo quiero que el flujo del html sea a-b-c. Para este ejemplo usaremos el atributo float:right, y el código sería:

<style>
li{
float: right;
}
</style>

<ul>
<li><div id="a"></div></li>
<li><div id="b"></div></li>
<li><div id="c"></div></li>
</ul>

El resultado de este código sería:

Flujo del Html

Con este método podemos jugar a nuestro antojo, podemos hacer también combinaciones de 2 a 1 colocando dos capas dentro de otra en un <li> y otro <li> para la tercera, etc. etc.

Incluso sin usar listados, jugando con el atributo float, podemos pintar una capa delante de otra, colocarle un float y hacer que el flujo sea uno y lo que el navegador ve sea otra cosa.

Esto mismo que hemos utilizado con este atributo, lo podemos hacer con varios más, como pueden ser el atributo position, ya que nosotros podemos escribir la capa que sea en el orden que sea y luego definirle una posición absoluta y obligarla a que se pinte justo en el lugar que queremos.

Display también nos permite colocar las capas donde queramos, incluso hacer que un contenido sea leído por el navegador pero que luego no se visualice (propiedad none).

En general, podéis ver que hoy en día con CSS podemos pintar una cosa y hacerle leer al navegador la contraria. Habrá en cada caso que valorar lo que más nos interese.

Share and Enjoy