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?
Es por esto que siempre que diseñemos una web debemos tener muy en cuenta cómo combinarlo con un enfoque SEO-
Índice de Contenido
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.
Cómo combinar el diseño web y el SEO para enfocarnos en el éxito de nuestro proyecto
Hace tiempo, a los buscadores les importaba poco la estructura de nuestra web. Incluso podías generar un contenido con la misma palabra clave repetida en muchas ocasiones ¡y posicionaba! Pero esto hace mucho que dejó de ser así.
Los buscadores como Google cada vez entienden mejor las búsquedas de los usuarios y el contenido de las webs. Esto hace que la optimización de nuestras webs para el posicionamiento se haya vuelto cada vez más compleja. Pero tranquilos, tan solo tendremos que entender qué es lo que quiere Google (o más bien el usuario) para conseguir nuestro objetivo, posicionar lo mejor posible.
Para combinar el diseño web y el SEO debemos tener un conocimiento detallado del SEO On Page para así enfocarnos en el posicionamiento desde el instante en el que comenzamos con un proyecto web.
Qué partes del diseño web 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.
Entonces, fijándonos en las pates visibles de la web, entre las más importantes encontramos:
- Estructura de la web
- Diseño responsive
- Cercanía entre enlaces
- Jerarquía HTML (sobre todo los encabezados)
- HTML semántico
- Contenido oculto o semioculto
- Saltos de estructura en la carga (o CLS)
- Tamaño del texto
- Above the fold, o la primera parte visible al cargar una web
- Tamaño y peso de las imágenes
- etc
Ya sea que queramos saber cómo contratar un diseñador web o queramos 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
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
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 al mayor número de personas posible, tengan discapacidad o no. 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
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 web y que sea de calidad, que hacer una web que no vaya a obtener tráfico.
En WebHero proporcionamos servicios de SEO profesional. Consúltanos sin compromiso.