Cada día se hace más difícil optimizar un sitio Web para motores de búsquedas,  se han desarrollado numerosas técnicas con  este objetivo,  muchas de ellas son prácticas no recomendadas pues se basan en técnicas poco éticas. Utilizan las debilidades o huecos de los buscadores.

Las tareas de  optimización  tan sólo se aplica a los contenidos añadidos  a cada página  mientras que la programación se hace totalmente separada sin aprovechar las bondades del lenguaje HTML en tal sentido.

Por ello es importante que  exista una vinculación entre las tareas  de  programación y optimización de contenidos con el objetivo de lograr un  código HTML  lo más amigable posible para los buscadores.

Este esfuerzo se puede revertir al invertir menos dinero y esfuerzo en campañas para lograr  buena visibilidad en los resultados de búsquedas.

¿Cómo ven los motores de búsquedas los sitios?

Una página Web esta dividida en varios elementos: etiquetas HTML, textos, objetos incrustados, enlace a ficheros externos, etc.

Los motores de búsqueda analizan una página Web  mirando ante todo el texto. El texto esta dividido en diferentes áreas, cada una posee pesos diferentes para los motores de búsquedas.

Por ejemplo: el texto  que aparece  como título, en el cuerpo de la página, el texto alternativo de la etiqueta de una imagen, el que aparece como título en los enlaces. Los motores de búsquedas leen todas esas diferentes áreas y  adicionan la página a sus bases de datos.

Validar el HTML

Los motores de búsquedas tienen que analizar el código HTML de  un sitio Web para encontrar el contenido relevante. Sí el código HTML posee errores los motores de búsqueda puede que no sean capaces de encontrar todo en la página.

Los programas de los motores de  búsquedas asimilan al HTML estándar.  Estos  sólo son capaces  de indexar  los sitios que estén acorde a los  estándares del HTML.

En la mayoría de los buscadores más  importantes pueden ocuparse de errores pequeños en el código del HTML, un solo error puede ser la razón para que la página Web no se pueda encontrar en motores de búsqueda.

Maquetear usando CSS en lugar de tablas

Cuando el robot que “rastrea” (ejemplo: Googlebot) una página Web  cuyo montaje esta basado en tablas encuentra varias etiquetas <tr> y  <td> con varios atributos en ellas tales como tamaños de las celdas, ancho, color de fondo entre otras informaciones nada relevantes.

En muchos casos los  robots  ignoran todo esto pero  les hace tomar tiempo para encontrar el  contenido verdadero de la página pudiendo interrumpir el proceso. Un parámetro importante es la relación texto código HTML.

Esto sin contar que numerosas tablas anidadas trae consigo una demora notable en los navegadores Web y trae problemas notables en los lectores de la accesibilidad donde el contenido no tiene ningún sentido ser leído por una herramienta de accesibilidad pues  el  contenido generalmente no sigue el flujo del documento.

En realidad las tablas fueron hechas para tabular datos, de otra manera no se justifica su uso. A continuación se muestra una maqueta muy simple usando la etiqueta <div>:

<div id="container">
     <div id="body">Contenido del documento</div>  
     <div id="head">Contenido de la cabecera</div>
  </div>

Con todo esto se busca separar al máximo el contenido de la forma de presentación, o sea que el robot vea HTML puro. Los robot le dan la importancia al contenido que aparece inmediatamente después de la etiqueta <body>  por lo que usando correctamente CSS el contenido más importante  puede colocarse en esta posición, para ello veamos un ejemplo simplificado:

#container 
  { 
       position: relative;
  }
#body, #head 
  {
        position: absolute;
   }
#body 
  {
       top: 100px; 
  }
#head 
  {
       top: 0px; 
  }

De  manera visual el contenido aparecerá  después de la cabecera, aunque  en el código HTML aparece primero; vemos de esta manera la potencia y la flexibilidad con respecto al uso de tablas.

De la misma forma se pueden mover partes como barras de navegación, cajas de búsquedas e incluso imágenes al final del código sin perder la visualización correcta en el navegador.

Impacto de las  etiquetas HTML en la optimización para motores de búsquedas

Analizando  la estructura lógica de un documento  HTML y el impacto de cada una de la etiquetas  HTML en  términos   de optimización para motores de búsquedas, se presenta la siguiente tabla:

Por tanto se sugiere utilizar un flujo de etiquetas HTML para mostrar el contenido de una página tal como aparece a continuación utilizando encabezados y párrafos:

 <h1>Tópico principal</h1>
      <p>Texto inicial</p>
      <h2>Puntos secundarios</h2>
      <p>Texto relevante</p>

Una o dos  palabras clave colocadas en una etiqueta  <h1> inmediatamente después de que la etiqueta <body> le  da mayor relevancia en  diversos buscadores.

Véase un ejemplo donde el enlace a la página de inicio a través del logotipo del sitio  contiene una palabra clave, el texto no será visible al usuario, pues desaparece usando la propiedad text-indent.

<body>
  <h1><a href="/" title="Regresar a la página principal" accesskey= 	"1">Logotipo del sitio</a></h1>
h1 a  {  display: block;
  width: 100px;
  height: 100px;
  background: transparent url("images/logo.gif") no-repeat;
  text-indent: -1000px; 
           }

Es recomendable poner las imágenes como imágenes de fondo en el fichero CSS así se evita la necesidad de poner la etiqueta <img> en el HTML. Cuanto más simple sea leer el código, será  más eficientemente la página a la vista del robot.

Como norma común para la mayoría de los motores de búsquedas las páginas no deben exceder en tamaño los 100 k para una correcta indexación, teniendo por ideal 5-15 k.

Evitando menús de navegación basados completamente en JavaScript

Resultan  atractivos   los menús  de navegación multiniveles con efectos,  pues hacen más dinámico el sitio sin embargo en muchos casos están implementados completamente con JavaScript; esto trae como consecuencia que los robot no los procesen y  se pierdan los enlaces contenidos en el mismo.

Mediante el uso de  las hojas de estilos  es posible lograr un funcionamiento similar de manera que los enlaces sean amigables a los motores de búsqueda.  Una técnica muy utilizada es el uso de las lista no numeradas en su implementación, tal como aparece en el siguiente ejemplo:

<div id="navigation">
  <h3><a href="#">Categoría 1</a></h3>
    <ul>
      <li><a href="#">Subcategoría 1</a></li> />
      <li><a href="#"> Subcategoría 2</a></li>
   </ul>
  ...
  </div>

 El JavaScript no es comprensible  por los buscadores, tan solo son capaz de sacar algunas URLs en medio del código JavaScript por lo que no se recomienda su uso en tal sentido. Usar el CSS permitirá que utilizar palabras claves con mayor eficacia.

Cuidado con el uso de AJAX

Una poderosa técnica que aumenta las potencialidades de un sitio Web es AJAX, a través de ella se pueden hacer peticiones al servidor sin tener que recargar la página  actual por la nueva, ahora cuando los datos pedidos son contenidos que deberían ser indexados por los buscadores estamos ante un grave problema.

Realmente el  problema  es similar al anteriormente visto pues AJAX es el resultado de una serie de tecnologías dentro de las cuales está JavaScript y  otras como: DOM, CSS y XMLHttpRequest.

Por lo que se sugiere  utilizar AJAX  en aplicaciones  donde los contenidos no tienen gran importancia para los motores de búsquedas, tales como formularios ya sea para  enviar o  validar datos, sugerir criterios de búsquedas, cargar de imagen (galerías de fotos, mapas).

Es una herramienta poderosa para aquellos sitios que brindan la posibilidad de personalización de la página de inicio (ejemplo: Google), interfaz de administración.

Conclusión

Usando adecuadamente  cada etiqueta HTML para mostrar en contenido puede lograrse un código correctamente descrito para los buscadores.

Es importante mantener una relación texto a HTML muy alta por lo que la presentación visual de una página dada por las CSS y los efectos por JavaScript deben estar en ficheros externos pues su contenido es irrelevante a los buscadores.