Coloca el contenido más interesante al principio

25/4/06 - En el mundo editorial se sabe bien que el texto situado al comienzo de un artículo es crucial para captar el interés del lector y conseguir que se lea el texto entero. En la web es todavía más importante captar el interés del visitante, puesto que el comportamiento de éstos es todavía más impaciente y volátil. Los buscadores no son como los lectores que podamos tener, pero también prestan más atención al contenido que situamos en la parte superior de la página, por lo que resultará doblemente importante colocar arriba el texto más representativo de la página.

Los motores de búsqueda indexan el contenido de las páginas desde el principio del código HTML hasta el final, de modo que, al principio de la lista de palabras clave, quedan los textos encontrados al principio de la página. De alguna manera, los textos del principio tienen más presencia que los del final.

Ocurre muchas veces que los diseños de las páginas web contienen una estructura en columnas que hace que en el principio del código de la página queden las palabras clave contenidas en la cabecera y en la columna de la izquierda. El texto que más debería interesar para los buscadores está situado en la columna central, pero dentro del código HTML, muchas veces aparece primero algún texto que no resulta tan representativo.

Cómo poner el código al principio

Las hojas de estilo en cascada nos pueden ayudar bastante a optimizar el código de una página, para que tengan mucho más peso los contenidos que realmente tienen importancia. Además, gracias a la maquetación con CSS no es muy difícil conseguir que el cuerpo de la página quede antes en el código que la barra de la izquierda.

Realmente podemos utilizar un código como este:

<div id="contenedor">
<div id="cuerpo">
<h1>Titulo</h1>
Texto importante de la página
</div>
<div class="lateralizquierdo">
Enlaces...
<br>
Más enlaces
<br>
otros enlaces..
</div>
</div>

En este código, podríamos asignarle a la capa "cuerpo" un margen a la izquierda y hacer que flote a la derecha. Luego el "lateralizquierdo" tendría otro ancho y debería aparecer a la izquierda, dejando el cuerpo a la derecha. Lo ponemos además dentro de un contenedor para que queden los contenidos maquetados sobre un espacio fijo.

El CSS sería el siguiente:

#contenedor{
   width:700px;
}
#cuerpo {
   width:530px;
   float:right;
}
#lateralizquierdo{
   width:160px;
}

Si utilizamos tablas también podemos hacerlo para que el código quede al principio. Simplemente pondremos una tabla con dos filas y dos columnas, donde la columna del cuerpo tendrá un rowspan=2.

Algo como esto:

<table cellspacing="2" cellpadding="2" border="1">
<tr>
   <td></td>
   <td rowspan="2">cuerpo</td>
</tr>
<tr>
   <td>lateral</td>
</tr>
</table>

El espacio del lateral quedará a la derecha y el cuerpo a la izquierda, aunque lo hayamos escrito al principio del código.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba