sphera.expansiva.com

Desde hace pocos años, la maquetación de las páginas web ha ido evolucionando a favor de una estructura más lógica, o dicho de otra forma, es más semántica. Por suerte, ya ha quedado atrás la época en la que con tres tablas y cuatro imágenes mapeadas se permitía hacer una web.

No obstante, y pese a las buenas intenciones de muchos maquetadores, no es difícil ver que se siguen cometiendo bastantes errores en los trabajos finales cuando analizamos muchas páginas. Estos errores, a priori, pueden ser indetectables, pero sin embargo tienen una repercusión bastante notable si lo observamos desde el punto de vista de las accesibilidad y desde el del posicionamiento web.

La razón es muy sencilla, en muchas ocasiones el maquetador crea una estructura o esqueleto en HTML pensando tan sólo en el especto visual, pero no se para a pensar en el contenido concreto que está tratando y al que debe dar un orden o un significado concreto utilizando de forma correcta las etiquetas HTML.

Como podéis sospechar, un lector de pantalla que no interprete estilos css, javascript, ni imágenes, tan sólo interpretará el código HTML puro que el maquetador haya escrito, y al igual ocurre con los robots de los buscadores.

Por ejemplo, si en lugar de utilizar una etiqueta <img> de la siguiente manera:

<img src="ruta/imagen.jpg"/>

la utilizamos de esta otra:

<img src="ruta/imagen.jpg" alt="Este texto aparece en la imagen" title="Una imagen cualquiera"/>

aportamos el contenido necesario para que un lector de pantalla pueda interpretar esa imagen y ver cómo se titula, de otro modo hubiera sido ignorada. Al igual ocurre con los buscadores, si la etiqueta carece de los atributos alt y title, no pueden idexarlo en sus bases de datos, pero si por el contrario se ha especificado un título en el atributo title y se ha proporcionado un texto alternativo en el atributo alt, el buscador leerá esa información, la clasificará y la guardará.

Una cosa parecida ocurre cuando colocamos el título de una sección en una etiqueta de párrafo <p> y le aplicamos estilos CSS para que destaque más, en lugar de colocarlo en una etiqueta de encabezado de primer nivel <h1>; ni el lector ni el buscador van a saber que el contenido que hay dentro de la etiqueta <p> es el título de la sección, y en el caso del buscador, el valor que le dará a ese contenido será más bajo, repercutiendo de una forma negativa en el posicionamiento de la página.

De modo que, al igual que con las imágenes, todo el contenido que tengamos que maquetar, deberá ser previamente analizado para entender bien su significado y poder darle una estructura correcta, con esa forma conseguiremos páginas de más calidad, nuestro contenido podrá ser accedido por más usuarios y posicionaremos mejor en los motores de búsqueda.

¡Hasta la próxima!