Estás en Inicio / Editorial / Desarrollo Web

24.01.2008

Optimizando tu HTML

Por Reynier Matos Padilla | 3,387 Lecturas
Archivado en: Desarrollo Web, XHTML

Las principales aspiraciones de todos los administradores de sitios son: que su web esté completamente indexada en los buscadores más populares y que se encuentre posicionada entre los primeros lugares en los resultados de búsquedas. En este artículo trataremos algunos aspectos importantes que debemos tener en cuenta en el diseño del HTML de nuestras páginas para lograr esto.

Validación del HTML

Los buscadores indexan el contenido de nuestras páginas a través de motores de búsqueda que funcionan de forma similar al navegador que utilizamos en nuestro ordenador (Firefox, Opera, Internet Explorer, Safari, etc.).

El primer aspecto a tener en cuenta para lograr que los robots exploren completamente nuestros sitios es facilitarles el trabajo. Esto lo podemos lograr validando nuestro HTML con el Validador de código HTML que implementa en su sitio el consorcio W3C, encargado de establecer estándares web.

Logrando que nuestro HTML cumpla con los estándares estaremos dando el primer paso de optimización de código. Con esto no solo le facilitamos la exploración a los robots de los buscadores; también estaremos garantizando que el sitio se visualice de forma correcta en todos los navegadores para los usuarios que nos visiten.

La etiqueta de título

Probablemente sea ésta la etiqueta de más importancia de una página en cuanto a posicionamiento web. Ella ofrece al visitante una descripción de la página donde está ubicado; se muestra en la barra de título de los navegadores y también es este título el que aparece en la primera línea de los resultados de búsquedas.

Para la optimización del sitio y lograr atraer al visitante el título debe ser una frase llamativa, bien redactada con palabras claves de peso, que describa de forma precisa el contenido de la página. Algo que se puede ver en algunos sitios de Internet es que todas las páginas llevan el mismo título.

Un sitio con esta característica no explica al visitante sobre el contenido de las páginas, además no muestra al robot de indexación el tema principal de éstas. Para evitar esto debemos colocar a cada página un título que describa de forma clara el contenido de ella. En el caso de las empresas, en vez del nombre se deben colocar los productos o servicios que oferta, la localidad, etc.

La etiqueta meta de palabras claves

Hace unos años la etiqueta meta keywords se consideraba el factor más importante a tener en cuenta por los motores de búsqueda. Aunque su importancia hoy ha decaído en los buscadores más populares, siempre vale la pena optimizarlo para el resto de los buscadores que todavía lo utilizan.

Un error que se observa con frecuencia es la colocación de las mismas palabras claves en la etiqueta de cada página del sitio. Deberíamos utilizar palabras que describan el contenido de cada página independientemente. También debemos tener en cuenta que la cantidad de palabras a colocar en esta etiqueta es limitada, por lo que es recomendable usar de entre ocho y doce palabras por páginas.

En el caso de la forma de separar las palabras claves de esta etiqueta: es una buena práctica separar las palabras por espacios. Con esto damos la posibilidad al buscador de crear varias frases combinando las palabras que hemos escrito; además que podremos obtener más combinaciones con menos palabras.

La etiqueta meta de descripción

Esta etiqueta, como la de palabras claves keywords ha perdido protagonismo en los motores de búsqueda, aunque aún tiene influencia en los buscadores, ya que muchos emplean este texto como descripción de nuestra página o del sitio.

La meta etiqueta description no debe contener la misma frase que hemos colocado en la de título y en las palabras claves. Debemos tener en cuenta que los buscadores no mostrarán más de 250 caracteres en esta etiqueta, por lo que su redacción debe ser corta y precisa.

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.

Cuidado con el uso excesivo del javascript

Los navegadores por lo general no interpretan el contenido del código javascript en nuestras páginas. Esto es algo que debemos tener en cuenta a la hora de desarrollar un sitio, sobretodo para el diseño de los menús de navegación, que generalmente son el “índice” de nuestros sitios.

