Técnicas para optimizar código HTML

Técnicas para optimizar código HTML

Una serie de tips, consejos o técnicas para conseguir un código HTML más limpio, más fácil de entender, y más amigable a los motores de búsqueda:

Declarar el DOCTYPE correctamente: Declarar esta parte del código HTML correctamente permite que la página sea valdidada, y adicionalemente le indica a los motores de búsqueda cómo deben mostrar la página web. Algo que una simple etiqueta <html> no consigue.

<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Ubicar un ID para la etiqueta Body: Ubicar un ID para la etiqueta Body permite crear propiedades CSS que sean únicas para una página en particular. Por ejemplo, si yo quiero que la etiqueta H2 sea diferente en mi página principal que en las páginas interiores del sitio, yo puedo definir en el archivo CSS lo siguiente: #home h2 {} para lograr esto y no afectar la forma en la que se visualizan las etiquetas H2 en el resto del sitio.

Ubicar un DIV principal para todo el contenido. Ubicar todo el contenido en un ID principal da un control todal sobre la forma en la que se quiera manejar el aspecto de una página web.

Una sección Head corta: Establecer el título de la página, enlazar los archivos externos al sitio. No empezar a ubicar código innecesario en esta etiqueta.

<head>
<title>Desarrollo y Diseño web en Colombia</title>
<meta http-equiv=”Content-type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”screen, projection” />
</head>

Menú declarado semánticamente:

<div id=”menu” >
<ul>
<li><a href=”index.php” >Home</a></li>
<li><a href=”productos.php” >Productos</a></li>
<li><a href=”contacto.php” >Contacto</a></li>
</ul>
</div>

Si se quiere tener un poco más organizado el código HTML, se puede declarar en un archivo html aparte el menu, e incluirlo en el archivo principal con la función include_once de php:

<?php include_once(“menu.html”) ?>

Ubicar el contenido más importante al inicio. Es recomendable que el contenido html más importante esté primero que el resto del contenido. por ejemplo:

<?php include_once(“noticias_principales.html”) ?>

Uso de CSS y no tablas. El código CSS y el uso de hojas de estilos permite que el código HTML sea más ligero, y más entendible por los motoeres de búsqueda. Adicionalmente, es mucho más sencillo de actualizar y de realizar cambios.
No usar estilos directamente en el código. Se debe hacer uso de una hoja de estilos única y externa al archivo html. Es decir, se debe evitar a toda costa el uso de etiquetas con estilos como por ejemplo: <h1 style=”padding-top:20px;” />.

Uso de las META tags

Muchos buscadores, sobretodo los motores de búsqueda, leen determinadas etiquetas en la página para encontrar la descripción y las palabras clave que se le asocian. Estas son las Etiquetas META, o META Tags.

Es muy recomendable construirlas de manera adecuada, aunque no todos los buscadores hagan uso de ellas. En concreto, los índices no suelen consultar estas etiquetas, ya que extraen esta información generalmente de los formularios que rellenamos para registrar la página.

Las etiquetas META se sitúan en la cabecera del documento HTML, entre las etiquetas <HEAD> y </HEAD>. Como se indico anteriormente, se han de introducir con estas etiquetas tanto la descripción como las palabras clave, cada una con una etiqueta distinta.

La etiqueta META con la descripción tiene esta sintaxis:

Mientras que la etiqueta META con las palabras clave tiene esta otra forma, muy parecida:

Algunas recomendaciones para construir estas etiquetas.

Puede ser parecida al titulo, si cabe un poco más descriptiva y siempre debe ser una frase lógica completamente legible.
El tamaño puede estar entre 150 o 200 caracteres.
No debemos repetir la misma palabra en la descripción, pues pueden pensar que hacemos spam.
No se debe repetir una frase clave.
Una misma palabra no se debe repetir más de 5 veces, en distintas frases claves, se entiende. Esto es debido a que si la repetimos excesivamente el motor de búsqueda puede pensar que estamos haciendo spam. Las palabras como “el”, “de”, “y”, y otras parecidas generalmente no serán tenidas en cuenta por los motores de busqueda, y no pasara nada por repetirlas más de 5 veces.
Las frases clave han de estar separadas por comas. Muchos buscadores tratan a las comas de la misma manera que los espacios en blanco, con lo que si ponemos dos frases clave seguidas que tienen sentido si las leemos como si fuese una, tanto mejor. Conviene, por esto último, que no tengamos dos frases clave con casi las mismas palabras muy próximas entre si.
El tamaño recomendado para el texto con las palabras clave está entre 200 y 400 caracteres. No es problema de todos modos en excederse, pues cada buscador leerá un determinado número de palabras y las del final las desechará. Lo que si es problemático es repetir muchas veces la misma palabra clave, como ya se ha dicho.
La descripción y palabras clave no son las únicas etiquetas META que podemos incluir en una página web, aunque si las más importantes. Otros ejemplos de etiquetas META son el autor de la página, el idioma, email de contacto, etc.

Cómo controlar los enlaces rotos y los errores 404

Uno de los grandes problemas de los sitios, es que al cabo del tiempo se producen migraciones y cambios en los contenidos. Si no se tiene mucho cuidado, al final acaban apareciendo los temidos enlaces rotos y su consiguiente error 404.

Tenemos que ser conscientes que muchos de los enlaces de nuestros sitios, apuntan a páginas o webs externas sobre las que no tenemos ningún control y que pueden cambiar las urls o dominios de manera inesperada.

Tenemos varias formas para tratar de controlarlo:

Utilizar google analytics para detectar y controlar los Errores 404.
Desarrollar una pequeña utilidad o código que cada vez que cargue una página 404 guarde el origen de la visita y el destino que buscábamos.
Utilizar Google WebmasterTools , que nos muestra los errores que se ha encontrado google a la hora de rastrear nuestro contenido.
Utilizar servicios externos. El problema es que dichos servicios son un poco incómodos ya que se debe realizar una revisión manual y la mayoría de ellos tiene límite de enlaces. Entre ellos podemos nombrar http://www.dead-links.com o el W3C Link Checker validador de links de la w3c.
Instalar alguna extensión en firefox que nos permita encontrar dichos errores. Por ejemplo LinkChecker for Firefox (aún no la he probado). Esta extensión colorea automágicamente nuestros enlaces, mostrando los que sean erróneos en rojo.

Por otra parte, podemos crear nuestro propio validador de links utilizando la versión instalable del W3C Link Checker.

La idea es crear una rutina a la que pasarle nuestra url y nos informe de los enlaces rotos que tengamos en nuestra web.

Si automatizamos el proceso, podríamos por ejemplo validar que no publicamos ninguna página con enlaces erróneos.

Webgrafía:

Alexander Villamizar, Técnicas para optimizar código HTML, disponible en: http://www.ingvillamizar.com/tecnicas-para-optimizar-codigo-html/, recuperado el 21 enero 2014.