21 Mar
métricas sobre diseño web seo

Diseño Web y SEO: 5 recomendaciones

Diana Hidalgo Marín
Hago, enseño y aprendo diseño.

Si los tres pilares del SEO (Search Engine Optimization) son la autoridad, la relevancia y la confianza, el diseño sería el basamento sobre el que se sostienen y no así únicamente la ornamentación, al contrario de lo que se suele pensar.

El diseño web es un proceso creativo de configuración en busca de una solución de cualquier ámbito, que involucra variadas dimensiones que van más allá del aspecto, la forma o el color, abarcando también funcionalidad, operatividad, eficiencia, usabilidad e interactividad.

Partiendo de esta premisa, muchos de los aspectos relevantes de una web en cuanto a SEO se refiere, se verán comprometidos en gran medida por las decisiones que se tomen desde diseño. Y más aún de un tiempo a esta parte cuando el SEO tradicional está evolucionando, de la mano del machine learning, hacia una mayor personalización, asumiendo la relevancia del comportamiento del usuario, cuyo estudio y análisis es responsabilidad directa de diseño, entre otros.

Solo conociendo el tipo o tipos de usuario a los que uno se dirige, se podrá diseñar en consecuencia. El comportamiento de cualquiera que entre en tu web influirá en su posicionamiento. Atraer tráfico de calidad hará que esté mejor posicionada y tu negocio será más fácil de encontrar por tus potenciales clientes.

Así pues, ¿qué puede hacer el diseño web por el SEO de la página web de tu negocio?

Arquitectura de la información

Ya desde un principio, cuando el proyecto aún es abstracto, debemos ir asentando las bases de lo que será una web bien posicionada y es que, a través de pruebas de usuario, como el tree-test o el card-sorting, podremos estructurar las secciones y el mapa de navegación en función de su comportamiento. Evita niveles muy profundos en el árbol de navegación, el contenido relevante debe estar accesible y si no es lo suficientemente importante, descártalo directamente.

Si tu sitio resulta algo complejo, incluir breadcrumbs (migas de pan) hará evidente la conexión entre páginas y será más fácil para Google rastrear el árbol de navegación, asegurándonos así de que todas las páginas están accesibles. Y el usuario, por su parte, podrá moverse por tu web sabiendo en todo momento dónde se encuentra.

Google dedica un tiempo determinado a rastrear cada web, por lo que si lo importante es difícil de encontrar, indexará menos información y tu página se verá penalizada por ello. Prescinde de pop-ups y evita los modales en la medida de lo posible, que a veces se pueden sortear reubicando esa información que nunca debió estar escondida en una capa superpuesta o repensando el flujo de navegación.

Estos elementos son muy intrusivos y alteran la experiencia de usuario, por lo que si no te queda otra que utilizarlo como recurso, asegúrate de que resulte intuitivo cerrarlo, que nunca se muestre a pantalla completa y que a ser posible sea invocado por alguna acción del propio usuario, no de ningún mecanismo automático del propio site (por ejemplo, para hacer publicidad o disuadir de abandonar la página).

Esta configuración será crucial también para la experiencia del usuario final. Piensa que si no es capaz de encontrar lo que espera de tu web o se frustra, la abandonará ipso-facto y sufrirás las consecuencias.

Dado que los robots de Google comprobarán la organización formal del contenido de tu web, deberás prestar atención también a lo concreto. Cuando el proyecto ya esté en proceso de desarrollo, llegará el momento de distribuir la información semántica y estructuralmente. Esto quiere decir que el diseño deberá presentar la información de una manera ordenada y con sentido, cuya jerarquía deberá reflejarse también en el código. Hay que diseñar con los titulares (H1, H2, H3, etc.), los párrafos, los enlaces y demás etiquetas en mente para que dicha traducción sea evidente.

Aplicar un estilo distinto a cada elemento estructural, en función de su naturaleza, aportará sentido a la lectura y tanto el robot de Google como el usuario podrán interpretar el contenido, favoreciendo así tu posición en el buscador.

Los parámetros de Google establecen que el orden de aparición también será determinante. Y dado que nuestro objetivo es satisfacer las expectativas del usuario en el menor tiempo posible sin suponer mayor esfuerzo, el diseño deberá ubicar el contenido más relevante en las primeras posiciones del layout, en pos de favorecer lo que se conoce como «primer pantallazo» (área de la web que se ve sin haber hecho scroll aún).

Accesibilidad

Por si la inclusividad no pareciese razón suficiente –cuando en realidad es la más importante–, deberíamos, al menos, tener en cuenta que ignorar a un colectivo no solo perjudica a la comunidad, sino a nosotros mismos. ¿Le cerrarías la puerta de tu negocio a un posible cliente?

Cuando Google visita nuestra web, suele tener problemas muy similares a los que puede tener cualquier persona con una discapacidad visual. Por lo que debemos responsabilizarnos de que el contenido sea accesible para todo el mundo. ¿Pero cómo podemos abordar la accesibilidad desde la perspectiva de diseño?

La jerarquía entre encabezados, párrafos y otros también es determinante para la accesibilidad, por lo que será indispensable marcar correctamente cada elemento y aprovechar el etiquetado semántico de HTML5 para transferir sentido a nuestro contenido.

No sustituir nunca elementos textuales (títulos, botones, etc.) por una imagen con el texto en sí misma. Los mapas de bits no pueden ser interpretados como si fueran palabras. Es indispensable incluir texto alternativo en todas las imágenes. Cuidado con los iconos que no van acompañados de ninguna etiqueta, también lo necesitarán.

Si el diseño de algún efecto o funcionalidad se apoya exclusivamente en javascript, por ejemplo, para generar un menú, un botón o un pop-up, el robot no podrá rastrearlo. Todo el contenido sensible debe estar disponible sin javascript activado, así que hay que utilizarlo con conocimiento de causa.

Además, redactar los textos propios de la interfaz con lenguaje claro y significativo afectará también a la accesibilidad. Por ejemplo, un botón de acción que culmina un proceso de compra, debería ser un verbo representativo, así como «Confirmar compra» y no «Pulsa aquí» o «Aceptar».

Incluir un mapa del sitio es también buena idea, dado que es otra de las recomendaciones sobre accesibilidad que ayudaría a los robots de Google a acceder a todas las páginas.

Utilizar una paleta de color accesible para determinadas discapacidades visuales como la discromatopsia no será detectada expresamente por los robots, pero repercutirá positivamente en la experiencia de usuario, que como ya hemos dicho, Google ha empezado a tener en consideración.

Mobile-First

Hoy en día la mayor parte del tráfico de internet es mobile, razón por la que Google empezó a aplicar el mobile-first indexing. Esto quiere decir que a la hora de diseñar debemos trabajar al revés de como se había estado haciendo hasta entonces. Siempre y cuando las estadísticas de tus usuarios no digan lo contrario, la versión principal de tu web debería ser mobile y la versión desktop, una derivada de la primera y no al revés.

El diseño responsive es la solución más popular y económica, aunque no debemos olvidar que, al margen de las aplicaciones nativas y las apps híbridas, existen las web-apps que también habrá que sopesar a la hora de resolver las necesidades particulares de tu negocio. Cuenta con que la manera en que se muestre tu web en mobile será la que determine tu posición en la página de resultados.

👉 Seguro que te interesa: «¿Qué son las aplicaciones web progresivas?»

Así pues, desde diseño, habrá que optimizar todo el contenido para que se vea correctamente en móvil. No olvides que no se puede controlar el salto de línea en los textos, por lo que deberás prestar mayor atención a cómo se comporta la tipografía, su tamaño, alto de línea, y espacios en mobile.

Es especialmente importante controlar el tamaño mínimo de los elementos pulsables. Se estima que nuestra huella dactilar ocupa unos 9mm. de media al pulsar una pantalla. Esto quiere decir que todo aquello susceptible de ser pulsado, deberá tener un área mínima de 48×48px. También habrá que respetar unas distancias mínimas entre unas cosas pulsables y otras. Si el usuario no puede navegar cómodamente a través de tu web, la abandonará, así que tenlo en cuenta.

wireframe de diseño web seo para móvil

Con la llegada del smartphone, llegaron también mejores pantallas, por lo que muchas de ellas hoy en día tienen mayor densidad de píxeles que antes. Esto quiere decir que, en la medida de lo posible, también habrá que tenerlo en cuenta a la hora de preparar los recursos gráficos. Si quieres que la experiencia sea óptima, las imágenes deberán exportarse a 1x, 2x y 3x, para poder servir una u otra en función del dispositivo. Si no, se verán poco definidas.

Web Performance Optimization

La WPO será tu mejor aliada para optimizar la web y cargar el contenido lo más rápido posible. Una web no debería tardar más de 2 segundos en cargar; si tarda más de 3, tu página será peor posicionada. ¿Qué puedes hacer para que tu web sea más rápida?

Haz que las imágenes pesen menos. Optimiza para web desde cualquiera que sea la herramienta de edición. Que las imágenes de cabecera o similares no sean nunca de más de 2000px de ancho (la mayoría de la gente no tiene el monitor tan grande como piensas). Restringe el uso de animaciones en GIF y utiliza SVG siempre que sea posible. Si tu web lleva vídeo, optimízalo también y no abuses de efectos que requieran librerías.

Lo mejor es utilizar el número justo de tipografías: dos o tres, a lo sumo. Además de ser una recomendación estética, cuantas menos tipografías personalizadas se utilicen, más rápido cargará la página y mejor será tu posicionamiento.

👉 Espera un momento: «¿Qué es WPO y por qué es importante para tu web?»

El estilo y la estética

La línea gráfica también es contenido relevante. No se trata solo de conseguir un aspecto más o menos atractivo, sino de conectar con la cultura visual de los usuarios. No podemos ignorar que vivimos en un mundo donde lo audiovisual prevalece, cuyos patrones tenemos ya todos interiorizados.

Se debe prestar especial atención a la información que comunica tu web visualmente, dado que además de transmitir, sin ningún tipo de filtro, los valores y el espíritu de tu marca, debe estar en sintonía con los del visitante. Es uno de los recursos que mayor engagement proporciona y en muchos casos, será este aspecto el que haga destacar tu negocio entre la competencia, no lo descuides.

Una web con una estética abrumadora que no respeta el resto de principios no servirá para nada más que para ser enmarcada, pero cuidado, una web que no se responsabiliza del contenido visual que expone, también será penalizada, en tanto en cuanto no captará al usuario.

Esto es solo una muestra de todo lo que el diseño puede hacer por el posicionamiento de tu página en el buscador, si necesitas asesoramiento, somos expertos en diseño y desarrollo web, estamos aquí para ayudarte.

Solicitamos tu permiso para obtener datos estadísticos de la navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúas navegando consideramos que aceptas el uso de cookies.

AceptarMás información