Blog de la Web

En los post anteriores escribí sobre los muchos de los elementos que tienen peso a la hora de que los buscadores juzguen nuestra web para posicionarlas en los rankings, todavía falta bastante para ver y aprender en este mundo del posicionamiento natural para buscadores. Ahora las toca leer un poco sobre el codigo HTML, o mejor dicho de optimizar el codigo HTML de sus webs para los motores de busquedas.

Por supuesto que no voy a dar un curso de HTML en este articulo, lo que haré sera brindar datos claves para que aprendan, y si necesitan mas instrucciones pueden darse una vuelta por el curso de HTML y CSS en el cual se aprende como diseñar una pagina web.

HTML validado por la W3C

Bueno, en general se cree falsamente que por tener una pagina con codigo valido entonces se tiene una pagina amigable para los buscadores, esto es en cierta parte cierto pero no es toda la verdad. LA validacion de la web por medio del validador de la w3C, nos cubren pautas minimas en cuanto al si la estructura del HTML es correcta. Si bien tener un HTML correcto ayuda un poco al posicionamiento, la verdad es que lo que ayuda al posicionamiento es utilizar los elementos correctos en los lugares que tienen que ir. A ver si me puedo explicar mejor.

El HTML es un lenguaje de Etiquetas, Este lenguaje esta diseñado para que los navegadores lo interpreten y armen las paginas webs. Quienes crearon el lenguaje crearon distintas clases de etiquetas, por ejemplo etiquetas para los títulos (h1, h2, h3, …, h6), etiquetas para los enlaces (a), etiquetas para las imágenes (img), etiqueta para los párrafos (p), Etiquetas para resaltar con negrita (strong), etiquetas para maquetar las webs (Divs, Span), etiquetas para listas (ul, ol, li) y muchas mas. Esto significa que cada cosa que tiene la web tiene algo que es mas correcto de usar dependiendo que es lo que es. Ja hice un trabalenguas.

La validación del HTML, nos sirve perfectamente para saber si incluimos elementos obsoletos (como por ejemplo los frames), para saber si cerramos correctamente los elementos ( por ejemplo si pusimos un <p> y quizás nos olvidamos de cerrarlo) y algunas cosas mas. Pero nada nos dice si por ejemplo los títulos los colocamos dentro de un div (cuando existe una etiqueta diseñada para los títulos).

Un correcto armado de web, que permitirá a los motores de búsqueda evaluar correctamente las paginas, tiene que tener una estructura de html que permita diferenciar un simple subtitulo del titulo de la web por ejemplo, o que le haga saber al buscador de que estamos hablando de un menú o una lista de opciones,o que le permita saber que resaltamos un texto (etiqueta strong). Y aquí es donde entra el tema de la semántica de la web.

Semántica Web

Imagínese que van y compran un diario, y cuando se ponen a leer, todo el texto tiene el mismo tamaño. Nada esta diferenciado, el titulo con el mismo tamaño que el resumen y el texto de las noticias. Seria algo muy difícil de leer. Porque todo parecería tener la misma importancia. Esto mismo pasa si no utilizamos los elementos correctos en la web, obtenemos un HTML en el que todo es lo mismo.

Algo muy útil para poder ver si una web esta correctamente maquetada es analizar la web sin NADA de CSS. Es decir quitarle todos los elementos que le dan color, tamaño y orden a las cosas. ¿Porque hacer esto? porque así es como analizan las paginas los motores de búsqueda!. Personalmente, yo cada vez que diseño una pagina web, siempre creo el HTML sin css y luego empiezo a darles estilo, porque esto me hace ver que las cosas importantes resalten en la pagina, y después viene el “maquillaje”. Otra forma de ver como esta hecha la pagina es utilizar la barra WebDeveloper para quitar el css de la pagina (yendo al menú CSS, luego desactivar estilos y dar a la opción Todos los estilos, o mas fácil ctrl+shift+s) y otra todavía mejor es navegar la web con el navegador lynx (navegador web solo de texto que viene nativamente en linux/unix), que es el que utilizar google para analizar la web.

Tips para escribir HTML con una semantica correcta:

• Para los titulos utilizar h1, h2, h3, h4, h5, h6 segun sea un titulo importante, los subtitulos y la importancia de los mismos.
• Para los parrafos utilizar la etiqueta P y cuando resaltamos algun texto en negrita utilizar la etiqueta strong (no usar un span, que muchisima gente lo hace)
• Para los menues y listas de cosas utilizar ul, li
• Tratar de evitar utilizar tablas en las maquetaciones, aunque esto no es tan relevante tampoco.
• No sumarse a la divmania, poniendole a todo div’s, las paginas correctamente maquetadas utilizan los divs solo cuando son necesarios.
• Los parrafos separados son elementos p separados, tratar de evitar los <br />, porque si lo piensan un poco carece de sentido.
• Las imagenes deben llevar el atributo alt que describa la imagen
• Utilizar Reemplazo de texto por imagen si necesitamos colocar imagenes de titulos.
• Olvidarse de utilizar Frames
• Los enlaces tienen que ser enlaces en HTML, no utilizar eventos de javascript para los enlaces (se puede poner javascript pero siempre que el elemento sea un enlace, es decir, si desactivas el javascript o si no tenes soporte el enlace debe funcionar igual).
• Estructurar la pagina de forma correcta de general a particular, y procurar que la web sea facil de usar para las personas, de esta forma nos aseguramos que la pagina sera facil de leer tambien para los buscadores.
• URLs, titulos y meta-description, coherentes con el contenido de la pagina.

Estos son algunos tips basicos para realizar una correcta semantica web.

En resumen como dije mas arriba, si uno respeta todas estas cosas, entonces se asegurara de que los motores de busqueda esten leyendo e interpretando la web, como debe ser. Interprentado titulos como titulos, parrafos como parrafos y asi con cada elemento. Recomiendo si se puede que si van a desarrollar una web, comiencen escribiendo el HTML y luego le dan la pinta con el CSS, de esta forma antes de comenzar a estilizar la pagina sabran que partes de la pagina se ven mas importantes o mejor dicho son mas importante, y podran corregir la semantica antes de comenzar!.

Bueno esto es todo con respecto a la semantica de la web por el momento!. Espero que haya sido util este articulo y nos vemos en la proxima!

Siguiente Lección >>

<< Volver al Indice del Curso