Unidad 7
Introducción a la optimización del código HTML para mejorar el posicionamiento
La tendencia actual es crear sitios web utilizando gestores de contenidos disponibles online, frente al uso de editores offline de HTML los cuales se van dedicando a sedes web con características muy específicas o para casos en los que se necesita un control más preciso del código HTML/CSS.
El uso de gestores tiene una serie de ventajas, como la facilidad de uso y la posibilidad de usarlo en cualquier ordenador, sin necesidad de instalar ningún programa.
El inconveniente es la pérdida de control en la generación del código HTML/CSS. El gestor se encarga de todo y no siempre lo hace bien, tan solo hay que usar un validador de HTML para comprobar que el código generado por gestores como Drupal o WordPress contiene muchos errores de sintaxis.
En la mayoría de ocasiones hay que confiar siempre que el gestor lo hará bien y que el código creado estará optimizado para los buscadores. Además algunos gestores incorporan Widgets de SEO que facilitan las tareas de optimización y gestionan un código más eficiente.
Una situación parecida se produce cuando creamos páginas usando un editor wysiwyg (DreamWeaver, Amaya o Kompozer). El código se genera automáticamente, pero en este caso, existe más margen de actuación ya que podemos editar directamente el código y corregir deficiencias.
Hay mucha información que se escapa a un motor de búsqueda, como por ejemplo: gráficos, sonido, vídeos, texto o enlaces generados javascript. El posicionamiento debe basarse en aquella parte del código en que los spiders de los buscadores son capaces de extraer y procesar y que básicamente está formada por etiquetas HTML y texto.
Ya hemos aprendido que para estar bien posicionado es importante que la página sea encontrada por el buscador, pero más importante es que el buscador entienda bien la página, revise sin dificultad su contenido y pueda acceder a todas las páginas de una web a través de los enlaces que va encontrando. Para ello es necesario implementar las páginas con un código sin errores y con algunas características adicionales que faciliten su procesamiento. El código puede ser correcto, pero si es demasiado complejo y excesivamente largo, los spiders tendrán dificultades.
Existen una serie de principios para optimizar el código para el posicionamiento:
-
Evitar javascript, el lenguaje de programación que aparece insertado en el código de una página web. Los spiders entienden solo el código HTML, que es un lenguaje de marcado de documentos, javascript es un lenguaje de programación que sirve para programar. Dentro de una página web coexisten varios elementos: el código para marcar el documento que indica cómo deberá ser mostrado; el código javascript que soporta interacciones complejas o para proporcionar elementos avanzados que no puede generar HTML; el texto del documento. En relación con los javascript debemos recordar: que hay que intentar evitarlo en lo posible; que no soporte elementos importantes, en especial enlaces; que esté en un fichero aparte y no insertado en el código HTML, reduciendo el peso de la página; y finalmente, si contiene enlaces deberemos proporcionar una vía alternativa para que el spider pueda acceder a las páginas que apuntan estos enlaces javascript (mapas).
-
Hojas de estilo. Las hojas de estilo en cascada (CSS) son un lenguaje de marcas complementario al HTML que permite definir la presentación del documento codificado en HTML de forma independiente al contenido. Su normalización corre a cargo del W3C que es un consorcio sin ánimo de lucro formado por compañías internacionales que se encarga del desarrollo y promoción de estándares para la Web para asegurar su funcionalidad, como por ejemplo HTML y CSS. Las principales ventajas de las CSS son las siguientes: código menos pesado, más comprensible, más fácil y rápido de usar; permiten facilitar el procesamiento de una página por parte de los spiders de buscadores, porque se puede reducir el peso del fichero hasta un 60% y se consigue un código más sencillo, evitando tablas y etiquetas FONT, lo que conduce al llamado “código semántico”.
-
Errores de sintaxis. Una de las formas para mejorar la calidad del código de las páginas web es el desarrollo de dos evaluadores de la calidad del código, uno para el lenguaje HTML (validadores) y el otro para las hojas de estilo CSS. Los errores de código son una barrera para los spiders, que pueden implicar que el contenido de una página no sea indexado o que los enlaces no sean analizados y por tanto, una parte de nuestra web no esté presente en el buscador. Las hojas de estilo tampoco están exentas de errores y existen validadores específicos que analizan de forma global el código de una página, incluyendo ambos lenguajes: HTML y CSS.
-
Mención de validación. Con esta mención, el usuario que consulta la página sabrá que la calidad de la implementación de la página es alta y por tanto permite ofrecer una imagen de seriedad. El icono de la mención de validación puede tener además un enlace que permita al usuario acceder a la herramienta en cuestión. A veces, este acceso es directo a la página de resultados del análisis de esa página de forma que el usuario puede constatar que realmente no hay errores y el autor de la página puede confirmar, que la ausencia de errores se mantiene cuando se realiza algún cambio. No siempre es fácil construir una página sin errores en varios validadores al mismo tiempo, porque cuando se corrigen los errores localizados con una de las herramientas se generan errores para las otras.
Iconos de la mención de validación
-
Etiquetas obsoletas. La evolución del lenguaje HTML y la aparición de las CSS han llevado a que la W3C haya propuesto la eliminación de etiquetas obsoletas o al menos sustituirlas por otros fragmentos de código mejor optimizados, como forma de conseguir un código limpio y liviano.
Existen algunos aspectos complementarios a la optimización del código como los analizadores de enlaces, que pueden ser de dos tipos: uno, los que analizan los enlaces salientes, o sea los que están presentes en la página analizada, para determinar si alguno de ellos está roto para proceder a su revisión y, otro, los que evalúan los enlaces entrantes, o sea los enlaces presentes en alguna página de Internet que apunta a la página analizada.
Además, existen algunas etiquetas especialmente importantes para obtener buenos resultados en el posicionamiento como TITLE, META, ALT, STRONG…
Podemos concluir que la clave para optimizar el código (X)HTML en el contexto del posicionamiento, está en proporcionar un código sencillo y poco pesado y para ello hay que incluir las hojas de estilo en una página web, sin cambiar ni una coma del contenido.