Guía definitiva de Diseño Web y SEO

Los profesionales del mundo 2.0 tendemos a pensar que nuestra especialidad es la mejor y que lo demás no importa. Siempre hacemos lo que pensamos que es mejor para el proyecto según nuestras funciones y nos olvidamos de lo demás. Es entonces cuando nos preguntamos si el diseño web y la Experiencia de Usuario están reñidas con la Usabilidad; si una buena campaña de E-mail Marketing haría sombra a otra en Social Media y si (y es de esto de lo que vamos a hablar hoy) el Diseño web tiene algo que ver con el posicionamiento SEO, y por lo tanto es imprescindible que una y otra trabajen juntas en una Consultora SEO.

Pongamos que estás empezando a diseñar tu blog o web de empresa. O mejor aún, que estás rediseñando la que ya tienes. Tienes un miedo atroz a perder todo lo conseguido los últimos años con tu site. Pues que sepas que, sea cual sea tu caso, tienes que tener en cuenta el SEO desde el principio del proceso de (re) diseño de tu página web.

Para empezar… ¿cuáles serían los factores del Diseño web que más repercusión tienen en SEO?


No te digo nada nuevo si simplemente menciono el concepto “velocidad web” o “tiempo de carga”. ¿Te acuerdas de esto? ¿Te acuerdas de cuando te explicaba cómo solucionar esto y cómo el tiempo de carga de tu web podría hacerte ganar la partida en SEO Mobile?

Hay factores que hacen que el tiempo de carga o la velocidad web hagan sufrir más o menos al SEO de una web:

  • Utilización de Flash. Esto sí que ha sido así toda la vida. Los elementos Flash, desde que el SEO es SEO, siempre han perjudicado al SEO, y no solo en el sentido de la velocidad de carga, sino también a la hora de indexar esta parte de la web en buscadores. Bien. No voy a decirte que no uses Flash, porque no soy quien. Pero si puedes moderar su uso estarás haciendo algo muy beneficioso por tu página o blog.
  • Un mal uso de JavaScript y CSS. Cuando no organizamos bien esta “información” y contamos con varias hojas de estilo (CSS) y JavaScript, en lugar de unificarlo y comprimirlo todo, estamos dificultando la carga de nuestra web al tener esta que hacerle un alto número de peticiones al servidor para cargar correctamente.

¿Por qué Google considera que el SEO de mi web es de baja calidad según la velocidad de mi sitio? Cuando el usuario realiza una búsqueda en Google y, al pinchar en tu resultado (si es que éste está visible, que ya estaría bien), se queda esperando como un bobo a que cargue la web, se cansa y se va. Cuando el usuario pincha en tu resultado y no obtiene lo que busca, también se va. Esto se llama en términos de analítica tasa de rebote, y el algoritmo de Google es capaz de detectar cuándo ocurre y, por lo tanto, considera que no estamos haciendo algo bien, manteniendo nuestra web en el “anonimato” (hablando en términos SEO).

¿Qué otros aspectos de diseño web repercuten en nuestro SEO?


Como no es “velocidad web” todo lo que reluce, a continuación te cuento algunos de los aspectos que, además del tiempo de carga, pueden repercutir más o menos de forma seria en nuestra estrategia SEO. Vamos con ello…

Una mala utilización de los encabezados

¿Y esto qué es? Te acuerdas de cuando te hablo de organizar muy concienzudamente la información de tu página web, ¿verdad? En términos de código, los encabezados se corresponden con las etiquetas <h1><h2><h3>…  y son las que le dicen a Google a qué keywords y contenidos debe darles más o menos importancia.

Es necesario hacer una buena utilización de los encabezados. No todas las plantillas que encontramos en WordPress (por ejemplo) hacen un buen uso de estos. Por ejemplo, no se recomienda más de un <h1> por página. Podría estar horas hablándote de cómo se utilizan los encabezados en SEO, pero lo mejor es que le eches un vistazo a este post de Hector Mainar sobre su utilización y te hagas una idea de cómo debes hacerlo y de qué debes decirle a tu diseñador y/o desarrollador a la hora de montar tu (nueva) web.

Utilización y optimización de imágenes y vídeos

Cómo tratar vídeos e imágenes en posicionamiento SEO

Fuente: coseom.com

Las imágenes y los vídeos son, junto con un mal uso y optimización de las hojas CSS y JavaScript, lo que más peso y, por lo tanto, mayor tiempo de carga, pueden darle a tu web. Por lo tanto nos andaremos con ojo acerca del uso que hacemos de ellos.

En el caso de las imágenes debemos subirlas a nuestro blog o web especialmente optimizadas para web, es decir, en JPEG y en el tamaño (en píxeles) en el que vaya a ser mostrada. Otra solución que podemos adoptar y de la que ya te he hablado en más de una ocasión es la del uso de un CDN, un sitio externo pero vinculado a tu web de dónde tirará tu dominio principal para cargar y mostrar las imágenes. De todos modos, todo lo que debes saber acerca de la utilización de imágenes en SEO, tanto en optimización para mejorar la velocidad y experiencia de usuario como en optimización de sus etiquetas, puedes encontrarlo aquí, en esta guía realizada y publicada por Ignacio Santiago que puede te puede ser de una gran utilidad.

Tema vídeos es, quizá, más complejo. Porque pueden llegar a ser más “hirientes” en términos SEO si no hacemos de ellos una utilización correcta. Ya solo el hecho de subir a nuestra web un blog un vídeo directamente desde nuestro ordenador ya puede suponer una ralentización importante del tiempo de carga, por el mero peso del archivo. Lo más recomendable al final es subir tu vídeo a Youtube y utilizar el código para embeberlo e incrustarlo en la parte de tu web en que sea necesario. Eso sí, ¡no te olvides de redimensionar el tamaño del vídeo!

Los Breadcrumbs: una tendencia… muy antigua

Los Breadcrumbs o migas de pan (si no recuerdas qué son aquí te dejo una imagen que vale más que mil palabras)…

Aquí podéis ver la miga de pan en el eCommerce de mi Atleti

… además de ayudar al usuario a entender en qué parte de la web se encuentra y cómo ha llegado hasta aquí, facilita a los buscadores la indexación de los contenidos y les ayuda a entender cómo éste está organizado (te recuerdo la importancia que ha ido tomando la arquitectura de la información en las estrategias SEO en los últimos años). Si el inglés es un idioma que no tiene secretos para ti, te dejo de regalo un post publicado en Search Engine Journal (te recomiendo que te suscribas al canal, publican contenidos prácticos e interesantes) acerca de los tipos de migas de pan que existen, cómo debemos optimizarlos para SEO, cómo los entiende y muestra Google y algunas recomendaciones al respecto. Breve pero muy completo, recomiendo su lectura.

Una solución Responsive Web Design

O en castellano más “comúnmente” conocido como diseño adaptativo. ¿En qué consiste? No me voy a andar por las ramas. Su propio nombre lo indica. Los diseños adaptativos están basados en un diseño fluido de capas y pensados precisamente para adaptarse al tipo de dispositivo desde donde el usuario accede a nuestra web o blog. Se trata de un nuevo concepto y una nueva forma de trabajar unificada que beneficia al usuario (ya que potencia su experiencia en nuestro sitio), para el diseñador web (que optimiza su trabajo), para el propietario de la web (que ahorra y, además, consigue una web fantásticamente optimizada y que va como la seda) y, sobre todo, para el SEO.

Cómo afecta el Responsive Web Design en el posicionamiento orgánico

Fuente: todaymade.com

Pensemos que un diseño tradicional no adaptativo requeriría de dominios y diseños distintos según desde donde vayamos a acceder (pongamos por caso PC, tablet y Smartphone). ¿Merece la pena? Algunas partes del proceso de nuestra estrategia SEO serán comunes a los tres sitios, pero llegado el momento de confeccionar una campaña de Link Building, que es donde verdaderamente se hace el traspaso de link juice, cada sitio tendrá sus propios enlaces. Como veis, y como bien dice mi colega Jesús Pernas en su post sobre Responsive Web Design y SEO, el trabajo del SEO es el mismo, pero los resultados estarían más repartidos entre los tres sitios, lo cual no beneficiaría demasiado nuestra estrategia.

Una página 404 mal planteada

