Cómo armé el sitio de un taller de Uvita alrededor de WhatsApp

WhatsApp es el botón principal de este sitio. Va en la primera pantalla, junto al botón de teléfono, y una copia flotante acompaña al visitante en todas las páginas. La sección final del inicio lo pide tal cual: mande una foto por WhatsApp.

El formulario sigue ahí para quien prefiere escribir. Cuando alguien lo envía, el servidor está preparado para mandar la solicitud por correo al taller, y luego se abre WhatsApp con el texto ya escrito. Son dos canales que revisar todos los días.

Si el visitante llega desde un enlace de campaña con etiquetas, las guardo 90 días y las agrego a la solicitud, para que el taller sepa qué campaña trajo el mensaje. También configuré cinco eventos con nombre en las estadísticas del sitio: toque en WhatsApp, toque en teléfono, formulario enviado, error del formulario y respaldo del 3D. Quien envía la señal No Rastrear queda fuera. Los eventos están para que el dueño pueda comparar qué botones usa la gente.

El español es el idioma por defecto. Si el navegador del visitante está en inglés, el sitio lo envía a /en. Cada página tiene su propia dirección en cada idioma y apunta a su par con una etiqueta hreflang, una marca pequeña que dice «esta página también existe en inglés, aquí». Ayuda a Google a entender que las dos van juntas.

Hoy el texto en inglés cubre los servicios y las guías, además de las páginas de preguntas frecuentes, «sobre nosotros», contacto y privacidad. La traducción es lo que más se subestima: cada cambio de texto posterior se hace dos veces. Por eso dejé el texto de las páginas en un conjunto de archivos por idioma, y los datos del taller, como horario, servicios y zonas, en un único archivo que alimenta las páginas, el mapa del sitio y los datos estructurados.

Un segundo idioma es un compromiso: presupueste cada cambio de texto futuro, no solo la primera traducción.

El inicio abre con un carro en 3D, y la luz sobre su pintura sigue al cursor. Un taller de pintura vende calidad de acabado, y un carro brillante lo dice antes que cualquier frase. El archivo del modelo es liviano, menos de 70 KB, y se descarga solo cuando hace falta, así que el texto no depende de él.

Tiene dos desventajas. Una escena 3D le exige más a un teléfono barato que una foto, y es una pieza más que puede fallar. Si sus clientes usan sobre todo teléfonos viejos, yo elegiría una foto.

Las imágenes son lo que más engorda un sitio. Dos imágenes de las páginas pesaban 961,522 y 1,180,514 bytes, alrededor de 1 MB cada una. Las recodifiqué más pequeñas, todavía en AVIF (un formato compacto), y bajaron a 33,978 y 66,610 bytes. Además, Next.js entrega AVIF o WebP a los navegadores compatibles.

Fije el límite antes de la sesión de fotos, no cuando la página ya se sienta lenta. Es mucho más fácil fotografiar para un límite que rescatar después una imagen pesada.

El reel de marca es lo más pesado: cuatro archivos de 5.5 a 6.5 MB. El reproductor nunca arranca solo, y a los teléfonos en vertical les entrega la versión vertical, así no descargan la versión horizontal.

Además del inicio construí cinco páginas de servicios, cuatro de zonas (Uvita, Dominical, Ojochal y Bahía Ballena) y cuatro guías. Cada una lleva datos estructurados: etiquetas en el código que le dicen a Google si la página es un servicio, una lista de preguntas o un artículo.

Las guías responden el tipo de pregunta que un cliente hace en el mostrador; una, por ejemplo, explica cuándo un chasis de verdad necesita enderezado.

También publiqué archivos de texto para asistentes de IA y dejé pasar a sus rastreadores en robots.txt. No puedo prometer qué efecto tendrá para el taller. Lleva poco trabajo, y el dueño decide si quiere que lo encuentren por esa vía.

Todo formulario público atrae bots, pero este no tiene CAPTCHA, el acertijo de imágenes: un cliente con el carro golpeado y poca señal no necesita un obstáculo más. En su lugar, unas revisiones discretas en el servidor frenan a los bots simples.