Con menús javascript podemos lograr una apariencia magnífica en estos, implementarles efectos, sombras, imágenes, etc. Pero tiene la desventaja de que los enlaces en éstos no serán indexados por los motores de búsqueda. Por lo que es más recomendable construir menús utilizando listas desordenadas y diseñar su apariencia con hojas de estilo. He aquí un ejemplo de un menú como el que recomendamos:

<div id="pie_accesos_editorial">
	<strong>Editorial</strong>
	<ul>
		<li><a href="/editorial/" title="Todos los editoriales">Todos los editoriales</a></li>
		<li><a href="/leido/" title="Lo más leido">Lo más leido</a></li>
		<li><a href="/comentado/" title="Lo más comentado">Lo más comentado</a></li>
		<li><a href="/editorial/aspectos-tecnicos/" title="Notas de Aspectos Técnicos (dominios, hosting, optimización y seguridad)">Aspectos técnicos</a></li>
		<li><a href="/editorial/desarrollo-web/" title="Notas de Desarrollo Web (ajax, bases de datos, css, estándares, php, xhtml, ...)">Desarrollo Web</a></li>
		<li><a href="/editorial/c-diseno/" title="Notas de Diseño (accesibilidad, maquetación, usabilidad)">Diseño</a></li>
		<li><a href="/editorial/negocios/" title="Notas de Negocios (eBusiness, Marketing, SEO)">Negocios</a></li>			<li><a href="/principiantes/" title="Notas para principiantes">Principiantes</a></li>
		<li><a href="/editorial/sitios/" title="Navegando por sitios Web">Navegando</a></li>
		<li><a href="/editorial/semblanza/" title="Semblanzas de personajes destacados">Semblanza</a></li>
		<li><a href="/sitio/colaborar/" title="Enviar colaboración">Enviar colaboración</a></li>
	</ul>
</div>

Debemos emplear javascript y AJAX en páginas donde verdaderamente son de mucha utilidad y en las que no sea interés nuestro que se indexen en los buscadores, como por ejemplo páginas de inicio de sesión, formularios de contacto, etc.

Accesibilidad y usabilidad

Es muy importante para nuestros sitios que sean indexados por los buscadores y permanecer en las primeras posiciones; pero en nuestra contienda en la optimización del HTML no debemos descuidar aspectos tan importantes como el contenido, la apariencia, la accesibilidad y usabilidad de nuestras páginas.

Porque de nada nos servirá permanecer en los primeros lugares del ranking si los visitantes al entrar en nuestras páginas no se sienten a gusto, no la entienden o se pierden al navegar entre ellas. Debemos mantener un equilibrio entre todos estos aspectos y no olvidar que nuestro compromiso es con el usuario que nos visita.

Califica esta nota:

(10 votos, promedio: 4.3 de 5)

 Loading ...

Sobre el autor

Reynier Matos Padilla
Administrador de sistemas y diseñador web. Con experiencias en tecnologías ASP.NET, PHP, Javascript, CSS, DHTML, AJAX, servicios web, y XML.

• Todos los editoriales
• Lo más leido
• Lo más comentado
• Aspectos técnicos
• Desarrollo Web
• Diseño
• Negocios
• Principiantes
• Navegando
• Semblanza
• Enviar colaboración

• Todas las notas
• Eventos
• Enviar colaboración

• Por países
• Por temática
• Sugerir empresa

• Todos los foros
• Últimos temas
• Diseño web
• Programación web
• Negocios web
• Temas generales
• Compartiendo
• Admistrando sitios
• Seguridad y Redes
• Archivo

• Acerca de
• Nuestras conferencias
• Preguntas frecuentes
• Créditos
• Contacto
• Política de Privacidad

• Suscribirse
• Archivo de boletines

• AmigoMensajero
• Buscahost
• DesarrolloWeb
• Cristalab
• Infospyware
• Programación
• Webestilo
• Webexperto
• Webtaller