Técnicas para Diseño web con y para SEO natural

Parece que los creadores de sitios o páginas web se olvidan, a la hora de estructurar un sitio web, el dejar preparado para el sitio  para un SEO natural, para facilitar la accesibilidad web y que este conforme a las normas W3C dentro de las posibilidades que nos permita las mejoras y avances que en ciertos momentos avanzan algo más rápido (bastante más) que las normas.

Aquí pretendo explicar ciertos métodos y/ o técnicas que no debemos olvidar a la hora de estructurar un sitio web y, que son independientes de otros, los cuales en función de los deseos de nuestros clientes, por más que lo deseemos no podremos evitar corregir.

Empezaremos una vez recibido el diseño, aceptado, preparado de las imágenes, recepción de textos…

Bien una vez recibido todo lo necesario para maquetar, desarrollar o empezar a realizar el sitio o página web, deberemos crear el archivo .html, .php, etc… dentro del HTML añadiremos (se entiende, que el que lea este artículo tiene conocimientos de HTML, XHTML, CSS y otros):
1-el doctype
2-el HEAD
3-el BODY

1-En el doctype haremos referencia al tipo de documento con el que trabajamos HTML, XHTML, idioma y si usamos reglas estrictas o transicionales. Bueno ya sabeis como va esto, y si trabajas con dreamweaver te facilita parte de este trabajo, que luego ajustaremos si es necesario.

2-En el HEAD añadiremos el «title», las etiquetas metatags necesarias, como las de descripción, palabras claves, autor, propietario, si queremos follow o no, etc… bien cerradas dichas etiquetas, ya que me encuentro con demasiadas web las cuales los cierres de cada etiqueta son de su Padre y de su Madre, vamos que le estas diciendo a todos que no sabes si hablas chino o castellano, por definirlo de alguna manera.

Posteriormente, deberemos cuando empecemos a estructurar el BODY, añadir los enlaces a hojas de estilo, a JS, a RSS, etc.

Ahora toca la parte del BODY.
dentro del BODY deberemos empezar a estructurar el sitio web, es la parte que todos veremos en Internet cuando busquemos una página.

Aquí empezaremos a crear la cabecera, el contenido o cuerpo y el pié de página, esperemos que estemos utilizando etiquetas DIV.
Empezamos a dar sentido a nuestro sitio web, empezamos a añadir imágenes, textos, clases y contenedores….

Bien hemos estructurado la página y ahora vamos a crear nuestra página de estilos según las clases, identificadores de cada contenedor y empezamos a maquetar y a dejar bonita la página.

Algo que seguimos olvidando, es usar el reset de estilos, modificando lo a tu gusto para evitar errores con los buscadores ya que tienen estilos predefinidos que nos pueden volver locos.

Es conveniente ordenar los estilos, lógicamente empezando por la cabecera….

Lo importante, dentro de lo posible, y es posible, es crear una sola página de estilos con todos los estilos a definir. A veces me encuentro con cantidad de hojas de estilo que sobran, que consumen recursos, peso, etc….

Lo mismo ocurre con las hojas de script, es decir con los JS, aquí sería algo más difícil, pero se puede reducir la cantidad. Por ejemplo las funciones las puedes poner todas en una sola hoja. En el caso de los jQuery las principales quedan como deben, pero como digo las funciones puedes tenerlas en una sola página.

Pasamos al tratamiento de imágenes, en la medida de lo posible, usar sprites, eso hará que el peso de la carga de imágenes se reduzca considerablemente. El sprite, si puede ser, sea uno, es una imagen que incluye varias o todas (algo más complicado esto último) las imágenes que se van a utilizar en la página o páginas y, que pueden repetirse o no, en distintas páginas. Hay varias programas en Internet que te facilitan esta tarea.

Dentro de las etiquetas de las imágenes de la página deberemos incluir la etiqueta «alt» que es el nombre de la imagen, si fuese muy largo añadiriamos la etiqueta «longdesc». Añadir el «ancho» y el «alto» de la imagen.

Los enlaces deberán tener «titulo» y los enlaces principales, los enlaces del menú principal deberán tener los «accesskey», que es un valor o letra para  que se puedan utilizar con el teclado y, para ello sería optimo tener una página la cual informe de los atajos de teclado de cada enlace principal. (no abusar de los accesskey)

Bien hemos terminado de diseñar, maquetar, desarrollar el sitio, lo mínimo que debemos hacer es verificar todo el contenido y, hoy por hoy, tenemos cantidad de recursos gratuitos que nos permiten , en un espacio de tiempo breve corregir los posibles errores que nos ocurren a todos. Por ejemplo, ir a la W3C para verificar que nuestro HTML, XHTML, CSS, moviles, etc…, examinator para accesibilidad, etc… todo este correcto. Debes tener en cuenta que si tu cliente desea tener validado las distintas páginas y además usar estilos, scripts, etc que aún no pueden ser validadas ya que como comento al principio va más lento el tema de la normativa unificada que el desarrollo de nuevos métodos, sería conveniente informarle de ello y, que sea él, el que decida si sacrifica diseño por validación o a la inversa.

Como pueden apreciar, algunos aspectos son fácilmente salvables, corregibles y un buen trabajo realizado a larga te llevará al reconocimiento. El ejemplo esta en que si una empresa que te contrato, ahora desea posicionar su página con una empresa de SEO-SEM y se encuentran con una página ya optimizada, estarán locos por saber quien eres para en la medida de lo posible seguir trabajando contigo, o bien, recomendar tu trabajo, ya que es un quebradero de cabeza, para ellos, para ti, para el cliente que puede pensarse en llamarte otra vez.

Seguro que hay cosas que se me olvidan, que estareis de acuerdo o no, sea como sea, espero vuestros comentarios.

Próximamente:

Duplicar una página en osCommerce
Un diseñador no es un paquete completo (diseño, maquetación, desarrollo, camarero, barrendero, etc), aunque lo seamos.
Tu web en los móviles, adaptándola a iPhone, Android, Smartphone, Opera mini, etc…