Diseño web SEO: elementos clave a tener en cuenta

Pablo Herrera

Pablo Herrera
Head of SEO & Content

Hacer un diseño web SEO es crucial si queremos que nuestra página posicione en Google. La comunicación entre los departamentos de diseño y SEO se vuelve fundamental para tener un producto bonito, funcional y que los algoritmos de Google sean capaces de leer correctamente.

En nuestra agencia SEO en Google, cuando hacemos un diseño web SEO hay tres puntos clave que hay que conseguir:

1. Una web accesible y funcional

2. Una página optimizada para SEO

3. Diseño estéticamente bonito

Aunque la optimización SEO no necesariamente tenga que realizarse en el momento de la conceptualización de la web, si que es muy importante y mucho más económico. Solo hay que pensarlo, ¿qué sentido tiene pagar a un diseñador a hacer cambios a posteriori cuando podría haberlo hecho “bien” desde el primer momento?

No solo supone un ahorro de costes, sino que también evita que las soluciones aplicadas se vean baratas o improvisadas. Si queremos un diseño intachable, nuestro diseñador debe tener en cuenta las necesidades SEO y de UX de nuestra web.

Solo así podremos lograr nuestro objetivo, que es tener una web a la altura, tanto para el usuario como para Google.

Aspectos clave en el diseño web SEO

Diseño gráfico

Como quizá no sepas qué debe tener tu diseño web SEO, voy a desarrollarte alguno de los puntos más importantes. Si tu diseñador web (o tú mismo como diseñador), lo tiene en cuenta a la hora de conceptualizar la web, ya tendrás parte de tu trabajo SEO hecho.

Si no, antes de pensar en tu estrategia de contenidos SEO, tendrás que ponerte a optimizar la web si quieres los mejores resultados. Afortunadamente, nunca es tarde para modificar la web, aunque siempre mejor antes que después.

Diseño responsive

Diseño responsive

Lo primero que hay que considerar es que la web debe ser responsive. Es decir, tiene que ser adaptable a dispositivos móviles y tablets. Hoy en día, la mayor parte del tráfico webs proviene de nuestros smartphones. Por ello, deberíamos incluso priorizar el diseño en móvil por encima del diseño en escritorio.

Me explico mejor, el diseño siempre debe estar perfecto en todos los dispositivos, pero si, por ejemplo, estamos dudando entre algo que favorece o se ve mejor en escritorio y algo que se ve mejor en móvil (aunque se vean bien en los dos), siempre habrá que priorizar el teléfono.

¿Todas las webs tienen siempre más tráfico móvil que en escritorio? No. Para eso vendría bien ver el Analytics de nuestra web actual. En mi experiencia, los negocios B2C suelen tener hasta un 70% más de visualizaciones en móvil, mientras que los B2B, de momento, mantienen un poco más de visualizaciones en escritorio, ya que se suelen consultar en el trabajo.

Sin embargo, por lo que he podido ver, aún en los negocios más especializados en B2B suele haber como mínimo un 40% de visualizaciones en móvil y este porcentaje va a continuar creciendo. Así que mi recomendación es que aún en el caso que haya más tráfico de escritorio, si la diferencia no es muy alta, sigamos apostando por el móvil porque cada vez habrá más usuarios que entren de esta forma.

Velocidad de carga

Velocidad de carga

Más allá del diseño responsive, lo principal que un diseñador web debe tener en cuenta es la importancia de la velocidad de carga. La web debe ser ligera si queremos que posicione y más a día de hoy con la importancia de las Web Core Vitals.

Desde el año pasado, la velocidad de carga dejó de ser un elemento que se tenía en cuenta de forma indirecta en el posicionamiento a convertirse en un factor directo y fundamental.

La web debe ser rápida. Esto puede implicar prescindir de muchos elementos que quizá nos interesaría introducir. Aquí, el SEO y la UX se dan la mano, porque no hay nada que desespere más a un usuario que una web que tarda en cargarse.

Estética por encima de la funcionalidad

Diseño web con gafas

Otro problema potencial que debe solucionar el diseño web SEO es el de la estética por encima de la funcionalidad. A todos nos gusta una web bonita, pero la web no puede ser bonita y poco usable.

Este tipo de problemática es, de hecho, habitual en webs de artistas y diseñadores gráficos. Tratan de “lucirse” tanto, que terminan creando un website difícil de entender tanto para el usuario como para el algoritmo.

