Cómo mejorar el SEO con diseño web

¿Cual es el objetivo principal al crear un sitio web?, que sea atractivo, innovador, que ofrezca a los usuarios toda la información y funcionalidad que requiere el negocio, y que sea muy intuitivo, por supuesto, pero si no nos encuentran, de poco valen todos nuestros esfuerzos.

¿Cómo llegar a estar en las primeras posiciones de Google?

Estudios recientes nos dicen que solo el 0.44% de las personas que buscan en Google hacen clic en la segunda página de resultados y el 90,63% de las páginas web no reciben tráfico alguno de Google .

Por lo tanto, es fundamental crear un sitio web que ayude a nuestros clientes a superar estos porcentajes optimizando para los motores de búsqueda: SEO

La estrategia de optimización de búsqueda para un sitio web generalmente es administrada por expertos en SEO y otros miembros del equipo de marketing, y no por el diseñador web, creo que es un error, todos deben de estar en el mismo barco y aportar su conocimiento en busca del objetivo común.

La realidad es que el trabajo de los diseñadores web tiene un gran impacto para el rendimiento de un sitio web en el ranking de posicionamiento. En lugar de esperar a que los expertos SEO nos den instrucciones sobre cómo optimizar mejor el sitio que diseñamos, ¿por qué no aplicar directamente las prácticas SEO que están vinculadas con el propio diseño web?.

En este artículo voy a comentar algunas técnicas muy elementales pero que en muchas ocasiones observo coo no se tienen en cuenta, y que como diseñador me permiten encontrar el equilibrio adecuado entre un buen diseño y un SEO eficaz.

Cómo mejorar el SEO con diseño web

• Dispositivos móviles primero
• Facilitemos la conversión
• Lógica y orden al diseñar la navegación
• Estructura cuidadosamente cada página
• Administra la apariencia de búsqueda de cada página
• Mucho mejor si usamos datos estructurados
• Optimizar las imágenes para aumentar la velocidad
• La importancia de las pruebas A/B

Dispositivos móviles primero

En 2019 Google hizo un cambio en su indexación, priorizando el diseño para dispositivos móviles en nuevos sitios web. A partir de septiembre de 2020, la indexación de dispositivos móviles como primera opción se convirtió en el método predeterminado para todos los sitios web.

Cada sitio web debe tener un diseño receptivo y la experiencia de los usuarios tiene que ser excelente en todos los dispositivos. Lo primero es diseñar la experiencia móvil, ya que es la que afectará a la clasificación del sitio web.
Hace unos años los diseñadores creábamos una versión reducida del sitio web para los usuarios móviles, o simplemente no se le prestaba mucha atención. Lo que nos faltaba, si teníamos poco con todos los navegadores desktop, ahora encima a probar un sinfín de dispositivos, resoluciones, particularidades touch…, uff

Veamos lo positivo, lo bueno de crear un sitio web desde la experiencia móvil en primer lugar es que a los diseñadores nos anima a comenzar con lo esencial y luego construir a partir de ahí. De esta manera, es más fácil crear algo que se pueda usar (lo cual es increíblemente importante para el SEO).

Facilitemos la conversión

Los errores de diseño pueden crear mucha frustración para los visitantes de nuestros sitios web. Ten presente que no les cuesta mucho abandonar, tienen mejores cosas que hacer que intentar averiguar cómo funciona nuestra retorcida mente de diseñadores.

Si el sitio web es difícil de navegar, las métricas clave de rendimiento como la tasa de rebote, el tiempo en el sitio, las páginas visitadas, etc., se reducirán, lo que nos afectará a la clasificación del sitio.

Por supuesto, el UX de calidad es crítico para crear experiencias de usuario sin fricciones. Es importante la colaboración de UX y del UI cuando se trabaja en un sitio web, e incluso si ambos roles coinciden, mejor que mejor, al fin y al cabo, todo es diseño. 

El diseño es tan importante para la usabilidad como para tener un camino claro hacia la conversión. Para un diseño orientado a la conversión me gusta considerar temas como:

• Colocar sólo las páginas más importantes en el encabezado de la navegación superior. Todo lo demás puede ir a un segundo nivel, en el pie de página o dentro de los enlaces internos.
• Solo una llamada a la acción a la vez. Dejemos perfectamente claro cuál es la oferta y adónde irán los usuarios cuando hagan clic en el enlace.
• Acortar el camino hacia la conversión. Esto no significa eliminar las páginas de información que queremos mostrar en nuestro sitio, pero sí simplificar la ruta desde la entrada hasta la conversión cuando los visitantes están listos para ello.
• Diseño sencillo y predecible. Por ejemplo, si necesitamos más información de contacto que la básica, dividamos el formulario en varios pasos con una barra de progreso, no les agobies, ni les engañes, seamos transparentes.
• Eliminemos todas las distracciones al pedirle a un visitante que convierta. En las páginas clave del sitio, prescindiremos de distracciones como anuncios, ventanas emergentes, diseños y animaciones invasivas para que los visitantes puedan concentrarse en lo que se les está pidiendo que hagan.

Lógica y orden al diseñar la navegación

Una navegación bien construida nos ayudará con dos asuntos relacionados con el SEO: 

Primero, si Google no puede encontrar sus páginas o ver cómo se unen, será muy difícil para él determinar si vale la pena clasificar el sitio. Por lo tanto, necesitará una visión clara de la arquitectura de la información de su sitio.

En segundo lugar, si los visitantes no pueden averiguar cómo obtener la información que necesitan o realizar la acción que desean, no espere que se queden por mucho tiempo.

Así pues, hay que construir los menús simples y predecibles para facilitar el trabajo a Google y a nuestros usuarios. Al diseñar su navegación y el mapa del sitio, tenga en cuenta lo siguiente:

Coloquemos el menú de navegación donde los visitantes esperan encontrarlo (por ejemplo, en la parte superior a la derecha del logotipo). La ubicación predecible los lleva rápidamente a donde quieren ir.

Vincular la navegación móvil a un ícono de hamburguesa reconocible y con el que todos los usuarios están familiarizados. También podemos incluir la palabra "MENÚ", en letra pequeña debajo del icono, para que sepan exactamente dónde está.

No demos por sentado que los usuarios saben cual es la función que representan los iconos, … “iconos”, este tema creo que merecerá que le dedique un post (próximamente).

• Nombres cortos en las páginas y que sean fácilmente comprensibles. Por lo tanto, la página que hable de la empresa será "Acerca de" o "Acerca de nosotros", no "Acerca de nuestra empresa". Simpleza, menos es más.
• Ordenemos con lógica las páginas de izquierda a derecha en el menú. Si las personas quieren visitar las páginas de Servicios o Catálogo antes de ir al Contacto, éstas deben aparecer en primer lugar.
• Uno o dos niveles en el menú principal, cuanto más bajemos más liamos al usuario y más le costará decidir a dónde quiere ir.
• La jerarquía desde el primer nivel hasta los niveles posteriores tiene que tener sentido.
• Analicemos las rutas para que su propia construcción nos de toda la información de la página mostrada.
• Las migas de pan ayudan a los visitantes a ubicarse y volver sobre sus pasos si la navegación puede llegar a ser muy profunda.
• Valoremos la creación de un buscador en la zona de navegación principal. Si los visitantes saben exactamente lo que están buscando o simplemente tienen una pregunta, usarán este recurso. Pero claro está, tendrá que estar exquisitamente diseñado y desarrollado para que aporte valor a nuestros usuarios.
• Podemos ser creativos en muchos otros aspectos al diseñar un sitio web. La navegación, sin embargo, es un lugar donde deberíamos de ir a lo seguro.

Estructura cuidadosamente cada página

La estructura de la página es esencial por dos razones:

Escaneabilidad: para que los visitantes y Google puedan determinar rápidamente de qué se trata la página.

Legibilidad: para que los visitantes se sientan animados a leer la página en su totalidad, en lugar de simplemente escanearla.

Usemos etiquetas de encabezado para que los robots de indexación y especialmente Google detecten lo bien estructuradas que están nuestras páginas (al mismo tiempo que informamos de que se trata la página): 
Por qué las etiquetas de encabezado son tan importantes.

Cuando se trata de agregar texto a una página web, no todo tiene que ser texto de párrafo, un bloque de texto es difícil de leer. Esta es una de las razones por las que las etiquetas de encabezado, como H2, H3, H4, etc., son importantes. El usar encabezados no se trata solo de agregar un fragmento de texto más grande y estilizado. De hecho, tiene que mejorar la facilidad con la que los robots de los motores de búsqueda pueden escanear y comprender el contenido.

Las etiquetas de encabezado nos ayudan a los diseñadores web a crear un sentido de jerarquía en la página. Etiquetas de encabezado en una publicación de blog, comenzando con H1 para el título, H2 para el subtítulo y seguidas por el texto del cuerpo. Supongamos que estamos diseñando una página web que detalla los servicios de marketing en redes sociales de una agencia. Las etiquetas de encabezado pueden tener este aspecto:

