Consejos de posicionamiento: El marcado HTML

Una de las mayores ventajas de los gestores de contenido en general y de Joomla! en particular, es la facilidad de publicar las noticias para la web, gracias a sus editores de texto visuales. Pero esta facilidad puede ser un factor en nuestra contra de cara al posicionamiento web si no tenemos cuidado y prestamos atención a cómo escribimos los artículos.

A pesar del aspecto familiar de los editores web como JoomlaFCK, cuando escribimos un artículo en nuestro sitio, no estamos redactando un documento en un procesador de textos, sino que estamos escribiendo un sitio en código HTML que tiene que ser legible para un navegador web.

Se podría hablar mucho sobre la necesidad de tener un marcado correcto en nuestros sitios, pero sin duda el argumento de más peso que se le puede dar a un webmaster, es la repercusión en el posicionamiento en los buscadores.

¿Por qué afecta el marcado HTML al posicionamiento?

Para entender cómo afecta el marcado HTML al posicionamiento debemos entender cómo indexan los buscadores un sitio web. Aunque los buscadores no facilitan datos sobre su proceso de registro de los sitios, lo que sí está más o menos claro es que realizan el proceso de forma automática. Los encargados de esta tarea son programas informáticos llamados spiders que rastrean los millones de sitios web sin supervisión. Por tanto una de las primeras cosas que debe llamar nuestra atención es que los buscadores son ciegos a todo el contenido visual (imágenes, vídeos, animaciones en Flash...). De hecho la adaptación de un sitio a discapacitados mejora mucho su posicionamiento.

¿Qué es el marcado HTML?

A la hora de escribir una página con HTML, tenemos muchas formas de obtener el mismo efecto visual. Es más, gracias al uso de los estilos CSS, estas posibilidades se multiplican. Por ejemplo, para escribir un título podemos usar cualquiera de estos códigos:

<H1>Este es mi título</H1>

<div style="font-size: huge; font-weight: bold">Este es mi título</div>

<p style="font-size: huge;"><strong>Este es mi título</strong></p>

Visualmente estos 3 códigos dan el mismo resultado de presentación, no obstante si usáramos un navegador de texto o si fuéramos un programa sin capacidad de ver el efecto visual, estos 3 elementos serían completamente diferentes. En el primer caso se interpretaría como un título, en el segundo caso sería un elemento no específico y el último código diría que es un párrafo de texto.

Editores de código en Joomla!

En Joomla! tenemos la posibilidad de usar editores de texto visuales para escribir nuestros artículos y aunque esto nos facilita mucho las cosas, si no prestamos atención a la configuración de los mismos o a su resultado HTML, podemos perder muchos enteros con respecto al posicionamiento.

Debido a la facilidad y a la potencia de los editores gráficos, muchos redactores escriben sus artículos en un procesador de textos y después copian el resultado a su editor Joomla!. Esto es sin duda una de las peores opciones para redactar un artículo ya que estos editores incluyen una enorme cantidad de código superfluo y en muchos casos poco accesible para conseguir un cierto aspecto visual, y eso perjudica la legibilidad del código. Por tanto es un procedimiento a evitar.

Para asegurarnos de que nuestro editor genera un código HTML adecuado por norma, en muchos editores se pueden configurar algunas opciones que nos permiten modificar su comportamiento. Siempre es una buena idea repasar estas opciones y adecuarlas a los resultados que queremos obtener.

Escribiendo con un buen marcado HTML

El marcado HTML es un primer paso hacia la web semántica en su sentido más amplio, y por tanto no es más complicado que definir una estructura correcta para nuestros documentos. Aquí os dejamos algunas consideraciones que debéis tener en cuenta para escribir un sitio bien marcado:

• Todo título de vuestro documento debe estar incluído entre los tags <Hx></Hx> (donde cambiaremos la x por un número del 1 al 6 según la importancia del título).
• Sólo puede aparecer un elemento <H1> en cada artículo. En este caso además, lo normal es que el elemento <H1> esté contenido en vuestro template y que represente el título de la página, por lo que lo habitual es no usarlo directamente en nuestros artículos.
• Tampoco es habitual usar dentro del artículo elementos <H2> puesto que por orden de importancia estos elementos le corresponden al título del artículo, por lo que no es adecuado su uso para separar secciones del mismo.
• Es una buena práctica separar los párrafos en elementos <P></P>. De este modo vuestro documento tendrá una estructura adecuada separada en párrafos.
• El uso del elemento <BR /> debería estar limitado a los casos especiales dentro de un mismo párrafo.
• El uso de elementos <DIV></DIV> y <SPAN></SPAN> no está prohibido, pero de nuevo no es conveniente usarlos sin justificación. Estas etiquetas se usan para elementos sin categorizar dentro de la estructura del documento.
• Las listas de elementos deben usar los elementos <UL></UL> u <OL></OL>. Si no queremos que se muestren las "balas" de la lista desordenada lo adecuado es usar después un poco de CSS para eliminarlas.
• Es muy importante proveer de un texto alternativo (campo alt) a todas las imágenes que incluyamos en nuestro documento, puesto que es la única forma de que los buscadores entiendan estas imágenes. Aunque no es obligatorio, sí que es bueno también facilitar un título de las mismas en el campo title.

Siguiendo estos consejos, ayudaréis a que los buscadores indexen mucho mejor vuestros sitios y seguro que conseguís aumentar vuestro posicionamiento.