No. No me refiero a que ya tengas una página 404. Lo primero de todo… ¿tenemos una? ¿Cómo saber si tenemos una página 404? Cuando encaro una auditoría de situación SEO, lo que hago para comprobar esto es escribir el dominio de mi cliente en la barra de direcciones de Chrome o Firefox (en el caso de mi blog, lorenaggomez.com) seguido de algo ininteligible que sepa que no va a existir:

lorenaggomez.com/llsldfjlakdf

Aquí pueden ocurrir dos cosas:

  • Que no cargue nada, es decir, que aparezca un pantallazo blanco o gris sin diseño alguno en nuestro navegador.
  • Que cargue una página 404 con el diseño de nuestra web pero sin un contenido específico, indicándote que es una página de error y que ahí no hay nada.

Bien. En este último caso se pueden dar dos variables.

  • Que la página de error 404 parezca venir como por defecto sin dar demasiada información acerca de lo que ha ocurrido.
  • Que la página de error 404 no solo luzca simpática y original (hay algunas muy divertidas) sino que además nos de información de lo que ha podido ocurrir y nos presente alternativas de hacia dónde podemos “tirar” o seguir navegando. Un “quizá quisiste decir”, una lista de contenidos recomendados, algún enlace a alguna sección de nuestra web a la que nos interesa que acceda el usuario (Contacto, Servicios…), etc.

Ésta última sería la que de verdad estaría planteada y optimizada para una estrategia SEO. Y un aprendizaje que debemos extraer de esto es: no te conformes con lo que te ofrecen en un principio. Seguimos…

Presencia de pop ups o ventanas emergentes

Éste es otro de esos elementos que, desde hace años, criticamos muy duramente los SEO. Vamos a ponernos en la piel del usuario por un momento. Entras en una web por la razón que sea (pero precisamente porque buscas algo, sin más) y de repente, pantallaca de algo que no interesa nada. Publicidad, por ejemplo; engañosa, en general.

¿Genera esto confianza en el usuario? ¿Cómo afecta esto en SEO? ¿Cómo debemos evitarlas? Lo primero es que no debemos confundir las ventanas emergentes que creamos cuando insertamos enlaces en nuestro sitio y pinchamos en “Abrir en una nueva ventana”, no debemos confundir esto con el uso de pop ups de publicidad intrusiva. No es lo mismo. Aclarado esto seguimos…

A Google, cuando utilizamos pop ups en nuestras campañas SEM, no le gusta nada. Y tampoco es que le encante que lo hagamos en SEO, pero no te penaliza por eso. ¿Entonces? La utilización de este tipo de ventanas emergentes debemos cuidarla al máximo, pues empeoran sobremanera la experiencia de usuario y la usabilidad, y aquí es donde Google se da cuenta. ¿O creías que iba a pasar desapercibido para Google que tus usuarios huyan despavoridos porque les estás lanzando publicidad intrusiva?

Botones sociales y cajas de suscripción

ojito con el Social Media

Fuente: abcblogs.abc.es

Vamos a facilitar que el usuario comparta nuestros contenidos en redes sociales (ya sabemos la importancia que el impacto social puede llegar a tener en nuestra estrategia SEO) y la consecución de suscriptores para nuestra web. Esto hará que haya también más tráfico en nuestro sitio, especialmente de usuarios recurrentes (aquellos que vuelven).

¿Qué tiene que ver esto con el diseño web? Un buen diseño y una buena ubicación de estos elementos facilitará la “conversión” (y lo pongo entre comillas porque parece que siempre que decimos “conversión” queremos decir compra, y en este caso no) del usuario para con estos elementos:

  • Compartir nuestros contenidos en las redes sociales.
  • Conseguir más seguidores o followers en nuestros perfiles sociales.
  • Ampliar nuestra lista de correo gracias a la suscripción de usuarios a nuestra web.
  • Etcétera.

¿Y si voy a rediseñar mi web? Atent@…


Es muy fácil dar consejitos cuando estamos diseñando de cero una web. Pero, ¿qué pasa cuando lo que queremos es rediseñar lo que ya tenemos, una web que ya tenemos bien posicionada? Es el momento del terror, en el que pensamos que vamos a echar por tierra todo lo conseguido en nuestra estrategia SEO. No temas, hay varias cosas que debes hacer.

