Diseño web SEO

El diseño web y el SEO son dos mundos aparentemente enfrentados, siempre han surgido conversaciones entre departamentos de diseño y de SEO con posturas opuestas, sin embargo, son dos áreas totalmente complementarias y que necesitan de un trabajo conjunto para sacarle el mayor rendimiento a tu página web. Si quieres saber porqué es importante abarcar un proyecto de diseño web seo, ¡no dudes en continuar leyendo hasta el final!

Como hemos comentado estos mundos no tienen porqué estar enfrentados, y es eso precisamente lo que conocemos como «diseño web SEO», una estrategia y enfoque del diseño web cuyo objetivo es optimizar tanto el contenido, la estructura y el rendimiento de tu web de manera que no se vea perjudicada su visibilidad orgánica en los diferentes motores de búsqueda sin renunciar a la buena presencia de tu web y poniendo en el centro la experiencia de usuario.

Hay diversos puntos clave para que el diseño no comprometa el posicionamiento de la web o viceversa, que por culpa de una sobreoptimización el diseño se vea comprometido y muchas de ellas pueden pasar desapercibidas a simple vista. Por poner un ejemplo, uno de los más claros, las imágenes. A menudo se da la situación de que bien por el formato o bien por el nivel de compresión, la diferencia visual entre una imagen que pesa 1 MB y otra que pese 95KB sea totalmente imperceptible al ojo humano (no compromete la apariencia), y por el contrario, la carga de estos dos recursos puede ser muy diferente en cuanto a tiempo, y esto, sí perjudica la experiencia del usuario a la hora de navegar por una web.

Hay muchos factores que toman parte en una estrategia de diseño web seo, a tener en cuenta tanto desde el punto de vista del diseño, como desde el punto de vista SEO. A continuación mencionaremos los más importante y los que más impactan en el rendimiento y experiencia de usuario.

La navegación es, si no el que más, uno de los puntos más importantes del diseño web y a su vez, del SEO. ¿Porqué? son muchas las razones:

• Mejora la experiencia del usuario: Si estamos en un Marketplace grande con cientos de categorías, el usuario debe tener facilidad a la hora de moverse entre ellas para encontrar finalmente el tipo de producto deseado. Un usuario frustrado porque le ha llevado más tiempo de la cuenta encontrar lo que busca tiene muchas menos posibilidades de realizar la compra que otro que tenga más facilidades para llegar a su objetivo.
• Mejora el enlazado interno: Uno de los principales factores de posicionamiento es tu estrategia de interlinking o enlazado interno. Un buen diseño de la navegación debe facilitar que ninguna url quede huérfana y no haya demasiados niveles de profundidad entre unas urls y otras. Si un usuario tiene que hacer más de 10 clicks para alcanzar la página deseada, probablemente, no contemos con una estrategia de navegación óptima.

Bloques recomendados para mejorar la navegación de un Ecommerce

Pongamos el caso de un ecommerce, hay muchas técnicas y bloques que implementar en una web para conseguir que el usuario pueda navegar fácilmente por ella y, a su vez, consigamos transferir autoridad a todas las páginas de nuestra tienda online en función de su importancia. Algunas de las más importantes son:

• • Menú principal: Es el principal elemento de navegación de cualquier web y en el que deben estar la mayor parte de las páginas enlazadas. Debe contar con una estructura clara y organizada de manera que al usuario le resulte trivial su utilización y ser un bloque común para todas las páginas de la web.Existen diversos tipos de menú más o menos estandarizados. Lo más común es encontrarse con un menú principal con categorías principales y subcategorías tras un desplegable. También nos encontramos, y cada vez con más frecuencia, el menú en forma de hamburguesa (en la versión desktop) sobre todo en grandes marketplace que cuentan con demasiadas categorías difícilmente organizables en horizontal.
  • Row de categorías hermanas en listados de producto: La mayoría de veces el usuario accede a una categoría principal pero busca un producto mejor especificado en una subcategoría. Por poner un ejemplo, un usuario puede querer comprar un colchón viscoelástico y para ello ha accedido a la categoría colchones. Si en esta categoría encontrara un row con pastillas o iconos de subcategorías de colchones, probablemente quiera acceder directamente a colchones viscoelásticos, que es la que, con más probabilidad va a satisfacer sus necesidades de compra.
    Esta fila de pastillas, puede enlazar subcategorías o categorías hermanas, todo de pende de la estructura que queramos implementar.
  • Filtros de categoría: Efectivamente, otro elemento de navegación muy útil son los filtros de categoría, y es que, la capacidad de filtrar los productos en una categoría sin necesidad de buscar en otras es un elemento potente que permite al usuario jugar con las diferentes combinaciones y, además, en cuanto a optimización SEO, ofrece posibilidades a la hora de dar visibilidad a productos que desde la categoría principal no la tienen, ya que se hayan en segunda o tercera página y no suelen ser rastreados por el robot.

  Si además, conseguimos que cada una de esas urls tenga contenido diferenciable, se nos amplían las posibilidades de llegar a más usuarios de manera orgánica

