Cómo el diseño web afecta al SEO

Usar diseño web y seo juntos

Sí, el diseño afecta al SEO, y es completamente lógico. Pensémoslo bien ¿el escaparate de una tienda influye en que entre más o menos gente?

Relación entre el diseño web y el posicionamiento SEO

Y es que el SEO y diseño son aspectos clave a tener en cuenta al empezar una web. Antes que nada tenemos que saber lo que estamos tratando:

Qué es el diseño web

Antes que nada debemos tener muy claro que el diseño no es lo mismo que el desarrollo web. Aunque muchos se refieran al diseño web como todo lo que conlleva crear una web, no es más que una pequeña parte de todo lo que abarca. Podríamos decir que el diseño web es la parte estética de una web, el HTML, CSS y los elementos gráficos de la misma.

Qué es el SEO

El SEO es más fácil de explicar con un par de pinceladas, aunque está claro que es mucho más que eso. Dicho de una forma rápida y comprensible, el SEO es el uso de cualquier técnica que mejore el posicionamiento en buscadores como Google.

La gran mayoría de webs prestan mucha más atención en una de estas dos materias. Pero creo que se podrían obtener muchísimas ventajas si ambas se optimizan de la mejor forma posible.

Partes del diseño web que afectan al SEO

Al hablar de diseño web solo me enfoco en la parte estética y visible de una web. Entonces debemos tener claro que no incluyo las partes no visibles de la web como:

  • Metaetiquetas
  • Marcado Schema
  • Atributos HTML
  • Funcionalidades
  • Bases de datos
  • etc.

Ya sea que queramos contratar un diseño en WordPress o hacerlo por nosotros mismos, es importante tener estos puntos en cuenta para enfocar nuestra web hacia el éxito. Échale un ojo!

Apariencia de la web

Cuántos nicheros han hecho webs como churros sin prestar apenas atención en el diseño. Sí, mucho estudio de la intención de búsqueda y de las palabras clave, pero hacían webs infumables. Eso antes funcionaba, porque al final daban una respuesta que no existía por otro lado. Pero estoy convencido de que eso hoy ha cambiado, cada vez se habla más de la importancia de un diseño profesional para el posicionamiento web

El diseño responsive es un factor determinante en el SEO

Diseño responsive

Desde hace ya bastante tiempo Google tiene muy en cuenta el modo en que se muestra una página web para los diferentes dispositivos. Por lo que esto es considerado un factor claro y determinante del diseño que influye directamente en el posicionamiento.

Enlaces demasiado cerca unos de otros

Este punto está directamente relacionado con el anterior. Y es que aunque una web sea responsive, muchos diseñadores siguen enfocando sus esfuerzos a la apariencia de la web en pantallas grandes, sin prestar demasiada atención a cómo se ve en dispositivos pequeños. Si, por ejemplo, colocamos enlaces muy cercanos unos de otros será fácil de hacer clic con el ratón, pero imaginemos cómo será en una pantalla táctil. Un detalle que a día de hoy debemos tener muy en cuenta en nuestros diseños.

Jerarquía HTML

Si observamos la estructura de un artículo en el periódico nos daremos cuenta de que la jerarquía es algo muy importante. Titular, párrafo inicial, encabezados, subencabezados, etc. En un artículo digital ocurre exactamente igual, solo que estos elementos deben ser marcados mediante las etiquetas HTML correspondientes. Si no usamos las etiquetas apropiadas según una jerarquía lógica, estaremos desperdiciando fuerza SEO y, por lo tanto, posiciones.

HTML semántico

el html semántico para dar más información a los buscadores

Según la Wikipedia, el HTML semántico es el uso de etiquetas HTML para reforzar el significado de la información en las páginas web más que simplemente redefinir su forma de presentación. Entonces, por lógica, este significado puede ser más fácilmente interpretado por las llamadas arañas (bots que analizan webs) beneficiando así el posicionamiento. Entre estas etiquetas podemos destacar:

  • Address: Etiqueta en la que podemos añadir nuestra dirección. Creo que es muy útil para páginas donde se quiere destacar un negocio local.
  • Dl: Etiqueta muy poco usada que permite crear listados de definiciones.
  • Article: Para especificar más de un contenido independiente en la misma página. Es decir, textos que no tienen relación entre sí.
  • Aside: Para mostrar contenidos secundarios aparte del principal.
  • Nav: Para mostrar menús de navegación.
  • Header: Sirve para incluir los elementos de un encabezado como el logo, menús de navegación, etc.

Contenido oculto o semioculto

Una práctica muy usada durante años ha sido colocar texto oculto o semioculto para mejorar el posicionamiento de ciertas palabras clave. Esta práctica, que claramente podemos clasificar como blackhat, no funciona hoy en día. De hecho es mucho más fácil que nos perjudique perdiendo posiciones.

CLS

El CLS, del inglés Cumulative Layout Shift, es un valor que se da a los cambios en la estructura de una página web. Seguramente recordaremos cuando cargaba una web, intentábamos hacer clic en un botón, y acabábamos haciendo clic en otro por un movimiento repentino de la estructura. Hoy en día, si no tenemos bien optimizado el CLS nos perjudicará en el posicionamiento.

Tamaño del texto

El tamaño de los textos en una web puede complicar mucho la legibilidad, y ya sabemos que Google se preocupa por que el usuario dé respuesta a su búsqueda. Según los expertos es recomendable no colocar un tamaño de fuente inferior a 16px para facilitar la legibilidad de todos los usuarios. En este enlace podemos leer un artículo en inglés sobre este tema.

Recientemente John Mueller, una figura muy respetada en el mundo SEO, respondió en un tweet que el tamaño de los encabezados no debería afectar al posicionamiento. Esto claro, entiendo que no se refería a texto diminuto, si no más bien a lo contrario.

Above the fold

El llamado “Above the fold” se refiere al contenido que primero aparece al entrar en una web. Siempre debemos tener en cuenta que este contenido es el más relevante para el usuario y para el SEO.

Siguiendo con el mismo ejemplo, si nos fijamos en un artículo bien hecho de un periódico, en el titular, el primer párrafo y la imagen inicial (si la tiene) debemos captar qué vamos a encontrarnos en ese artículo. Pues bien, lo mismo debería suceder con una página web.

Tamaño de las imágenes

Las imágenes son elementos prácticamente imprescindibles en el diseño web, y las variaciones de su tamaño afectan de forma directa en el impacto visual que genera una web en el usuario. Pero también afecta al tiempo de carga. Por lo que siempre debemos encontrar un equilibrio entre: estética, tamaño y calidad.

UX

El diseñador de experiencia de usuario se encarga de hacer que una web sea intuitiva, cómoda y fluida. Si un diseño UX está mal realizado provocará la frustración de los visitantes y que duren menos en la página, aportando datos negativos y, consecuentemente, nos afectará al posicionamiento en buscadores.

Cómo afecta la accesibilidad al SEO

La accesibilidad es una parte muy importante del diseño y desarrollo de una web, ya que trata de facilitar el acceso al contenido a las personas con discapacidad. De hecho, incluso se ha incluido un valor referente a la accesibilidad en PageSpeed Insights. Esto demuestra claramente la importancia que Google da a este aspecto de una web.

Conclusión, o cómo mejorar el SEO mediante el diseño web

Hace tiempo, a Google le preocupaba más facilitar respuestas acertadas que la experiencia del usuario en la web. Además, la IA de este buscador cada vez entiende mejor el modo en que nos expresamos. Ahora estamos llegando a un momento en el que (parece ser) que las webs que se mantienen en los primeros resultados de búsqueda tienen una serie de características comunes. Resumiendo, estos resultados llevan a que el usuario (sí, el humano) tenga la mejor experiencia posible en la web. Merece la pena invertir más en el precio del diseño y que sea de calidad, que hacer una web que no vaya a obtener tráfico.

Si tienes alguna pregunta, sugerencia o simplemente quieres dar tu opinión no lo dudes y deja tu comentario

Aviso legal

Política de Privacidad

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo