416Skin — Estética médica

El encargo

Un estudio de lujo que merecía ser encontrado.

El contexto.

416Skin es un estudio de estética médica de Toronto que ofrece más de cien tratamientos en quince categorías: faciales, moldeado corporal, láser, el menú completo. El sitio web original tenía buena presencia. Solo tenía un problema.

El problema.

El sitio antiguo estaba construido de modo que el contenido real solo aparece después de que la página carga en un navegador. Las personas lo ven bien, pero el software de lectura de Google a menudo no espera. Así que cada tratamiento, cada categoría y cada pregunta que un cliente pudiera buscar era prácticamente invisible. Un sitio hermoso, con resultados de búsqueda vacíos.

La reconstrucción

Reconstruido página por página, conservando solo las piezas móviles que se lo ganan.

Páginas reales, listas antes de que usted llegue.

El sitio se reconstruyó con Astro, una herramienta que produce páginas terminadas y completas de antemano. Ahora cada página existe como un documento real que carga al instante y que Google puede leer en la primera visita, sin esperas ni trucos.

Interactivo solo donde importa.

La mayor parte del sitio es ahora contenido simple y rápido. Las piezas interactivas que sobrevivieron son las que la gente realmente usa: el formulario de contacto, el carrusel de reseñas de clientes, la galería de fotos y el aviso de cookies. Todo lo demás no necesita ejecutar nada de código.

Cada pieza interactiva se carga en el momento justo.

• De inmediato — El formulario de contacto está listo al instante: es lo único que un visitante podría usar antes de bajar.
• Cuando entra en pantalla — Las reseñas y las galerías se cargan solo cuando se llega a ellas con el scroll, sin cargas innecesarias al inicio.
• Cuando el navegador está libre — El aviso de cookies espera su turno, así que nunca retrasa la primera vista de la página.
• O no se carga en absoluto — El menú y el pie de página son contenido simple con un script de diez líneas: nada pesado cerca de ellos.

El mapa de páginas

Veinte páginas, construidas de una vez.

Un comando, todo el sitio.

Una sola compilación produce todo: las cuatro páginas principales (Inicio, Acerca de, Servicios, Contacto), una página de preguntas y respuestas y quince páginas de categorías de tratamientos generadas automáticamente a partir de una plantilla y una lista. Cada página tiene su propia dirección web, su propio título y su propia descripción para los motores de búsqueda.

Lo que lleva cada página.

• Su propio resultado de búsqueda — Cada página tiene su propio título, descripción y tarjeta de vista previa para cuando se comparte, además de datos de ubicación para las búsquedas en Toronto.
• Un resumen legible por máquinas — Cada página incluye un resumen estructurado en el formato exacto que prefiere Google: el negocio, sus servicios, sus precios, sus reseñas.
• La lista completa de tratamientos, legible por Google — La página de Servicios incluye cada categoría, cada tratamiento y cada descripción como texto simple para los motores de búsqueda.
• Quince páginas desde una plantilla — Una plantilla más una lista de quince categorías se convierten en quince páginas reales al compilar.

Hablar el idioma de Google

Resúmenes estructurados en cada página.

Se escribe una vez y se usa en todas partes.

A los motores de búsqueda les encantan las páginas que se describen en un formato estructurado: esto es un negocio de belleza, estos son sus servicios, esta es su calificación. En este sitio, esos resúmenes los generan unos pocos ayudantes compartidos en lugar de copiarse y pegarse en cada página. Se actualiza el ayudante una vez y todas las páginas siguen siendo correctas.

La calificación con estrellas es real.

La calificación que ve Google sale de la misma lista de reseñas de clientes que ven los visitantes en pantalla. Sin cifras escritas a mano, sin diferencia entre lo que leen los usuarios y lo que lee Google.

Oficio

Los detalles que no aparecen en una prueba de velocidad.

Pequeñas decisiones con larga vida.

• Fuentes servidas desde el propio sitio — Las dos tipografías viajan con el propio sitio: sin llamadas a servicios externos de fuentes, una cosa menos que retrase la primera vista.
• Una paleta, un archivo — Todos los colores de la marca (crema, rosa, café, salvia, dorado) viven en un solo archivo. Se cambia una vez y todo el sitio lo sigue.
• Animaciones de scroll sin maquinaria pesada — El suave desvanecimiento al hacer scroll funciona con veinte líneas de código simple, sin necesidad de una biblioteca de animación.
• Nada le rastrea sin preguntar — Las tres herramientas de analíticas están detrás de una sola puerta. No se carga nada hasta que el visitante acepta el aviso de cookies.

Publicación

Cada actualización se publica sola.

Un pipeline, sin pasos manuales.

Cuando se guarda un cambio, un pipeline automático compila el sitio y lo publica en la red mundial de Cloudflare. Los cambios en curso tienen su propio enlace de vista previa privado, para que el estudio pueda aprobar un cambio antes de que salga en vivo.