Guía de Maquetación SEO


Después de la elección de palabras clave y la estructura web creo que la maquetación es el tercero de los puntos más importantes en el SEO. Y lo es porque esta es una de las partes menos visibles por el usuario en una web, maquetas muy distintas pueden dar lugar a webs exactamente iguales y eso históricamente ha llevado a que la mayor parte de las webs estén realmente mal maquetadas. Cómo SEOs y a sabiendas de que todo esto no es más que una competencia entre webs por ser mejor que las demás este es un punto en el que es posible e importante destacar.

En este post intentaré hacer un resumen sobre los puntos más importantes a tener en cuenta en la maquetación seo… es un post, no puedo explicarlo todo ni entrar a discutir porque una opción es mejor que otra pero espero al menos marcar el camino para aquellos que estén interesados en el tema. Empecemos…

Formato del documento

Un contenido en internet puede tener muchos formatos. Pero para SEO el que funciona es el HTML, olvidémonos de flash, de pdf, de docs, etc. Si queremos sacar partido a nuestro contenido este tiene que existir en formato html.

Tipo de HTML

Hay varios tipos de html. Los llamados doctypes son etiquetas al principio del documento que indican el formato del mismo (ver etiquetas doctype).

  • Debemos definir el doctype para ayudar a los buscadores a saber como tratar nuestro html.
  • Debemos hacerlo bien, si elegimos un doctype respetemos su forma de formarse al máximo. Validar no es importante, pero mantener la coherencia en el formato si.
  • Por último, entre los distintos doctypes estandarizados a día de hoy el mejor de todos (por ser el más rastreable por las arañas) es el xhtml 1.1. Es mejor el estricto que transicional pero si eso no es posible el transicional también es muy válido.
  • En breve. Esperemos que no demasiados años, el html 5 será sin duda el mejor doctype posible, pero de momento no podemos pretender llegar a todo el mundo con ese formato.

Composición del documento

Básicamente: hagamos las cosas bien. Nada de frames ni iframes. Nuestro documento debe ser lo más estandarizado posible y puesto que cada url para los buscadores es una unidad de información, cada url debe ser única y contener por si sola toda la información dentro de su html.

Un documento debe constar siempre de head y body y disponer de los contenidos oportunos dentro de cada una de esas etiquetas y siempre dentro de estas. Por ejemplo, hay etiquetas que los navegadores van a admitir fuera del head, pero eso no significa que ese sea su sitio.



- title y metatags
- llamadas a scripts javascript
- llamadas a css
- llamadas a etiquetas link: alternate, cannonical, etc.


- contenido real del documento
- layout y contenidos en html semántico


Definición de la keyword

Hacemos Seo, por lo tanto estamos orientando cada página a posicionarse por una keyword específica. Debemos tener esto en cuenta y poner los medios necesarios para poder acceder a ella en cualquier parte del documento html. Esto va por los programadores: si necesito la keyword en cualquier punto del head, del body o incluso del javascript debo poder disponer de ella.

Contenido del head

La parte más importante del head es la etiqueta «title». En ella incluimos la keyword exacta que posicionamos y en ocasiones alguna coletilla más. No usamos etiquetas html en su interior ni caracteres extraños, esta parte debe poderse tomar sin complicaciones por cualquier robot.

Luego vendrá el trabajo con los metatags para orientarlos a Seo. Muy importante tambien.

Por último una sencilla regla sobre javascript y css: nos interesa disminuir al maximo posible el tamaño y complicación de rastreo de la página. Por ese motivo no debe exisitr nunca javascript o css intrusivo en la página. Nada de etiquetas «script» o «style» abiertas. Un Head debería ser muy, muy limpio y poderse leer directamente en código sin problemas.

Contenido del body: el layout

Las páginas no suelen ser contenidos simples y por tanto el primer paso a dar con ellas es separar el bloques todo el contenido de las mismas: tendremos una cabecera, un menú, una barra lateral, un contenido, uno o más footers. Para organizar estos contenidos en html anterior al 5 existe la etiqueta «div». Esta etiqueta significa algo así como «contenedor» y nos sirve para marcar la diferenciación entre tipos de contenidos.

Un layout típico de página suele ser algo parecido a esto:


	
	

Con una estructura como esta es bastante sencillo para cualquier araña saber que es cada cosa. El contenido de #header y muchas veces el de #footer va permanecer casi invariable en toda la web y nos interesa que las arañas lo entiendan rápido y sepan separar esos 2 contenedores del resto para que le den más prioridad al contenido real de la página.

Evita la «divitis»

Como puede verse el uso de la etiqueta «div» es muy útil. Pero solo si se usa bien. Hay multitud de maquetas que usan la etiqueta div como contendor de cualquier cosa, por pequeña que sea. Si queremos ayudar a las arañas esto no tiene ningún sentido. Recordemos que se trata de un contenedor en cuanto a semántica (agrupación de cosas similares y con misma función) y no una ayuda para que la caja que ha puesto el diseñador sea más fácil de maquetar.

Si no eres maquetador que no te engañen: Un profesional de la maquetación necesita pocas veces un div extra para conseguir el diseño propuesto. El css no es perfecto y en ocasiones hacen falta cosas… Este mismo blog usa un id=»aux-div» para poder conseguir el background del blog pero no necesita anidar continuamente un div tras otro para poder crear cajas y gráficos en ellas.

Si usas este tipo de maquetas solo consigues dos cosas: ponerle la vida más difícil a las arañas y aumentar drásticamente el tamaño de tu página, lo que repercutirá en el tiempo de carga.

Un último apunte sobre esto: entre usar multitud de divs para adecuarse al diseño y usar tablas para maquetar no hay ninguna diferencia. La diferencia se establece al darle significado al html…

Contenido del body: el html semántico

Cada uno de los contenedores del layout debe ahora incluir su contenido. Para ello la mejor opción es usar html semántico (que es el html semantico).

Averiguar que etiqueta usar para cada cosa no es difícil. Una lista usa «ul», un párrafo «p», estilo especial del texto «span». El problema surge a la hora de adaptar eso al diseño…

Y esto es porque algunos maquetadores están acostumbrados a pasar de diseño a html y no al revés. Olvidémonos del diseño para empezar a maquetar: creemos un html correcto que cumpla estos 3 propósitos:

  • Contenga con la semántica correcta cada contenido que aparece en el diseño.
  • Permita al css identificar cualquier elemento por separado: usando los atributos «id» y «class» con sabiduría.
  • No use atributos innecesarios: el css no necesita un id y una clase para todo ya que puede tratarse por etiquetas. No necesito ponerle la class «lista» a todos los elementos «li» de un mismo «ul», con referirme en el css a ellos con «ul#milista li» ya podré darles estilo. Abundar en clases e id’s innecesarios solo consigue hacer más grande y menos legible el documento.

Aprender a maquetar correctamente en html semático lleva tiempo. Pero no es realmente difícil, solo hay que tener interés y coger un poco de práctica al css.

Dale más peso a la keyword aprovechando el html

Sin llegar a la sobreoptimización semántica ni a una densidad de keyword elevada otra de las funciones que debe permitirnos la maqueta es la de resaltar al máximo la keyword a posicionar.

Para ello incluiremos la keyword en la etiqueta «h1» del documento y jugaremos bien con la maquetación de etiquetas h2 y h3. También haremos uso de los típicos trucos para aumentar la densidad de keyword: usaremos bien los textos y titles de los links, etiquetaremos todas las imágenes con sus respectivos alts, y usaremos negritas y repeticiones de la keyword a posicionar.

Usa los microformatos adecuados

Los microformatos son cada vez más importantes y no son difíciles de usar. De echo si nos ceñimos a lo importante son simplemente 4 tipos de contenido: productos, comentarios de productos, reseñas de identidad y noticias que debemos maquetar usando unos nombres de clases concretos y con eso ya habremos ayudado mucho a las arañas más modernas a catalogar nuestro contenido. Recordemos que Google está empezando a mostrar resultados con pequeños añadidos (estrellas, marca del producto, fecha de la noticia) para quienes usan microformatos.

Evita el contenido intrusivo

Como con el head, debemos evitar usar javascript o css en medio del documento:

  • Si necesitamos dar un estilo especial a lo que sea usaremos id’s y clases para identificarlo en el archivo css externo.
  • Si necesitamos asignar eventos onlick, onmouseover, etc. Usaremos librerías javascript (jquery, mootools, prototype, etc.) que nos permitan asignarlos también por id’s y clases

Esto también con la única función de aligerar la carga del html y de asegurarnos de que las arañas rastrean bien el contenido: no las liemos con comillas y largos atributos, todo debe ser claro y directo. Si una persona puede leer fácilmente el html, sabremos que las arañas también lo harán.

Y eso es todo…

Y con «solo» estos detalles habremos conseguido una maqueta perfectamente orientada a SEO… bueno, habremos conseguido una maqueta bien hecha que cumple estándares, lo que es más o menos lo mismo…


3 respuestas a “Guía de Maquetación SEO”

  1. @Iñaki me la has clavado y encima me ha dado gusto, mis felicitaciones, yo que estaba arreglando una de mis web y encima tendré que seguir tus consejos de tu artículo.

Responder a ikhuerta Cancelar la respuesta

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