• Migas de Pan: Las migas de pan o breadcrumbs son otro elemento de navegación imprescindible para tu web. Las migas de pan permiten al usuario retornar en la jerarquía de urls. Por ejemplo, puede que el usuario esté en una ficha de producto y quiera retornar a la categoría de ese producto sin tener que pasar por el menú. Las migas de pan aportan facilidad y agilidad a la hora de moverse en una página web.

Además, mejora tu estrategia de enlazado interno y puede generar fragmentos destacados que mejoren el CTR de los resultados del buscador si se marcan correctamente con datos estructurados de google.

• Footer:  Por último, el footer o pie de página, es otro elemento que mejora considerablemente la navegación, sobre todo para enlaces que tienen que ver con las propiedades de la empresa, como los típicos about us, condiciones de servicio, cookies etc. También se suelen incluir las redes sociales, incluso las últimas publicaciones de estas. Además, es un apartado que a nivel SEO puede servir de utilidad para enlazar páginas y categorías que reciben menos enlaces, pero ten claro que un enlace que proviene de footer no tiene el mismo valor que un enlace contextualizado en primer párrafo del contenido, es decir, el footer puede ayudarnos a que ciertas páginas no queden huérfanas, pero no va a significar que estos enlaces determinen un cambio de posición y de impresiones drástico en las SERPS.

Consejos para optimizar el diseño SEO de la navegación

• Nuestro consejo para este tipo de elementos, es asegurarnos siempre de que los enlaces de navegación sean rastreables por los navegadores. Esto puede parecer trivial, pero a menudo nos encontramos con menús y otros elementos que cargan por Javascript y que no están presentes en el código fuente de la página en html. Los robots, tienen mucha más facilidad a la hora de interpretar código en html.
• Por otro lado, utiliza enlaces mediante la etiqueta <a href=…>, intenta que los anchor text (textos anclas) y los títulos de enlace apunten a la palabra clave exacta, además, asegúrate siempre de que estos enlaces sean follow, para cerciorarnos que el robot puede seguirlo correctamente.
• Utiliza la etiqueta html <nav> para definir estos bloques. El uso de etiquetas html semánticas es una buena práctica recomendada por google. En este artículo sobre html semántico puedes encontrar información al respecto, hay muchos elementos semánticos para clarificar todo tu contenido dentro de la página. ¡Aprende a utilizar etiquetas semánticas de html y mejora la estructura de tu contenido!
• Evita enlaces mediante javascript ya que el robot suele tener dificultades para seguirlos. La ofuscación de enlaces no es para nada una técnica recomendada por Google, y nadie nos asegura que en un futuro sea una técnica penalizada.

Como hemos dicho siempre, piensa en el usuario. Quiero hacerte una pregunta. ¿Crees que dos contenidos que tienen exactamente las mismas palabras pueden ser calificados como contenido de calidad y contenido basura a la vez?

Efectivamente, veamos en la siguiente imagen la diferencia a la hora de leer y comprender un contenido:

Como puedes comprobar, la información en ambos textos es prácticamente la misma, sin embargo, el de la izquierda es mucho más legible y comprensible gracias a que está enriquecido con negritas, tablas, imágenes, listados, encabezados… Todos estos elementos son los que nos brinda html para poder construir contenidos de calidad legibles y comprensibles por el usuario. Por eso, intenta siempre en la medida de lo posible hacer uso de estos elementos para enriquecer tu texto ya que a parte del usuario, los robots van a tener la capacidad de comprender mejor tu contenido y por tanto tenerlo en cuenta a la hora de ranquear para las keywords objetivo. Combina texto con imágenes para dar frescura a tu contenido.

Usa un diseño responsive a la hora de maquetar tu página web. Un diseño adaptable le va a permitir al usuario tener una buena experiencia independientemente del dispositivo con el que acceda a tu página. Usa este tipo de plantillas antes que un diseño adaptativo, que te va a generar dolores de cabeza en cuanto a tiempos de ejecución y mantenimiento de los mismos. Haz uso de las media query para que el contenido se ordene correctamente en cada uno de los breakpoints.

