Por Patricia Campuzano
Desde mi punto de vista como diseñadora de sitios web, una página está “bien hecha” no sólo cuando su diseño es atractivo y funcional, sino además cuando tiene por detrás un código impecable (al margen de que sus contenidos me puedan o no parecer interesantes). Ambos aspectos de la página son importantes y tenemos que dedicarles el mismo trabajo y esfuerzo para conseguir resultados. El diseño está orientado a la audiencia del site mientras que el código, al contenido y objetivos de la página.
Dejando a un lado cuestiones de diseño, me interesa un post centrado exclusivamente en optimizar el código de una página web para que sea indexada, en el mejor de los casos, por los principales buscadores. Hace tiempo escribí un post sobre cómo elevar el pagerank de tu sitio web con recomendaciones de Google Dirson, pero hay otros consejos a tener en cuenta sobre etiquetas html que habrá que añadir al código para ayudar a que nuestro sitio web salga del pozo sin fondo en el que se está convirtiendo Internet.
Empezamos entonces con algunos consejos para optimizar el código de una páigna web:
1.- El primer consejo si quieres que tu sitio web sea indexado es que te olvides de flash, y te lo dice una amante de los sites animados. Google (y cualquier buscador) ignora por completo toda la información que contiene un SWF. Esto no significa que no podamos incluir archivos flash en las páginas, pero ha de ser de forma moderada y para casos muy concretos (un banner publicitario, una galería de imágenes, archivos multimedia, etc…) pero nunca para incluir los contenidos relevantes de la página. Resumiendo, la página web ha der ser html y si además maquetamos los contenidos a través de hojas de estilo CSS magnífico, eso evitará sobrecargar el código con etiquetas innecesarias.
2.- El título de la página es muy importante. No nos conformemos con poner sólo el nombre de la compañía, añadamos una breve descripción sobre los servicios, productos o contenidos que ofrece al usuario. Cada página del site debe tener su título correspondiente que haga referencia al contenido de la misma.
3.- Etiquetas <meta> que ofrecerán información a los buscadores sobre los contenidos del sitio web. Debemos añadir varias después del titulo <title> de la página. Por ejemplo, las etiquetas <meta> para este blog serían las siguientes:
<META content=”Usabilidad web - Tutoriales sobre diseño, usabilidad y animacion web” name=title>
<META content=”Usabilidad web - Tutoriales sobre diseño, usabilidad y animacion web” name=DC.Title>
<META http-equiv=title content=”Flash, ActionScript, Hojas de estilo CSS, HTML, DHTML, Newsletters, SEO optimización en buscadores, usabilidad web”>
<META content=”tutoriales, usabilidad, animacion, paginas web, flash, ActionScript, Hojas de estilo CSS, HTML, DHTML, Newsletters, SEO optimización en buscadores, usabilidad web” name=keywords>
<META content=”Usabilidad web - Tutoriales sobre diseño, usabilidad y animacion web” name=description>
<META content=”Usabilidad web - Tutoriales sobre diseño, usabilidad y animacion web por Patricia Campuzano” name=author>
<META http-equiv=keywords content=”tutoriales, usabilidad, animacion, paginas web, flash, ActionScript, Hojas de estilo CSS, HTML, DHTML, Newsletters, SEO optimización en buscadores, usabilidad web”>
<META http-equiv=description content=”Blog personal de Patricia Campuzano con tutoriales sobre diseño, usabilidad y animación web”>
<META http-equiv=DC.Description content=”Blog personal de Patricia Campuzano con tutoriales sobre diseño, usabilidad y animación web”>
4.- Texto, mucho texto. Lo que más le gusta a los buscadores son los textos, palabras relacionadas a la búsqueda que ha realizado el usuario (por eso desechábamos la opción SWF). Cuantas más veces aparezca en los textos de tu página la/s palabra/s que busca, más posibilidades habrá de que excoga tu página para ofrecer el link al usuario en los resultados de búsqueda.
5.- Todos los enlaces de texto deben llevar el atributo title con información sobre la página a la que lleva dicho enlace. Por ejemplo, tenemos un enlace para visitar un manual estupendo sobre las hojas de estilo, la forma correcta de ponerlo sería la siguiente:
<a href=”manual_hojasCSS.html” mce_href=”manual_hojasCSS.html” title=”Manual práctico sobre hojas de estilo CSS”>Manual sobre hojas de estilo CSS</a>
Como puedes observar, tanto el title como el texto del enlace ofrecen información sobre la página a la que llevará dicho enlace. Esto les encanta a los buscadores…
6.- Todas las imágenes, incluídos iconos y pixels transparentes de maquetación, todas, deben llevar el atributo alt del mismo modo que veíamos en el caso anterior, bien con información sobre la imagen o, si la imagen es “invisible” para el usuario, con información sobre la página (idem a las etiquetas meta).
7.- Enlaces a todas las páginas del site. Es muy normal ver que casi todos los grandes portales tienen, a pie de página, un listado de todas las páginas que comprenden el sitio web y además, enlaces a otros sitios web de la misma compañía. Esto está directamente relacionado con el PageRank, cuantos más enlaces haya a una página web en concreto, más importante será dicha página para un buscador (… ¿qué sucede en esa página que hay muchas enlazando a ella? vamos a ver…).
Hasta aqui los primeros consejos para mejorar el código html de una página en función de los buscadores. Si tienes alguna duda, deja un comentario!
que deben recibir al día miles de visitantes únicos.