Optimizando tu HTML (2)

Las etiquetas de cabecera

La mayoría de los buscadores valoran más y colocan más alto en el ranking a las páginas con HTML mejor programado. Una de las etiquetas que aportan a esto son las de cabecera o head tags ya que los buscadores dan mucha importancia al texto que escribimos entre estas etiquetas.

Es importante no abusar del uso de ellas, por aquello de que se nos penalice en los buscadores. Es conveniente destinar la etiqueta <H1> al texto más importante de nuestras páginas y reservar <H2> y <H3> para título de secciones u otras frases a destacar.

Por lo general estas etiquetas no tienen un aspecto visual de elegancia. Utilicemos las hojas de estilos CSS para proveerlas de un formato visual que se ajuste a la apariencia de nuestro sitio.

La propiedad ALT en las etiquetas de imágenes

Una buena práctica en cuando a accesibilidad y posicionamiento es definir siempre la propiedad ALT de las etiquetas de imágenes. Los buscadores no pueden ver el contenido de nuestras imágenes, ni el texto que tengamos en ellas; es por esto siempre intentarán leer esta propiedad a modo de interpretar el contenido de nuestra imagen.

Esta propiedad también es importante para los usuarios que omiten las imágenes en sus navegadores o para personas con problemas visuales que utilizan navegadores destinados específicamente para ellos, que leen en voz alta el contenido de las páginas.

Este tipo de navegadores leen la propiedad ALT cuando aparecen imágenes en las páginas, definiendo claramente esta propiedad estaremos dando la posibilidad de que estas personas tengan una idea de la imagen que estamos mostrando.

El texto de los enlaces

Los enlaces son los reyes del posicionamiento. La mayoría de los buscadores basan la popularidad de una web en la cantidad de enlaces que tenga apuntando hacia ella, y utilizan como palabras claves las que contengan este enlace.

Es por esto que debemos construirlos de la mejor forma posible para lograr buenas posiciones en los buscadores. Es recomendable no usar la dirección del enlace en el texto de éste, sino mostrar un texto que describa con buenas palabras claves hacia dónde estamos enlazando. Algo así como esto:

<a href=”http://www.maestrosdelweb.com”>El punto de encuentro para desarrolladores web</a>

También es importante definir en las etiquetas de enlace la propiedad TITLE, ya que los buscadores también indexarán este contenido. Además, ayudará a tener una mejor idea del enlace a personas con problemas visuales que utilicen navegadores destinado para este fin, como comentaba en párrafos anteriores.

CSS en lugar de tablas

Un aspecto importante y que se ha difundido bastante en los últimos tiempos es el uso de etiquetas DIV en lugar de tablas y mediante el uso de hojas de estilo lograr una apariencia similar. Esta práctica tiene muchas ventajas entre las que podemos destacar:

• Se escribe un código HTML más limpio y menos pesado cuando nuestras páginas no contienen tablas, ya que para estas debemos definir varios TR y TD con las correspondientes propiedades de cada una de ellas, algo que no es necesario utilizando DIV. Escribimos menos código y hacemos más liviano nuestro HTML.
• Los motores de búsqueda indexan más fácil y rápidamente nuestras páginas. En las tablas estos se demoran más porque deben leer todas las etiquetas TR y TD con sus respectivas propiedades. Si se interrumpe el proceso de indexación por cualquier motivo todas las páginas de nuestro sitio no se mostrará en los buscadores. Como comentaba en otro tema, los buscadores posicionan más alto en el ranking a páginas con HTML más limpio y legible.
• Para los navegadores tiene un mayor costo leer y dibujar una tabla que un DIV, si a esto le sumamos que hay sitios que tienen en sus páginas muchas tablas y algunas de ellas anidadas, esto provoca una demora notable en la carga de la página, y trae consigo mayor uso de recursos por parte del navegador.
• Utilizando DIV en lugar de tablas y hojas de estilo separamos el contenido de la página de su presentación. De esta forma tenemos la posibilidad de lograr un cambio de apariencia radical en nuestro sitio con solo realizar algunas modificaciones en el archivo CSS.

Usuarios que han visto este tema también han visto...

- Listas y Menús con HTML
- Personalizar el Icono de Favoritos
- Poner sonido o música de fondo
- Todo lo que debemos saber de los Meta-Tags
- Comentarios Condicionales de IE con HTML

- Versión imprimible de este documento

- Enviar por e-mail este documento