Te doy algunos consejos generales antes de nada.

Una mejora progresiva

Google se cabrea fácilmente cuando hacemos cambios bruscos o en una sola parte del árbol de contenidos. Es por ello que seremos cuidadosos de no avanzar a grandes pasos en nuestro nuevo proyecto, todo lo que hagamos será de forma progresiva y natural. Repito… no queremos que Google se enfade, ¿verdad? Pues eso, vísteme despacio que tengo prisa…

Aprende a priorizar

Hace años, en un curso empresarial de Gestión del tiempo aprendí una lección muy valiosa: en el trabajo, y en los proyectos, hay que priorizar. Allí me enseñaron a diferenciar entre “urgente” e “importante”, y aprendí conceptos tan relevantes y, a su vez, problemáticos, como las llamadas “tareas elefante”, que son aquellas que no son ni urgentes, ni demasiado importantes y que, por ello, siempre vamos dejando, y dejando… pero que nunca hacemos. Rediseñar una web es parecido: debemos dar prioridad a aquellas páginas o secciones que sean más importantes para nosotros. En el caso de una web corporativa, quizá sea el apartado Servicios o Quienes somos. Pero no debemos olvidar la zona de Contacto, aunque a priori parezca la que menos trabajo tiene. Sigue siendo importante.

¿Qué factores SEO vamos a tener en cuenta en este punto? Podemos fijarnos en la Autoridad de Dominio que tiene actualmente esa sección, el porcentaje de visitas que llegan desde buscadores, el Link Building trabajado y, lo que es más importantes y te decía líneas más arriba, los objetivos de la estrategia con los que se corresponde esa sección… ¿Sección Servicios o Quiénes somos, para una web corporativa? ¿Una determinada gama de productos que nos interesa vender en una tienda online? Es este tipo de cosas las que debemos plantearnos.

Piensa en grande

Dicho así queda raro, lo sé. Cuando doy clases a los peques siempre les doy un consejo: tienes que ir a por el 10 para poder aprobar, porque si vas a por el 5, suspendes. Y qué verdad es. En el SEO es igual. No puedes pensar solo en lo que ya tienes hecho, sino en las oportunidades que tiene tu estrategia de mejorar con el nuevo diseño. Haz una auditoría a tu sitio y piensa en qué falla, para que el nuevo site cubra todas estas necesidades. No pensemos en mantener los resultados de nuestra estrategia SEO actual, pensemos en mejorar esos resultados y en conseguir, no ya más visitas, sino más visitas de calidad.

Otra pregunta de corte general que podemos llegar a plantearnos:

¿Cómo va el usuario a navegar por la página?

Es importante tener esto en cuenta. Si vamos a usar un scroll tradicional (que es el que siempre recomiendo, sobre todo si nuestros objetivos van ligados al SEO) o un scroll parallax, que para el SEO es fatal pero a nivel interacción y experiencia de usuario es la bomba. Cuando empecé el post pensé en hablarte un poco más de esto, pero la realidad es que te estaría privando de leer posts más completos acerca del tema como puede ser éste de Semrush en inglés, o éste otro de Increnta, muy completos y recomendables ambos. He incluido un pantallazo del Scrolling Parallax desarrollado para este site de The Walking Dead (una de mis series favoritas, por cierto). El usuario, a medida que hace scroll con el ratón (le da a la ruedecica) el muñeco se va moviendo por escenarios que van cambiando y que nos muestran poco a poco elementos audiovisuales, y todo para explicarnos cuál es el proceso estético que sufren los “caminantes” que salen en la serie, desde que llegan a producción hasta que, ya en plató, son “eliminados”. Merece la pena…

Un ejemplo de Parallax Scrolling en este site de The Walking Dead

Ejemplo de Parallax Scrolling

Y cositas más concretas que debemos tener en cuenta…

¡¡Pavor!! ¿Qué hago con las URLs?

