Nota sobre la evaluación: de forma intercalada en el texto de este artículo encontrará el enunciado de diversas actividades. Para superar esta unidad didáctica deberá realizar estas actividades redactando un informe en el que se incluyan comentarios y, en caso que sea pertinente, una captura de pantalla de cada actividad para ilustrar su realización. Para entregar este informe deberá crear un solo documento para todos las actividades de esta unidad didáctica en formato OpenOffice o Word y de un máximo de 500 Kb. A continuación podrá usar la página de entrega y notificación perteneciente a esta unidad didáctica. La realización de forma satisfactoria de este ejercicio implicará la obtención de 0,75 créditos.

1. Introducción

Un motor de búsqueda no "ve" las páginas web como los humanos. Hay mucha información que se le escapa, como por ejemplo:

Gráficos
Sonido
Videos
Texto o enlaces generados por javascript
Flash

El posicionamiento deberá basarse en aquella parte del código lo que los spiders de los buscadores son capaces de extraer y procesar y que básicamente está formado por:

Etiquetas HTML
Texto

Una página visualmente muy atractiva puede resultar un fracaso en posicionamiento debido a una falta de la optimización del código interno. Esto no significa que para estar bien posicionado no puedan crearse webs bonitas, el buen diseño no está reñido con la buena implementación.

Para estar bien posicionado es importante que la página sea encontrada por el motor de búsqueda, pero más importante es que el motor entienda bien la página, revise sin dificultad su contenido y pueda acceder a todas páginas de nuestra propia web a través de los enlaces que va encontrando.

Para alcanzar este objetivo es muy importante 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.

A menudo los editores WYSIWYG generan mucho más código del necesario. Normalmente es código sintácticamente correcto, pero muy muy voluminoso. Por tanto, no estará de más revisar el código de las páginas que genera nuestro editor favorito para rectificar el código generado ya sea de forma manual o automáticamente.

Actividad 1

Haga algunas pruebas con el programa freeware WebOverdrive que permite optimizar y comprimir el código HTML de una página Web.

Descargue el fichero de instalación de WebOverDrive
Ejecute el fichero setup.exe para instalar el programa
Elija cualquier página de Internet
Descargue esta página en su disco duro (Menú archivo + Guardar como)
Comprima y optimice la página descargada con WebOverdrive
Analice el resultado. ¿Se ha reducido el tamaño? ¿El código es mas o menos legible para los humanos?

De forma optativa puede revisar las opciones de configuración de este programa y hacer distintas pruebas.

2. Principios de un código optimizado

Los principios para optimizar el código para el posicionamiento son los siguientes:

Evitar javascript, en especial en los enlaces
Trabajar con hojas de estilo evitando tablas y etiquetas font
Evitar los errores de sintaxis, adecuando el código a los estándares y validándolo con herramientas oficiales
Evitar etiquetas absoletas

En definitiva, código sencillo y corto

2.1. Evitar javascript

Javascript es un 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. Una página necesita obligatoriamente del código HTML, en cambio los elementos soportados en javascript son un complementos de los cuales generalmente se puede prescindir.

Dentro de una página web coexisten, entre otros, los elementos siguientes:

El código para marcar el documento que indica como deberá ser mostrado
El código javascript que generalmente soporta interacciones complejas o para proporcionar elementos avanzados que no puede generar HTML.
El texto del documento

Los spiders normalmente se saltan el código javascript. Esto no tendrá mayor importancia si se trata de un elemento interactivo sin contenido, pero será un problema si el guión o programa javascript contiene texto o enlaces porque los spiders no lo procesarán.

Las recordaciones con relación a javascript son las siguientes:

Intentar evitarlo en lo posible
Que no soporte elementos importantes, en especial enlaces
Que esté un fichero aparte y no insertado en el código HTML, de este modo se reduce el peso de la página
Si contiene enlaces deberemos proporcionar una vía alternativa para que el spider pueda acceder las páginas que apuntan estos enlaces javascript. Por ejemplo, a menudo los menús desplegables o los mapas de navegación son soportados con javascript. Es importante proporcionar el mismo listado de enlaces que contienen estos mapas o menús javascript pero con HTML.

Actividad 2

Abra la página Web actividad 2
Compruebe si los dos enlaces que contienen son idénticos desde la perspectiva del usuario. Un spider podría seguir el segundo pero no el primero.
Visualice el código fuente para ver las diferencias y localizar el enlace suportado con javascript (menú ver + código fuente)

2.2. Hojas de estilo

La World Wide Web Consortium (W3C) es una consorcio sin ánimo de lucro formado por compañías internacionales que se encarga del desarrollo y la promoción de estándares para la Web para asegurar su funcionalidad, como por ejemplo HTML y CSS.

Las hojas de estilo en cascada (Cascading Style Sheets, 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.

Es interesante remarcar que la aparición de las CSS fue posterior a la de HTML. En las últimas versiones del HTML, llamado XHTML, W3C incluye las hojas de estilo de forma obligatoria recomendando la eliminación de algunos elementos anteriores que mezclaban la presentación con el contenido. Esta evolución ha generado que en este momento convivan en Internet páginas con y sin hojas de estilo.

Hasta la aparición de las CSS el código contenía de forma mezclada etiquetas para indicar la estructura y etiquetas para indicar la presentación. Este tipo de código tenía un grave inconveniente para su actualización. Si en un momento dato se quería modificar algún elemento de la presentación, por ejemplo los títulos, se tenía que revisar y modificar todas las páginas de la sede Web. Con las CSS se evita esta situación, con la modificación de un solo fichero se modifica el aspecto de toda la web ya que las indicaciones sobre como mostrar cada elemento de la página están en un solo fichero.

Las principales ventajas de las CSS son las siguientes:

Código menos pesado
Código más comprensible
Código más fácil y rápido de actualizar

No trataremos con detalle las CSS puesto que no es el objetivo de esta unidad didáctica. No obstante, hay que remarcar que las hojas de estilos son uno de los elementos más importantes para la optimización del código en el posicionamiento. Con las hojas de estilo se alcanzan dos objetivos que permiten facilitar el procesamiento de una página por parte de los spiders de buscadores:

Se puede reducir el peso del fichero hasta en un 60%
Se consigue un código más sencillo, evitando tablas y etiquetas FONT

Algunos autores han llamado a esta simplificación "código semántico", un ejemplo permitirá mostrar hasta que punto son eficientes las CSS:

Fuente: Eight Critical Tips for On-Site Search Engine Optimization

http://www.oman3d.com/tutorials/seo/on_site/

Los dos fragmentos de código generan el mismo fragmento de página web. El primero con HTML y basado en etiquetas font y el segundo con hojas de estilo y basado en etiquetas Hn y P.

Los etiquetas que quedan eliminados con las hojas de estilo son los siguientes:

Las etiquetas TABLE, TR y TD que generan tablas con funciones de maquetación
Las etiquetas FONT para indicar tipo de letra

Actividad 3

Abra las siguientes páginas (actividad3a y actividad3b) que tienen el mismo contenido y formato, pero la primera generada con etiquetas Hn, P y hojas de estilo y la segunda con etiquetas FONT B y P.
A continuación use la opción de mostrar código del navegador (menú ver + código fuente) y analice hasta que punto se ha reducido el número de caracteres en el segundo fichero con relación al primero

Para contar el número de caracteres copie y pegue el código en un documento Word usando el menú herramientas + contar palabras

2.3. Errores de sintaxis

Una de las medidas tomadas por W3C 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 y el otro para las hojas de estilo CSS.

Los evaluadores de la calidad del código suelen denominarse "validadores". Existen muchos servicios para la evaluación de la calidad del código desarrollados por empresas o organizaciones. Algunos de ellos ofrecen características adicionales interesantes, no obstante, es preferible usar el servicio desarrollado por W3C puesto que es la misma organización que desarrolla y estandariza el código analizado. Por otra parte, si una página web supera el análisis de un analizador, el webmaster puede añadir la mención de esta circunstancia en su página, con lo que el futuro usuario sabrá que está consultando una página segura. En este contexto, es mucho mejor mencionar al validador de W3C. Por tanto, nuestra recomendación es usar a los otros evaluadores de código de forma complementaria al de W3C.

Los errores de codigo son una barrera para los spiders que puede 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.

Actividad 4

Visite los siguientes validadores analizando en todos ellos la misma página, a continuación compare las prestaciones del validador del W3C con uno de los desarrollados por otra institución.

W3C Markup Validation Service v 0.7.3 http://validator.w3.org/

Dr. Watson http://watson.addy.com

Total Validator http://www.totalvalidator.com

SFSU Weblint Gateway http://www.sfsu.edu/training/weblint.html

WDG HTML Validator http://www.htmlhelp.com/tools/validator/

Las hojas de estilo tampoco están exentas de errores y por tanto existen validadores específicos de hojas de estilo, o validadores que analizan de forma global el código de una página incluyendo ambos lenguajes: HTML y CSS

Actividad 5

Analice una página que contenga hojas de estilo con el validador del W3C. Observe los resultados.

W3C Servicio de Validación de CSS http://jigsaw.w3.org/css-validator/

2.4. Mención de validación

Algunos servicios de validación proponen que, si es el caso, se mencione de forma explícita que la página web ha superado una determinada validación. Esta mención se suele hacer por medio de un icono a situar en la parte inferior de la página. Es una práctica es especialmente interesante en la validación del código y la accesibilidad con los validadores del W3C o de instituciones de prestigio internacional.

Por ejemplo, para la validación del código XHTML se usan los siguiente iconos:

Con esta mención el usuario que consulte 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. Recomendamos su uso.

En algunos validadores, el icono puede tener además un enlace que permita al usuario acceder a la herramienta en cuestión. A veces, este acceso no es hacía su página inicial, sino directamente a la página de resultados del análisis de la página en cuestión. De este modo, el usuario puede constatar que realmente no hay errores y el autor puede confirmar, de manera fácil, que la ausencia de errores se mantiene cuando se realiza algún cambio.

Finalmente indicar que no siempre es fácil construir una página sin errores en varios validadores al mismo tiempo, a veces cuando se corrigen los errores localizados con una de las herramientas se generan errores para las otras. El siguiente ejemplo es una página sin errores en 5 validadores.

http://www.menudesplegable.com/tutorial.htm

Actividad 7

Acceda a la página del validador de código XHTML del W3C http://validator.w3.org y analice la página inicial del directorio Dmoz ( www.dmoz.org ). A continuación podrá constatar que está libre de errores y que el validador proporciona un fragmento de código XHTML para poner en la página analizada.

2.5. Etiquetas obsoletas

La evolución del lenguaje HTML y la aparición de las CSS han provocado que algunas etiquetas que formaban parte de versiones antiguas del HTML hayan sido declaradas obsoletas y que el W3C proponga su eliminación.

La presencia de este tipo de etiquestas no impedirá que el navegador pueda mostrar la página correctamente, no obstante para conseguir un código limpio y liviano es recomendable eliminar estas etiquetas o substituirlas por otros fragmentos de código mejor optimizados.

Fuente. ignside.net. Etiquetas en desuso http://www.ignside.net/man/html/desuso.php

3. Aspectos complementarios a la optimización del código

Como punto final mencionaremos algunos aspectos complementarios a la optimización del código que no forman parte del núcleo central de esta unidad didáctica y que aparecerán en otros artículos del Máster. Estos elementos permitirán tener una visión global de la problemática del código en el contexto del posicionamiento.

3.1. Analizadores de enlaces

Los enlaces pueden estar optimizados y sin errores pero que apunten a páginas inexistentes. Es importante identificar estos posibles les enlaces rotos para proceder a su revisión. Por otro lado, como se ha indicado en el posicionamiento es muy vital tener enlaces que apuntan a nuestra web.

Existen dos tipos de analizadores de enlaces, por un lado 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, el segundo tipo de analizadores evalúa los enlaces entrantes, o sea los enlaces presentes en alguna página de Internet que apuntan a la página analizada.

Enlaces salientes

W3C Link Checker http://validator.w3.org/checklink

Juicy Studio: Link Analiser http://juicystudio.com/services/linktest.php

Link Valet http://valet.webthing.com/link/

Actividad 8

Compare las prestaciones de Juicy Studio y Link Valet analizando en los dos servicios la misma página

Enlaces entrantes

Back-Link Checker Tool http://logicalpackets.com/back-link.asp

Este analizador proporciona un listado de páginas con enlaces hacía la página analizada aportando alguna información adicional

URLTrends (Opción URL) http://www.urltrends.com/

El listado de enlaces entrantes a una página también puede hacerse con cualquier buscador estándar. En Google, Yahoo, MSN y Gigablast se usa el parámetro "link:", por ejemplo para conocer los enlaces hacia http://www.masterenbuscadores.com hay que poner:

link: www.masterenbuscadores.com

Actividad 9

Analice las ventajas de Back-Link Checker Tool en relación con un buscador estándar para obtener información sobre los enlaces entrantes

3.2. Etiquetas importantes

Hay algunas etiquetas especialmente importantes para obtener buenos resultados en posicionamiento. Mencionaremos a continuación las más importantes, sin entrar en detalle puesto que serán tratadas en otras unidades didácticas.

TITLE para indicar el título de la página
META para indicar metainformación de la página, en especial description y keywords H1, H2, H3, H4 y H5 para marcar los títulos del cuerpo del documento.
ALT para proporcionar texto alternativo a las imágenes
B o STRONG para marcar una palabra importante
A HREF para crear un enlace y marcar una palabra importante

3.3. Controlar los ficheros a indexar

No siempre es interesante ni conveniente que el spider siga los enlaces de nuestras páginas. Por ejmplo, si tenemos una versión para imprimir, no es aconsejable que el spider al vea ya que los buscadores recomiendan no crear duplicados de las páginas con los mismos contenidos. Hay diversos métodos para controlar los ficheros que los spiders indexaran.

Añadir el parámetro rel="nofollow" en la etiqueta A HREF
Usar el fichero robots.txt

4. Conclusiones

Para optimizar el código (X)HTML en el contexto del posicionamiento hay que ponerse en la piel del spider y crear las páginas para facilitarle su trabajo. La calve está en proporcionar código sencillo y poco pesado y el principal aliado son las hojas de estilo. Está comprobado que tan solo incluyendo las hojas de estilo en una página web, sin cambiar ni una coma del contenido, se mejora el posicionamiento de forma sustancial.