A nivel SEO, Google ha remarcado en diversas ocasiones que el contenido de una página no debe ser diferente según el dispositivo en el que se acceda. En este artículo sobre prácticas recomendadas para la indexación centrada en móviles deja bien claro que prefiere contenidos adaptables y que hay que evitar esconder contenido en la versión mobile, y en su lugar, hacer uso de acordeones y otros elementos html que nos permiten ahorrar espacio mostrando al usuario todo el contenido disponible.

Un tema a parte son las imágenes, y es que si lo recuerdas, hemos comenzado este artículo hablando sobre ellas y como hemos comentado, dos proyectos pueden verse igual a nivel diseño y sin embargo la experiencia de usuario puede ser considerablemente peor en uno que en otro. Hay dos factores que influyen de manera drástica en esta experiencia, velocidad de carga  y accesibilidad del contenido.

¿Cómo optimizar las imágenes para mejorar la velocidad de carga?

Las imágenes sin optimizar son recursos muy pesados que requieren más tiempo de descarga para el servidor, este tiempo, si es una imagen en above the fold (primer vistazo de la pantalla) es tiempo que el usuario pasa sin ver el contenido principal, tiempo de espera que genera frustración y que es causante de abandonos de página, mala cosa. Hay diversas técnicas complementarias entre ellas que nos pueden ayudar a reducir tanto peso, como tiempo de carga, aquí te contamos algunas de ellas:

• Carga las imágenes en tamaño adecuado: El primer concepto básico, antes de ponernos a comprimir una imagen, es que esta cargue con las medidas adecuadas, esto es, si una imagen en tu web nunca va a cargar a más de 1920×1080, ¿Porqué la vas a subir más grande? todo lo que supere la medida máxima son MB y segundos de descarga desperdiciados que no sirven para nada.
• Carga las imágenes en formatos de nueva generación: Los algoritmos de compresión avanzan a pasos agigantados, lo que hoy en día nos permite contar con formatos WEBP, que comprimen considerablemente el tamaño de la imagen sin que esta compresión afecte a la correcta visualización. Hemos de recordar que google recomienda que ninguna imagen supere los 100kb de peso, por muy grandes que sean. Es por eso que muchos CMS cuentan con plugins o addons capaces de convertir todas las imágenes a formatos de nueva generación y optimizar su peso para mejorar la carga.
• Carga en paralelo las imágenes mediante CDN: Los CDN (Content Delivery Network) son un conjunto de servidores colocados a lo largo de una red que almacenan copias de datos con el fin de ser servidos con más velocidad al usuario gracias a su proximidad. En el caso de las imágenes, la carga en paralelo nos permite que la descarga de contenido no se vea bloqueada por las imágenes, ya que estas son servidas por otro servidor, y por ende, mejora considerablemente los tiempos de carga. Esta es una práctica cada vez más utilizada y común, es por eso, que CMS como wordpress o prestashop, ya cuentan con plugins o módulos como cloudflare que permiten implementar este tipo de carga. Además, muchos de estos servidores no solo cargan la imagen en paralelo, si no que te permiten hacer una compresión de la imagen. Por todo ello es recomendable utilizar estas redes de distribución de contenido para las imágenes.

¿Cómo mejorar la accesibilidad de las imágenes?

Te estarás preguntando qué es eso de accesibilidad, pues bien, Google define en su artículo sobre accesibilidad que un sitio es accesible cuando a su contenido tiene acceso cualquier usuario independientemente de su discapacidad y gama de tecnología con la que se intente acceder al contenido. Bueno, ¿y eso qué tiene que ver con las imágenes? Pues bien, el elemento alt de las imágenes, por ejemplo, es el que se usará cuando un usuario invidente para acceder a tu contenido activando el modo lectura o talback, además es elemento que aparecerá si la imagen no consigue cargarse por cualquier motivo. Es por eso que siempre debemos hacer uso de este elemento para mejorar la experiencia de usuario y el SEO de nuestra web, al menos en lo que corresponde a las imágenes.

Si te has perdido en toda la información que te acabamos de dar, aquí te dejamos una pequeña tabla resumen en la que vemos cada uno de los puntos y nuestras recomendaciones:

Como has podido comprobar, hay una infinidad de razones y técnicas para que un diseño bonito no esté reñido con en el SEO si no todo lo contrario, que sean complementarios para ofrecer tanto al usuario como a los buscadores, la mejor experiencia sin que ninguna de las partes se vea perjudicada por ello. Si necesitas darle un giro 360 a tu web para mejorar la experiencia de usuario, no dudes en ponerte en contacto. Desde Okisam contamos con un equipo de expertos en diseño web SEO que trabajan totalmente alineados con las últimas tendencias en diseño web y en optimización para los motores de búsqueda, por eso, somos la mejor opción.