La clave es no complicarse. La estética importa, pero si el usuario no es capaz de encontrar al momento lo que está buscando dejará de importar. En Internet no existe la paciencia, la calma, el tratar de descubrir las cosas. Por el contrario, hay que ir “a tiro hecho”.

Encabezados y estructura de la información

Página de papel escrito en HTML

Cuando he hablado de contenido SEO ya te he mencionado más de una vez la importancia de estructurar correctamente la información con encabezados HTML. Para poder trabajarlo correctamente, deben estar predefinidos en el diseño de la web.

Debe haber un solo H1, los H2 colocados correctamente, si hay un H3 también, y que se adapten al tipo de contenido que vaya a haber en la página. En ese sentido es importante no colocar como encabezado algo de estructura que se repita en todas las páginas.

Por ejemplo, si tenemos siempre un formulario de contacto, para el diseñador será probablemente más fácil poner su título como un encabezado, pero deberá ponerle el tamaño requerido manteniendo el formato de párrafo porque no aportará información distintiva sobre la página en específico.

La clave a seguir con los encabezados es esa. Deben ser diferentes entre páginas y hacer referencia al contenido de las mismas. Si vamos a repetir un elemento en todas las páginas, no podemos programarlo como un encabezado HTML sino como párrafo.

Este suele ser el error más habitual (porque es más rápido hacerlo como encabezado) cuando hablamos de diseño web SEO.

UX, el gran aliado

Diseñando UX en móvil

Ya lo hemos mencionado antes. UX o usabilidad web es un aspecto importantísimo que considerar en todo lo que hagamos en la web. Es decir, nuestra página tiene que ser accesible y fácil de usar para cualquier usuario.

Cuánto más satisfecho esté el usuario con su experiencia en la web, mejores indicadores tendremos y todo eso se verá reflejado en el SEO de forma indirecta.

UX, además, también es muy importante para generar mayores conversiones. Así, colocar en los lugares correctos los formularios y botones, que el usuario siempre sepa dónde encontrar lo que necesita y, en definitiva, facilitarle la vida, hará que el diseño y el SEO trabajen en conjunto mucho mejor.

Textos, vídeos e imágenes legibles

Polaroids sin revelar tendidas en un cordel sobre fondo de madera oscura

Otro aspecto crucial en el diseño web SEO tiene que ver con los textos e imágenes que introduzcamos en la web. Es importante que Google pueda leerlas, por lo que, por ejemplo, si ponemos una imagen con texto, tenemos que añadir el texto como código y no que esté escrito en la imagen que subamos.

Igualmente, las imágenes y vídeos tendrán que contar con su texto alternativo o ALT text escrito. Si no explicamos a Google de que trata la imagen, no lo va a entender porque, de momento, Google solo puede procesar su significado teniendo en cuenta el título y el ALT.

El ALT, además, ayuda a la accesibilidad de la imagen a personas con discapacidad.

Respecto a los textos no podemos olvidar que si lo ponemos de forma que el usuario no lo pueda leer, solo para ayudarnos a posicionar, Google lo calificará como una práctica de Black Hat SEO y nos penalizará.

Respecto a los vídeos, hay que tener en cuenta que suelen pesar mucho. Por ello, es mucho más recomendable introducir vídeos incrustados desde fuentes externas como YouTube o Vimeo. Así, la carga no tendrá que soportar también el peso del vídeo.

Scroll

scroll

Por último, tenemos que hablar del aspecto más complicado para un diseñador: el scroll. El scroll hace referencia a la cantidad de veces que tienes que desplazarte por una página web hasta encontrar lo que buscas.

Para que el diseño web SEO funcione, es importante que estas veces sean lo menos posible. Todo lo fundamental debe estar en la primera pantalla en la que accede el usuario, sin tener que bajar para encontrar lo que busca.

Esto es relativamente sencillo en la versión escritorio, pero no tanto en la móvil y ya hemos dicho que es importantísima. Entonces, ¿puede meter cosas haciendo scroll? Sí, pero siempre hay que afianzar lo importante en la parte superior.

Siguiendo estas pequeñas claves, podremos hacer un diseño web SEO en el que el usuario encuentre una web atractiva y usable, a la vez que el algoritmo dispone de toda la información que necesita.