Aquí nos encontramos con dos problemáticas relacionadas con las URL’s de nuestro contenido:

  • Que el nuevo diseño traiga una nueva organización de los contenidos y, por lo tanto, un renombramiento automático de las URL’s que albergan esos contenidos.
  • Que el nuevo diseño utilice un CMS distinto al que usábamos (pongamos que utilizábamos Joomla, y ahora nos pasamos a WordPress, que puede pasar) y el parámetro utilizado por el nuevo gestor sea distinto y tengamos algún problema de duplicación de contenidos (por ejemplo, cuando una tienda online nos permite ordenar los productos por precio ascendente, precio descendente, o simplemente, relevancia, se generan URL’s distintas aunque el contenido sea el mismo.

¿Esto qué quiere decir? Que lo que había en las URL’s antiguas, al cambiar la URL, el usuario puede aterrizar en ese contenido desde buscadores y caer en un error 404 o, directamente, en una página inexistente, lo cual es muy frustrante y a Google… en fin, no le gusta.

En el primer caso, la recomendación es intentar mantener la misma URL que teníamos antes. A veces, por ubicación o por otras razones no es posible mantenerla, por lo que tendremos qué hacer redirecciones 301 que apunten desde cada URL que teníamos antes, a su URL correspondiente actual. Posiblemente es de los mejores consejos que un SEO puede darte si estás rediseñando tu web.

En el segundo basta con decirle a Google, “macho, que lo que tengo aquí no es contenido duplicado, es contenido único pero con tres o cuatro URL’s generadas indistintamente”. Y, ¿cómo se hace esto? Mira que te he contado algunas cositas sobre Google Webmaster Tools, y esta no ha sido una de ellas. Tranquil@ porque… ¿quién mejor que Google para explicarte esto?

¿Y qué hago con los enlaces?

Hemos trabajado por fin el internal linking y el Link Building externo de nuestro sitio, y ahora que rediseñamos no sabemos qué hacer con el trabajo realizado.

En el caso de los enlaces que hemos obtenido de otras webs, con realizar una correcta redirección 301 en todas las URL’s lo tendríamos cubierto, pero no el enlazado interno. Para esto utilizaríamos validadores de enlaces internos como es el caso de Link Checker del W3C o Broken Link Checker, del que ya hablé en una ocasión, y que nos servirían para controlar los enlaces internos rotos que se han perdido en el proceso de migración.

¿Debo utilizar los mismos sitemap.xml y robots.txt?

Pues… cómo te digo esto… NO. Tienes que cambiarlos. Generar nuevos y optimizarlos adaptándolos a las necesidades de la misma web. Y desde luego, cómo no, avisar a Google. ¿Cómo? Si quieres te recuerdo cómo funciona Google Webmaster Tools.

El caso del sitemap.xml te lo expliqué en ese post. En cuanto al robots.txt, me estaría reiterando si te cuento algo que Brandon de SEO-Diaz.com ya nos contó hace unas semanas de manera mucho más completa.

Y por último… ¿cómo no? ¡El contenido!

¿Es positivo mejorar nuestros Contenidos? Os diría que eso siempre, pero vamos a tener cuidado con ellos cuando rediseñemos nuestra web. Hay palabras clave para las que ya estaremos posicionados, por algo será, ¿no? Vamos a dejar tranquilas las páginas que ya tenemos bien posicionadas o vamos a tratarlas con mucho mimo (yo no haría demasiado cambio aquí).

A lo mejor son aquellas secciones con menos contenidos las que necesitan ser mejoradas y optimizadas a nivel contenidos, ¿no? Pues será en estas en las que nos centremos para reforzar nuestro SEO, y no las otras, que son las que ya tenemos posicionadas.

¿Has rediseñado ya tu página web o la estás diseñando desde cero? ¿Está siguiendo estas recomendaciones? ¿Afectó esto a tu SEO? Cuéntamelo en los Comentarios y, si te ha servido, ¡Comparte!

¡Hola! Soy Lorena González Gómez, Consultora SEO con experiencia en Redes Sociales, Reputación Online, Marketing de Contenidos y Usabilidad. Apasionada de la Comunicación entre las personas.
¿Quieres contactarme en redes sociales? Puedes encontrarme aquí:

Twitter LinkedIn Google+ 

8 thoughts on “Guía definitiva de Diseño Web y SEO

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: