Cómo fue la charla «Consigue una arquitectura web escalable»

Los números

Apuntados a la charla: 69 personas.
Asistentes: 20 personas.
Se realizó el pasado 28 de septiembre de 2020 por streaming debido al confinamiento por coronavirus.

IMPORTANTE: Os recordamos que en la herramienta Slack tenemos un canal registrado para organizarnos y poder compartir la gestión de la meetup, concretamente el canal que usamos es #wpalicante de Slack WordPress España. Si quieres echar una mano, aportar ideas y formar parte más activa de esta comunidad sigue las instrucciones que aparecen en la siguiente página -> http://wp-es.es/slack/

Consigue una arquitectura web escalable: La charla

Volvemos de las vacaciones estivales con más ganas que nunca. A pesar del confinamiento por el coronavirus COVID-19, volvemos con vosotros desde WPAlicante con nuestras charlas online, ya que seguimos sin poder vernos en el espacio de ULab donde habitualmente nos reunimos.

Una vez más nos encontramos vía streaming. En esta ocasión nos acompaña como ponente Antonio Muñoz, SEO en Webempresa y especialista en analítica web así como apasionado del Link Building. Repite como ponente.

Nos hablará de la arquitectura web y cómo definir la mejor estructura en función del proyecto, haciéndolo escalable desde el primer día definiendo para ello:

Arquitectura de enlazado interno
Profundidad interna
Estructura de URL

Por supuesto, al final de la charla hemos contado con la tradicional ronda de preguntas, aunque lamentablemente en esta ocasión nos hemos tenido que saltar el networking acompañado de refrescos por motivos obvios. El streaming se ha podido realizar gracias a nuestros patrocinadores: Weglot, el plugin de WordPress para traducir tu web al idioma que desees. Lo podéis probar sin ningún compromiso ya que tiene de forma gratuita el uso para traducir hasta 2000 palabras a un idioma, además ocupa muy poco en el servidor. Y por si esto fuera poco, tenemos otros dos fuera de series que también nos patrocinan: el gran plugin de gamificación para tu WordPress GamiPress, que te simplica todo el mundo de la gamificación para que lo puedas incluir en tu WordPress de forma sencilla y chula y WebEmpresa un hosting especializado en WordPress, entre otros servicios, con varios planes disponibles para adaptarse a tus necesidades.

Os remarcamos a continuación algunos puntos que nos han resultado interesantes, aunque os incluimos al final de esta entrada el vídeo completo de la presentación, que en esta ocasión se realizó por streaming y se grabó para poder colgarlo luego en Youtube. También os enlazamos a la presentación que ha utilizado para desarrollar la charla sobre la arquitectura web escalable .

Fundamentos: Qué es la arquitectura web

Es la jerarquización de la información de nuestra web respecto del usuario, así como de Google.

En la arquitectura web intervienen tres factores:

Arquitectura de la información: cómo planteamos la web para que nuestro objetivo se cumpla, es decir, los distintos títulos (H1, H2, H3…), imágenes, si tenemos alguna tabla corporativa o gráfico, llamadas a la acción, etc.
Arquitectura de enlazado: cómo conectamos nuestras URLs, a través de qué enlaces, cuántos clics tiene que hacer el usuario para llegar donde quiere…
Arquitectura URL: cómo definimos nuestras direcciones de cada página, si incluye dominio, categoría, autor, fecha…

No existe una arquitectura perfecta, al final son varias piezas cuya combinación nos va a ayudar a cumplir nuestro objetivo.

Arquitectura de la información

H1: Presentamos la información general que se le va a dar tanto al usuario como al bot de Google.

H2 y H3: son complementos al H1. Hay que llevar cuidado porque no sólo hay que pensar en el usuario final sino también en Google. Hay que añadir semántica que ayude a Google a conocer el contenido de nuestra web. No valdría, por ejemplo, añadir un H3 que fuera «¿Qué más necesitas?» pq a lo mejor al usuario sí le vale pero a Google no le aporta nada, ya que es una frase demasiado genérica que no aclara por sí misma de qué estás hablando.

Debe utilizarse tanto para ordenar contenido como para atacar keywords relacionadas. No hay que utilizarlo nunca para dar estilos a una frase específica. Para aplicar estilo o llamar la atención hay otros métodos:

plugins para WordPress: hay plugins para dar estilos como TinyMCE Advanced
Gutenberg: permite modificar la tipografía y dar estilo sin necesidad de plugins adicionales.
HTML: <p style=»font-size:18px;»>Texto</p>
- Se puede utilizar esta etiqueta para añadir formato a un texto.

Arquitectura de enlazado

Cuando se habla de arquitectura web casi siempre se refiere a la arquitectura de enlazado, aunque en realidad hay que tener en cuenta los tres niveles que estamos comentando aquí.

Hay tres tipos de enlazados:

Vertical: Todo son niveles, y en cada uno se utiliza una long tail diferente y más específica. Ordenamos la información de forma vertical y dejamos muy claro a Google la estructura de la información.
Horizontal: todo se enlaza desde la home. Como mucho hay un nivel 2. En un sólo nivel tenemos toda la información.
Cluster: Es una combinación de las dos anteriores. Se utiliza normalmente para webs multitemáticas. Así, tendremos tantas líneas horizontales como temas distintos se traten y cada una de ellas tendrán verticalmente toda la información organizada.

No existe una arquitectura de enlazado perfecta, cada web tiene un contenido específico y requiere una arquitectura específica. Lo ideal sería poder hacer algo semejante a Wikipedia, donde no hay patrones específicos y cada enlace es libre y sólo está condicionado por la necesidad de relacionar la información. Si nos condicionamos a realizar una arquitectura vertical sólo para que Google la entienda muy bien pero para el usuario es incómodo y vas a perder ventas, no es una buena estrategia. Hay que encontrar un equilibrio entre la necesidad de SEO y la mejora del Negocio.

Por ejemplo, si tenemos una tienda de cerrajería local, no tendría sentido añadir un artículo sobre cómo eliminar spam de una web sólo porque ese artículo nos va a traer mucho tráfico. Si lo hacemos, estamos distorsionando el sentido de nuestra web y estamos atrayendo tráfico que no tiene nada que ver con nuestro tema de cerrajería.

Las razones para enlazar a un producto serían:

Accesibilidad (UX y SEO): Un usuario o bot debe poder acceder a la URL desde la Home.
Objetivo (Negocio): si nuestro deseo es que ese producto se venda o tenga mucha visibilidad, o se acceda desde determinadas partes de la web.
Naturalizar esa URL (SEO): los enlaces deben ser acordes a los contenidos. No tiene sentido enlazar una entrada explicando cómo gestionar Facebook si lo que queremos es vender ordenadores gaming, por ejemplo, aunque ese tema vaya a tener muchas visitas.
Transmitir autoridad (SEO): Es el único punto donde se puede forzar un poco el tema, siempre que hayamos cumplido los tres puntos anteriores. Por ejemplo, añadir un banner con un producto que no tiene que ver con la categoría en la que estamos. Puede ser porque el objetivo de negocio sea un producto caliente y aunque no tiene relación con nuestra categoría, sí atrae mucho tráfico y cumplimos objetivo de negocio. Es mejor poner este tipo de enlaces al final, donde no rompa mucho la estructura natural.

Si las siguientes razones se dan, y más si se dan todas, es motivo más que suficiente para no enlazar a un producto:

No hay accesibilidad (UX y SEO)
No cumple con el objetivo (Negocio)
No transmite autoridad (SEO)
No es natural (SEO)

A nivel teórico, mostramos dos posibles ejemplos de arquitectura de enlazado:

Un ejemplo, a nivel práctico, sobre cómo se presenta correctamente la información, para un eCommerce, sería la web de pcComponentes. Son muy similares las de Amazon, Carrefour, El Corte Inglés…

Arquitectura de URL

Hasta ahora siempre se ha buscado que la URL sea amigable. Ahora bien, hay varias formas de conseguir esto teniendo en cuenta otros factores:

/nombre-url/
/categoria/nombre-url/
/fecha-url/nombre-url/
/categoria/fecha-url/nombre-url/

Depende del proyecto el determinar qué arquitectura de URL hemos de elegir, en función de nuestros objetivos. Por ejemplo, en un periódico tiene sentido añadir después de la categoría una fecha, mientras que para un eCommerce puede tener sentido después de la categoría añadir la identificación de cada uno de los vendedores para luego poder analizar por cada vendedor qué trafico tiene.

La información se puede obtener de distintas herramientas. Todas ellas se podrán utilizar siempre y cuando configuremos bien nuestra arquitectura URL. También es importante que se haga desde el primer momento porque si no, afectará al SEO aunque se hagan redirecciones:

Ahrefs: Se puede tomar la categoría de WordPress y siempre que lo tenga configurado como prefijo, se pueden ver los dominios de referencia, las palabras clave posicionadas, así como el tráfico orgánico.
Data Studio.
Screaming frog: Es interesante porque puedes incluir determinadas URLs o excluirlas, sobre todo para webs grandes donde haya miles de URLs. También se pueden incluir niveles de ruta para analizar, por ejemplo, un nivel 1 que sea una categoría y un nivel 2 que sea el año desde el que empezamos el análisis. Así también acotamos la revisión para webs grandes.
Search Console.

Es interesante tener una arquitectura URL definida desde el principio.

Errores más comunes en la arquitectura web

Elementor y H1: Elementor permite jugar con los H1 y personalizar el que genera WordPress por defecto. El problema es que no lo elimina sino que lo oculta con una clase, pero Google lo sigue encontrando en el código. Eso genera problemas.
Carga por Ajax y botón «Ver más»: Puede pasar que al hacer scroll aparezcan más productos o al pulsar un botón muestra otra página de productos. Como Google no hace scroll ni pulsa botones, no se van a posicionar todos los artículos. Si queremos que se posicionen los productos sin más, es mejor que no haya paginación para que Google los encuentre todos.
URL no enlazada pero sí rastreada: Podemos cometer el error de simplemente no enlazar una URL para que Google no la encuentre, porque en este momento no nos interese. El hecho es que Google tiene diferentes modos de rastreo, más allá de si está enlazada directamente o no., por ejemplo, que esté en el sitemap o que tenga un backlink desde otro sitio externo. Por ello, aunque no la enlacemos, es posible que Google sí que la rastree. Cuando indicamos por txt que no la rastree lo que realmente estamos diciendo es que no analice su contenido pero sí que la localizará igualmente.
Google rastrea siempre desde la home: En el 90% de los casos sí es así, y cuando Google empieza a rastrear lo hace desde la Home. Pero no siempre es así. Por ejemplo, si tenemos una web estática que no varía nunca con un apartado de blog que contiene información interesante que vamos actualizando todos los días, Google acabará rastreando más la parte del blog que nuestro Home. Al final, el rastreo depende de la antigüedad de cada zona de la web y el mantenimiento que hagamos de cada una.
Fusionar contenido que compite por una keyword: Normalmente este tipo de problemas viene por arquitectura, porque Google no tiene claro que una es una tuerca del 6 y otra del 8. Para solucionarlo se podría generar muchos enlaces a ambos elementos, indicando claramente que unas son del 6 y otras del 8. Así Google acabará entendiendo que son dos productos distintos y dejarán de competir. Fusionar contenido ensucia mucho el contenido y estropea la arquitectura.

Preguntas y temas de networking final

PREGUNTA: ¿Qué plugin recomendarías para hacer cambios de permalinks en WordPress?

RESPUESTA: Custom Permalink es el que suelo usar. Para la mayoría de Webs soluciona el problema. En algún caso con WooCommerce hay que meterle mano para evitar errores.

PREGUNTA: ¿Cómo planteas el árbol de arquitectura web?¿Es mejor usar papel y lápiz o con la experiencia se puede escribir de tirón?

RESPUESTA: Yo soy muy de papel. Me siento con el cliente y analizo… Existen algunas herramientas para hacer un mapa web Octupus map, que es gratuita y permite dibujar cómodamente la arquitectura. Puede ser incómoda par webs muy grandes, ya que visualmente es difícil de definir completa.

PREGUNTA: ¿A la hora de utilizar los encabezados de nivel H1, ¿cómo gestionas el uso de sliders en las páginas? Es decir, hay veces que el título de la página lo muestra el slide principal, pero muchos plugins para montar sliders no utilizan la etiqueta H1 para el «texto principal».

RESPUESTA: El primer slider sería el H1 y para mí sería el más importante. El resto de sliders tendrían el H2. Aun así también digo que no me gusta utilizar sliders. En caso de que sea el propio plugin el que no utiliza el H1 para el texto principal, ya habría que modificar el plugin. El problema de esto es que cuando actualices el plugin todos tus cambios se perderán, así que tendrías que tener un plugin hijo o algo similar.

PREGUNTA: ¿Algún otro ejemplo de web con una arquitectura interesante para tomar ejemplo?

RESPUESTA: Para una arquitectura mediana, la de Pc Componentes que ya he comentado. Para una arquitectura más pequeña, Dosfarma puede ser un buen ejemplo.

Glosario

Long Tail: Es un término de búsqueda en nuestra web por el que queremos posicionar y que es más específico que una palabra clave. Por ejemplo, «ordenador» podría ser una palabra clave para una web de venta de componentes informáticos, y «ordenador potente para gaming» podría ser una long tail.
Bot: Es un programa informático preparado para realizar tareas repetitivas a través de internet comunicándose con el usuario, es decir, imitando un comportamiento humano. Suelen utilizarse para dar información al usuario o aportarle algún tipo de ayuda básica.
Producto Caliente: Es aquel que tiene un alto volumen de rotación, ventas, ofertas o por ser muy novedoso y por ello se vende mucho. Este tipo de productos pueden aparecer en banners de páginas que a lo mejor no guardan relación con él pero que a nivel de negocio es una estrategia que funciona para su venta.
UX: Corresponde con las siglas de User eXperience, que significa Experiencia de Usuario en inglés. Engloba todas aquellas técnicas y herramientas que mejoran la opinión que el usuario tenga de una web porque sea intuitiva, fácil y agradable de navegar, comprensible…