<h1> Servicios de marketing en redes sociales </h1> 
     <h2> El valor del marketing en redes sociales para las empresas </h2>
          <h3> Aumente la visibilidad de su marca </h3> 
          <h3> Haga crecer su autoridad y conviértase en un influyente en su espacio </h3>
          <h3> Construya una comunidad alrededor de su marca </h3>
     <h2> Marketing en redes sociales con la agencia X </h2>
          <h3> Desarrollo de estrategias de redes sociales </h2>
          <h3> Creación de contenido en redes sociales </h2>
          <h3> Gestión de campañas publicitarias en redes sociales </h3>
     <h2> Permítanos administrar su marketing en redes sociales </h2>

La etiqueta H1 es el título de la página. Las etiquetas H2 son los temas principales. Las etiquetas H3 son subtemas de los H2 correspondientes. Los análisis más profundos también utilizarían etiquetas H4 y H5.

Hay miles de millones de sitios web en línea, por lo que los bots de Google no pueden leer el contenido completo de cada página y clasificarlos en función de este. En su lugar, se utilizan estas etiquetas de encabezado para obtener un resumen del propósito de la página. Estas etiquetas también ayudan a los robots de indexación a determinar si el contenido está organizado correctamente y si el tema se ha descompuesto por completo.
Por supuesto, también hay que pensar en la experiencia del usuario.

Para páginas más largas, las etiquetas de encabezado son útiles para establecer claros cortes en el texto, así como para enviar señales a los visitantes cuando se presenta un cambio de tema (o pasar a un subtema). Las etiquetas de encabezado también son útiles para la accesibilidad web, ya que permiten a los visitantes que usan lectores de pantalla obtener una descripción general de alto nivel de la página antes de sumergirse en el contenido.

Administra la apariencia de búsqueda de cada página

Una de las primeras cosas que aprendemos sobre cómo mejorar el SEO son los metadatos de búsqueda. 

Si bien debe combinarse con contenido y diseño de alta calidad, agregar metadatos al contenido realmente puede ayudarnos a mejorar la visibilidad y la clasificación de un sitio web en las búsquedas.

Aunque no samos responsables de escribir los metadatos, si los implementamos. Por lo tanto, es importante saber qué incluir y cómo se comportan en la búsqueda.

Hay dos elementos de metadatos que aparecen en los resultados de búsqueda de Google: 

• La etiqueta del título también es la etiqueta H1 de la página. Esto es lo que aparece como título de la página web en los resultados de búsqueda. Debe tener menos de 60 caracteres.
• La meta descripción es lo que acompaña a la etiqueta del título en los resultados de búsqueda de la página. Debe tener menos de 160 caracteres.

Como podemos imaginar, si estos no están bien redactados, y eso incluye mantenerse por debajo de los límites de caracteres requeridos, los visitantes pueden ignorar una página web si no se ve bien en los resultados de la búsqueda.

Reglas generales de metadatos a seguir: 

• Hacerlas únicas, no queremos que las páginas de nuestro sitio web compitan entre sí en la búsqueda. 
• Deberán de ser descriptivas para que el buscador pueda decidir fácilmente si vale la pena hacer clic en su página o no.
• La palabra clave de enfoque tiene que estar incluida en el título, la descripción, el slug y la primera imagen de la página.

La palabra clave de enfoque es la palabra o frase principal alrededor de la cual se escribe una página. Una vez más, se trata de enviar las señales correctas a Google y a sus visitantes. Si podemos transmitir repetidamente que esta palabra clave/tema en particular es el argumento central de la página, las posibilidades de clasificar esa palabra clave de enfoque (así como las palabras clave relacionadas) aumentarán.

El slug es parte de la URL, y hace referencia a una página web específica, tiene un impacto en la clasificación de la página, debe contener la misma palabra clave de enfoque que el título y la descripción (para que sea coherente al transmitir a Google de qué se trata la página) y ser breve, pero descriptivo.

Todas las imágenes de una página deben incluir texto alternativo. Básicamente, es una descripción de lo que sucede en el contenido. La imagen principal de la página debe incluir la palabra clave de enfoque como parte de sus metadatos y proporcionar un buen complemento para el tema general.

Entonces, las etiquetas alt realmente hacen tres cosas por nosotros: 

• Proporcionan a Google más información sobre el tema de una página. 
• Le dan a una página la oportunidad de clasificarse en Google Imágenes, así como en la búsqueda normal de Google.
• Son útiles para la accesibilidad ya que describen claramente el contenido de la imagen.

Mucho mejor si usamos datos estructurados

El objetivo obtener funciones especiales SERP de Google en los resultados orgánicos.

Google genera una SERP (página de resultados del buscador) como respuesta a una consulta. Las funcionalidades SERP son resultados especiales en las SERPs que sirven para ofrecer a los usuarios información útil con el mínimo esfuerzo, únicamente haciendo clic en el resultado.
Éstos incluyen:

• Texto destacado
• Historias destacadas
• Cuadro "La gente también pregunta"
• Resultados de mapas locales
• Resultados de "Imágenes para"
• Resultados del carrusel de videos
• Gráfico de conocimiento
• Y más

Si bien no se puede garantizar un primer lugar en los resultados de búsqueda a menos que paguemos por un anuncio de Google, si que podemos trabajar para mejorar las posibilidades de clasificación al incluir datos estructurados dentro de sus páginas.

Los datos estructurados son similares a los metadatos en el sentido de que son algo que se escribe en el código. Estos datos estructurados le dan a los motores de búsqueda información especial al contenido de la página.

Optimizar las imágenes para aumentar la velocidad

Durante años, hemos sabido que la velocidad de carga afecta la clasificación de las páginas. Y no es solo porque Google crea que los sitios web deberían cargarse rápidamente, es porque casi la mitad de todos los consumidores no tienen la paciencia de esperar más de un par de segundos para que se cargue una página.

Cuando miramos los elementos que ralentizan una página web, las imágenes tienden a ser uno de los mayores culpables.

Entonces, ¿deberíamos de crear nuestros sitios web sin imágenes?
Ya sabemos lo intimidante que puede ser una gran cantidad de texto para los visitantes, además las imágenes brindan un alivio muy necesario al mismo tiempo que mejoran la comprensión del tema, y juegan un papel importante en el lenguaje visual de la página.

Entonces, ¿cómo se mejora el SEO sin comprometer las imágenes?

Esto es lo que debemos hacer: 

• Utilizar imágenes que contribuyan a contar su historia de manera coherente y, al mismo tiempo, respalden el mensaje general y la misión del sitio. 
• Usar formatos de imagen ligeros. WebP es mejor ya que es un formato liviano que se comprime más pequeño que cualquier otro tipo de imagen. Sin embargo, no es compatible con todos los navegadores. SVG y JPG son opciones ligeras que puede utilizar como copia de seguridad.
• Cambiar el tamaño de las imágenes para que se ajusten al uso de la página, especialmente si solo necesita una miniatura o una imagen pequeña.
• Comprimir las imágenes hasta el punto en que su calidad se conserva de manera óptima, pero los tamaños de archivo son más ligeros y mucho más manejables.
• Movamos los archivos de imagen a un CDN utilizando servidores proxy y centros de datos. Al alojarlos en el CDN, no solo estos se cargarán más rápido,  sino que nos aportará un descanso al servidor web y ayudará a que todo lo demás se cargue más rápido.

La importancia de las pruebas A/B

Los consejos anteriores no son negociables, responden a las principales quejas de Google y de los consumidores cuando se trata de sitios web en términos de calidad, compatibilidad con dispositivos móviles, velocidad, etc.

Sin embargo, hay mucho más que podemos hacer como diseñadores web para mejorar la clasificación de un sitio web.

Con las pruebas A/B, aportamos un enfoque tanto para la optimización de motores de búsqueda como de la tasa de conversión.

Esta técnica nos permite mejorar de forma lenta pero segura la experiencia del usuario y observar cómo disminuyen las tasas de rebote y aumenta la clasificación de las páginas.

También puede utilizar las pruebas A / B para ayudar a que las páginas que ya tienen éxito tengan un rendimiento aún mejor en la búsqueda y con los visitantes. 

Podemos experimentar con: 

• Tipografía : ¿Quizás las nuevas fuentes harán que una página sea más legible?
• Fotos : ¿los visitantes responden de manera más positiva a las fotos con personas en ellas en lugar de a las imágenes abstractas?
• Formularios : ¿hay ciertos campos no obligatorios que nunca se completan y solo están desperdiciando espacio?
• Botones : ¿los botones de llamada a la acción deben ser de un color o tamaño diferente para que se noten más?

Comencemos con los elementos más pequeños del sitio web, es sorprendente cómo los pequeños ajustes pueden influir en el rendimiento general del sitio web.