Cuando los buscadores visitan los sitios web lo único que pueden leer es el código HTML, pero a través de este y mediante el análisis del código fuente, son capaces de determinar el tema de la página y cuáles son los elementos más importantes. Escribir adecuadamente el código HTML facilita este trabajo a los buscadores.

En este capítulo aprenderás:

En este capítulo se abordará la semántica y cómo construir adecuadamente un sitio web por capas. También se tratarán en profundidad los códigos HTML, CSS, JavaScript y Flash.

Para construir una casa se deben seguir los siguientes pasos: se comienza con la estructura, se levantan las paredes de piedra, se pinta y después se añaden las cortinas y toda la decoración interior. Al terminar el trabajo principal se prosigue añadiendo los detalles técnicos como, por ejemplo, una puerta electrónica para el garaje.

Pues bien, cuando se construye un sitio web se siguen estos mismos pasos. Primero se construyen la estructura (el código HTML), después se añade la decoración (CSS) y finalmente se incorporan los aspectos técnicos y las piezas (JavaScript).

Cada una de estas capas tiene su razón de ser; no obstante, es importante asegurarse de que el sitio web será legible, aún si se eliminan todas las capas. Por ejemplo, si alguien accede al sitio web desde su teléfono móvil probablemente no podrá usar las funcionalidades de JavaScript, pero el sitio debe ser visible. Obviamente, esto implica que el usuario no podrá utilizar el menú
desplegable que tanto te costó diseñar, pero sí podrá acceder a las distintas secciones sin problemas. El mismo principio se aplica a las funcionalidades visuales del CSS, por ejemplo, si se utiliza un navegador de texto que no soporta el CSS, o se imprime, el sitio webtambién deberá ser visible y legible.

Las capas se añaden exclusivamente para mejorar la usabilidad, pero en ningún caso deben ser un requisito mínimo para el uso del sitio web. El site tiene que ser legible por el usuario y por los robots de los buscadores.

La capa básica de un sitio web siempre es la estructura, el código HTML; ya que este es el lenguaje que los navegadores necesitan para interpretar una página y hacerla legible para los ususarios. No obstante, el HTML también es el código que analizan los buscadores por lo que es fundamental que todo el sitio web sea de fácil acceso y lectura. En definitiva, para que los buscadores encuentren y clasifiquen un fragmento de contenido del sitio web, deberá incluirse en el HTML.

HTML semántico

El HTML está compuesto por elementos y atributos. Entre los elementos se encuentra el contenido que se muestra en la página web, pero cada elemento HTML tiene un significado diferente que es de vital importancia para la creación del sitio web. Cuando nos referimos a la semántica (unida al HTML), hablamos realmente del significado de los elementos HTML. Cuando cada uno de los elementos HTML se utilizan en correspondencia con la función para la que fueron creados, se dice que el HTML es semánticamente correcto. Obviamente, los buscadores otorgan una gran importancia a un HTML semánticamente correcto y utilizan este código para comprender la jerarquía de los elementos. En aras de comprender mejor qué es el HTML semántico mostraremos a continuación algunos ejemplos y problemas.

Hasta no hace demasiado tiempo, muchos sitios webse programaban con tablas HTML por comodidad de los programadores o desconocimiento, a pesar de que desde el punto de vista del HTMLsemántico y según las especificaciones del W3C ⁹ las tablas deben usarse para mostrar elementos tabulados¹⁰:

”La tabla HTML permite que los autores organicen los datos – contenido, formatear texto, imágenes, enlaces, formularios, campos de formularios, otras tablas, etc. – en filas y columnas de celdas. ”

Esto significa que las tablas han sido creadas para mostrar datos (para poder comprender o comparar los datos), no para crear un menú. Es decir, se pueden utilizar para mostrar, por ejemplo, una reseña de un producto o una lista de precios, pero no para organizar los elementos de la página.

Entonces, ¿cómo se puede mostrar el menú exactamente en la parte inferior a la izquierda del sitio web sin utilizar las tablas? La respuesta es muy sencilla: se pueden usar los códigos HTML div yspan. Con estos elementos, junto con el CSS, se puede ordenar y ubicar cualquier elemento en la página web.

Independientemente del aspecto semántico, existe otra razón por la que se debería usar el elemento div en vez de las tablas: el ahorro de espacio. La cantidad de código que se necesita al utilizar div es mucho menor, lo que proporciona grandes ventajas. Una de ellas es que cuanto menos código se utilice, más rápido podrán rastrear las páginas web los buscadores y más fácil les resultará encontrar el contenido dentro de los elementos. La proporción entre el código y el contenido es un factor a tener en cuenta, no sólo por la rastreabilidad sino que ayuda a mejorar otros factores como la velocidad de carga.

El ejemplo que aparece a continuación muestra cómo se pueden obtener el mismo efecto utilizando el elemento div en vez de tablas. Se muestra un fragmento del código de una plantilla básica con una cabecera y dos columnas situadas debajo de esta. (Ver figura 6-1).

HTML semántico: con div

HTML con tablas

La diferencia entre las tablas y el elemento div, es que las primeras necesitan nueve elementos mientras que con el elemento div se necesitan solo tres. Esto significa un ahorro del 66% en este ejemplo, por lo que en los sitios webmuy extensos y complejos el uso del div puede suponer un ahorro considerable.

Entonces, ¿no se deben usar las tablas? No, el uso de las tablas para conformar la plantilla del sitio web es inadecuado, pero pueden ser útiles para insertar comparaciones de precios, informaciones financieras o cualquier otro tipo de resúmenes de datos (también conocidos como datos tabulados).

El menú de navegación

En ocasiones, las tablas se utilizan para ubicar los diferentes elementos que componen el menú en el lugar adecuado; sin embargo, realmente no deberían utilizarse como un elemento de posición. En su lugar, en el caso del menú, se puede utilizar el elemento HTML ul, que se emplea en las listas no ordenadas; después de todo, un menú es simplemente una lista.

A continuación se muestra un ejemplo que ilustra cuánto se puede ganar con un HTML semánticamente correcto.

HTML de un menú conformado con tablas

<table>

<tr>

<td><a href=»pagina-1.html»>Menú ítem 1</a></td> </tr>

<tr>

<td><a href=»pagina-2.html»>Menú ítem 3</a></td> </tr>

<tr>

<td><a href=»pagina-3.html»>Menú ítem 3</a></td> </tr>

</table>

HTML de un menú conformado como lista

<ul>

<li><a href=»pagina-1.html»>Menú ítem 1</a></li> <li><a href=»pagina-2.html»>Menú ítem 2</a></li> <li><a href=»pagina-3.html»>Menú ítem 3</a></li>

</ul>

Al igual que en el ejemplo mencionado con anterioridad, el HTML semánticamente correcto permite un ahorro de espacio aproximado del 45%. Aún así, no se trata únicamente de ahorrar espacio. Conformar el menú como una lista le permite a los buscadores obtener una visión de grupo mientras que con el uso de las tablas se corre el riesgo de que algunas celdas se pierdan. En fin, se trata de utilizar el código HTML correcto en el lugar adecuado.

Los encabezados (H’s)

En el HTML existen seis elementos para indicar un encabezado, desde h1 hasta h6.Entre estos seis, h1es el más importante y h6 el menos relevante. En esencia, el HTML se estructura de forma parecida a un texto. El título de la página comienza con el Encabezado 1, los sub encabezados se convierten en Encabezado 2, etc. En el HTML, las palabras clave principales se pueden ubicar dentro del elemento h1, las secundarias en los sub encabezados h2, y así consecutivamente.

Errores habituales:

1. Una práctica muy usual que debe evitarse es la creación de los encabezados con el elemento font, ya que en realidad este no le asigna ningún valor al contenido, además es un elemento que no es válido desde HTML4
2. Utilizar el encabezado H1 para el logo o tagline de la web
3. Utilizar los encabezados H3, H4, … en páginas que no tienen Hi y H2.

La estructura del texto

Para estructurar el texto se pueden utlizar diferentes elementos, el más importante es: p, utilizado para indicar los párrafos. Así, para separar los párrafos se recomienda el uso del elemento p y no el clásico br. Desde una perspectiva meramente técnica estos dos elementos de estilo deberían diferenciarse aunque los navegadores comprenden y aceptan el uso de ambos.

Los atributos alt y title

Los buscadores no pueden interpretar el contenido de una imagen¹¹, por lo que para facilitarles su comprensión se utiliza el atributo alt, indica a los buscadores el tema de las imágenes y les ayuda a darle un sentido respecto al contenido de la página.

Un atributo muy similar a alt es el atributo title. Ambos cumplen la misma función pero la diferencia estriba en que el atributo alt solo puede ser utilizado en las imágenes mientras el atributo title puede aplicarse a diferentes elementos. De hecho, se utiliza frecuentemente en los hipervínculos y también se puede usar para crear una pequeña descripción de la página web que se enlaza. Para ejemplificar estas diferencias incluimos la imagen que se muestra a continuación, donde se usa el atributo alt.

<img src=»horizonte-barcelona.jpg» alt=»Horizonte Barcelona»>

En el ejemplo que se muestra debajo el atributo title se ha utilizado en el enlace para aportar más información sobre los contenidos del sitio web al que se enlaza.

<a                                                      title=»analitica                                                             web»

href= «http:/ / www.onetomarket.es/analiticaweb/» >Analítica web</a>

Meta etiquetas

Las etiquetas meta se utilizan en la cabecera de la web (<head>), donde se incluye la información que los navegadores necesitan para interpretar el documento. Los ususarios verán parte de esta información en los resultados de los buscadores la información del head, pero los navegadores y los buscadores la leerán completa y la utilizarán. Para los buscadores la etiqueta meta relevante es: <title>título de la página</title>

El resto de las etiquetas meta no son útiles para SEO en la actualidad, pese a que en el pasado si lo fueron.

Como decíamos en el capítulo anterior, esta etiqueta ofrece una descripción de la página webque mostrarán los buscadores en sus páginas de resultados. Esto no influye directamente en el posicionamiento -no contribuirá a ganar posiciones en los buscadores­, pero ayuda a mejorar el porcentaje de clics en los enlaces de los resultados de búsqueda. En caso de que la página webno tenga meta- description, los buscadores le asignarán al azar una parte del contenido de la misma, por lo que a veces el resultado final puede parecer extraño. Por eso es tan importante escribir una meta- description para cada página del sitio web.

Una buena meta-description incluye una descripción clara de la página web, los términos de búsqueda relevantes y una llamada a la acción. Debe tenerse en cuenta que los buscadores muestran un máximo de 156 caracteres.

Antiguamente los buscadores utilizaban esta etiqueta para decidir cuál era el contenido de la página web y posicionarlas en sus resultados, pero debido al uso indiscriminado de la misma, los buscadores dejaron de otorgarle relevancia.

La etiqueta meta-robots se utiliza para indicarle a los buscadores cómo se deben comportar en una página web: si deben indexar una página, si deben seguir los enlaces o no. Existen cuatro valores posibles: «índex, follow», «índex, nofollow», «noindex, follow» y «noindex, nofollow».

Si no se incluye la etiqueta, se aplica por defecto el valor estándar «index, follow», de manera que los buscadores indexarán automáticamente la página web y seguirán todos los enlaces. Para indicar a los buscadores que sigan los enlaces pero no indexen la página web, se utiliza el valor «noindex, follow». Este último supuesto se puede aplicar en sitios web que tienen múltiples páginas con el objetivo de prevenir el problema del contenido duplicado¹².

En la actualidad es conveniente no utilizar esta meta etiqueta a no ser que se quiera utilizar para que los buscadores no indexen determinada página o no continúen indexando páginas a partir de la página deseada.

La posición del HTML

El HTML no se analiza exclusivamente desde el punto de vista semántico, sino que también está relacionado con la posición de los diferentes elementos dentro del sitio web. Su esencia es muy sencilla: los contenidos más importantes deben colocarse en los lugares más altos del código. Esto significa que la cabecera y el texto se sitúan en la parte superior, mientras que el código para el menú y las barras laterales se colocan debajo. En caso de que se utilicen tablas no se podrá organizar de esta forma el sitio web, habrá que hacerlo con CSS a no ser que se desee insertar una tabla de datos o información comparativa.