● Abierto a inversión
Caso de estudio · Catálogo web · SEO local en Google e IA · Diseño para vender

Proyecto La Roca

Construimos el catálogo web de La Roca, un negocio de piedra natural y muebles de baño en Girardot. Cada producto tiene su foto, su precio y su propia página para Google. El sitio calcula el material por metros cuadrados y arma el pedido por WhatsApp.

Logo de La Roca · Piedras y Lajas

Cliente

La Roca · Piedras y Lajas · Girardot, Colombia

Disciplinas

Catálogo web · SEO local en Google e IA · Diseño para vender

Tipo

E-commerce básico · catálogo web con carrito por WhatsApp

En vivo

Ver sitio ↗

01
El negocio

Todo estaba en el local y nada en internet.

La Roca lleva años en Girardot. En el local, el equipo asesora a cada cliente y las piedras están montadas en muro, así uno ve cómo queda una pared terminada en vez de imaginarla a partir de una foto pequeña.

Lo que faltaba era poder ver eso desde el celular. Mucha gente empieza a buscar la piedra para su fachada en Google, a cualquier hora, y si el negocio no aparece ahí esa persona le termina comprando a otro. Tampoco había forma de saber qué se buscaba ni de dónde llegaban los interesados.

Todo estaba en el local y nada en internet.
Pozetas colgadas en la columna de la entrada del local, en Girardot. Antes de comprar, la gente las ve y las toca.
02
El catálogo

Precio a la vista y el pedido armado para WhatsApp.

Queríamos que cada piedra apareciera con su foto real y su precio, para que nadie tuviera que escribir solo a preguntar cuánto vale.

La persona escoge la piedra, escribe cuántos metros cuadrados tiene su pared y el sitio le calcula el material y el valor. Los muebles de baño se arman por pasos: mueble, mesón, pozeta y grifería. Al final, el carrito convierte todo en un con productos y cantidades, y una persona del equipo cierra la venta en ese mismo chat.

El sitio no cobra en línea. La piedra se cotiza por metros, cortes y envío, y el trato personal hace parte de lo que vende La Roca.

Cuando el cliente escribe ya sabe qué quiere y cuánto le cuesta, y el pedido puede llegar con el local cerrado.

Precio a la vista y el pedido armado para WhatsApp.
La ficha de la piedra muñeca, la más cotizada: los otros nombres con que la buscan, el precio por metro cuadrado y la calculadora de material.

¿Tu negocio necesita algo así?

Quiero mi boceto gratuito →
03
Buscador y Google

Que la encuentren aunque la pidan con otro nombre.

Antes de diseñar revisamos cómo ordenan su catálogo marcas de paisajismo, viveros, remodelación y producto que venden bien por internet, sobre todo cómo ponen el precio de frente. Los colores y la pareja de tipografías salieron del logo de La Roca, que es una montaña.

La gente pide la piedra con los nombres de la calle, como "piedra mona", "piedra bogotana" u "opus romano". El buscador conoce esos apodos y lleva al producto correcto aunque la persona no sepa cómo se llama en el catálogo.

Cada piedra tiene su propia página para Google, parte del , y Girardot, Ricaurte y Flandes tienen una entrada cada una, más otra para quien busca desde cualquier ciudad de Colombia. El primer intento de páginas de ciudad fue solo de texto y el equipo de La Roca nos corrigió: quien llega desde Google tiene que ver el sitio completo. Las rehicimos así, con un bloque que le habla a esa zona.

Que la encuentren aunque la pidan con otro nombre.
La pizarra verde amarilla, otra de las piedras del catálogo.
04
Hoy

Ya escriben clientes de otras ciudades.

El catálogo tiene piedras, muebles de baño y pegantes, cada uno con su precio, y carga rápido en el celular, un asunto de . Recibe visitas sin pagar publicidad, y por WhatsApp ya escriben clientes de otras ciudades, incluso de Santa Marta, que encontraron el negocio buscando piedra.

Por dentro hay un que muestra de dónde llegan las visitas y qué botones tocan, sean de WhatsApp, Maps o Instagram. Lo que todavía no mide es cuántas de esas conversaciones terminan en venta, porque la venta pasa en el chat, fuera del sitio.

Ya escriben clientes de otras ciudades.
Muebles de baño exhibidos en el local, cada uno con su pozeta y su grifería.
05
Lo que sigue

Tarjetas con QR, un letrero y Google Maps.

Lo siguiente ocurre en la calle. Las tarjetas de presentación ya están diseñadas con códigos QR que abren el catálogo y el mapa, y la idea es sumar un letrero grande con QR afuera del local y una exhibición de piedra que se vea desde la acera.

Lo otro es marketing constante. La ficha de Google Maps tiene que estar al día, con fotos reales y horarios, y hacen falta contenido para redes y un vendedor que lleve el catálogo a constructoras y maestros de obra. El panel ya cuenta las visitas que llegan por cada QR.

El tráfico que llega solo desde Google crece despacio, así que el sitio también necesita que alguien lo empuje.

catálogoGirardot
Alguien escanea la tarjeta y abre el catálogo o el mapa del local.

Tarjetas con QR que el panel reconoce

Diseñamos las tarjetas de presentación de La Roca con Claude Design, en tres idiomas. Cada una lleva dos códigos QR: uno abre el catálogo con una marca de origen y el otro, la ubicación en Google Maps. Cuando alguien escanea el primero, el panel registra que esa visita llegó por la tarjeta.

Tarjeta de La Roca, frente
El frente: marca, eslogan y datos de contacto, con acabado dorado.
Tarjeta de La Roca, respaldo
El respaldo: dos QR con seguimiento (catálogo y ubicación) y un espacio para notas.

En un toque

el carrito se convierte en un mensaje de WhatsApp

Precio claro

cada piedra muestra su precio sin que haya que preguntar

Google + IA

una página por piedra y por ciudad para aparecer en búsquedas

Calcula solo

el material y el valor según los metros de la pared

“La venta se sigue cerrando por WhatsApp, como siempre. La diferencia es que ahora escriben personas que nunca han pasado por Girardot.”
+ Ver el detalle técnico

Ficha del proyecto

Negocio
La Roca · Piedras y Lajas
Ciudad
Girardot, Cundinamarca, Colombia
Sector
Piedra natural, lajas y muebles de baño
Tipo
Catálogo web con carrito por WhatsApp y analítica propia
Tiempo de construcción
4 a 5 días
Páginas
22
Stack
HTML, CSS y JavaScript · Vercel Edge · Neon Postgres
Cierre de venta
WhatsApp, sin pasarela de pago
Sitio
larocapiedrasylajas.com

Cómo está construida

Sitio estático en HTML, CSS y JavaScript, sin frameworks, servido por . Todo el catálogo sale de un solo archivo de datos, del que leen el buscador, el home, el catálogo con sus filtros y el carrito. Agregar un producto es copiar un bloque, y cada piedra y cada ciudad tienen su propia URL.

Preparada para Google y las IA

Cada página lleva datos estructurados ( de tipo HomeGoodsStore y FAQPage), meta tags y canonical. Lleva también etiquetas . Hay páginas locales para Girardot, Ricaurte, Flandes y Colombia, que repiten el home completo y suman un bloque de texto sobre esa zona.

Buscador con apodos, calculadora y carrito por WhatsApp

El buscador indexa los alias de cada producto (piedra bogotana, piedra mona, opus romano, piedra Boyacá) y encuentra la piedra aunque la pidan por su apodo. Hay filtros por uso, una calculadora de metros cuadrados y un armador de muebles de baño por pasos. El carrito guarda el pedido en el navegador y lo convierte en un mensaje de WhatsApp.

Panel de estadísticas propio

Un panel privado con cuatro pestañas (Resumen, Tráfico, Engagement y Botones) muestra las visitas, su origen (referente, campaña y país), las páginas vistas y los toques en los botones de WhatsApp, Maps e Instagram. Los eventos pasan por , con los bots filtrados antes de contar. Quedan en una base , y el acceso tiene clave y límite de intentos.

Velocidad, imágenes y datos reales

El hero abre con una piedra al azar y precarga solo esa foto. Las imágenes para celular van optimizadas y las fuentes cargan de forma diferida, dos prácticas que mejoran los . Dirección, teléfono, horarios, Instagram y el enlace a las reseñas de Google están verificados, y el sitio no tiene testimonios inventados.

¿La gente busca en Google lo que vendes?

Te hacemos un catálogo con una página por producto y el pedido directo a tu WhatsApp. Empieza por decirnos qué vendes y en qué ciudades.

01

Lo quiero para mi negocio

Cuéntanos qué vendes o qué necesitas y te decimos cómo lo haríamos y cuánto cuesta.

Quiero mi boceto gratuito →
02

¿Quieres invertir en La Roca?

Un negocio real con pedidos de 1 a 5 millones de pesos y mucho espacio para crecer. Buscamos aliados en redes, pauta y venta al por mayor.

Quiero invertir →

También por WhatsApp (+49 176 4454 2881) o al correo Alejandro@damorus.com.

Lo que usamos aquí

¿Quieres saber cómo se hizo?La historia completa del proyecto, pieza por pieza: 17 capítulos, unos 29 minutos.Toca para leerla aquí ↓

La historia completa

El catálogo web de un negocio de piedra natural en Girardot, con una página por producto para Google y pedidos que llegan por WhatsApp

17 capítulos29 minActualizado en septiembre de 2026
01El negocioEl negocio

La Roca Piedras y Lajas tiene su local en Girardot, Cundinamarca. Vende piedra natural y laja (pizarra, piedra muñeca y lajas de varios formatos) para fachadas, muros de acento, pisos y zonas de piscina, y también muebles de baño con mesón, pozeta y grifería. En el local la piedra está montada en muro para que el cliente la toque antes de decidir, y los muebles están armados en exhibición. La gente escoge este producto tocándolo, y eso no se pasa fácil a una pantalla.

Es una compra que se piensa mucho. El metro cuadrado arranca en $60.000 COP, un combo de baño llega a $470.000 COP y una venta completa va de $1.000.000 a $5.000.000 COP, con un promedio de entre $1.000.000 y $2.000.000 COP. Compran dueños de casa que remodelan, fincas de recreo, condominios y maestros de obra del Alto Magdalena (Girardot, Ricaurte, Flandes y Melgar), y cada vez más clientes de otras ciudades que reciben el material por envío.

El equipo de La Roca revisó cada entrega y nos explicó cosas que ningún desarrollador podía adivinar: qué quiere decir "acrílico" para ellos, cuál es "la piedra de la cascada" del local, que "enchape" es la piedra y no el pegante, y que ya habían despachado piedra muñeca hasta Santa Marta. Buena parte de las mejores decisiones del sitio salió de esa conversación de ida y vuelta, que a veces fue cómoda y a veces no.

Nadie compra una fachada por impulso, así que el sitio tenía que acompañar una decisión larga.

Fuente: Informe completo del proyecto La Roca, cap. 1 · Entrevista interna de Damorus Projects, 2026

Piedra montada en muro y muebles armados en exhibición: un negocio que se entiende tocando el material.
Piedra montada en muro y muebles armados en exhibición: un negocio que se entiende tocando el material.
02El encargoEl encargo

Había demanda, pero nada en internet que la recogiera. En Google aparecían solo de forma genérica, porque no existía una página por producto, y quien buscaba "piedra muñeca" o "pizarra negra para fachada" terminaba donde la competencia o en un directorio. Los clientes de Ibagué, Bogotá o la costa daban por hecho que solo vendían en Girardot y ni preguntaban, aunque envían a todo el país. Tampoco había ninguna medición, así que nadie sabía qué se visitaba ni de dónde llegaba la gente.

Los límites eran igual de claros. Es un negocio pequeño, sin equipo técnico para sostener una infraestructura complicada, con un presupuesto de mantenimiento cercano a cero y sin , porque la piedra se cotiza (metros, cortes, envío) y el trato personal hace parte de lo que venden. Con eso quedó definido el trabajo del sitio: traer mensajes y visitas. Para La Roca, una es alguien que escribe "quiero esto, ¿cómo hacemos?".

El orden de prioridades lo respetamos todo el proyecto: primero que funcione y que la gente escriba, y el diseño después, al servicio de eso. Cada botón lleva a algo útil y el contacto queda siempre a un clic. El WhatsApp está en el banner, en el encabezado, en cada ficha y en el pie; tanta repetición se ve poco elegante, y la aceptamos porque lo primero era que escribieran. La historia de la marca cabe en una frase de confianza.

De nada sirve una web preciosa si nadie escribe después de verla.

Fuente: Informe completo del proyecto La Roca, cap. 2 y 3

Primero que funcione y convierta, después que se vea bien: el orden de prioridades que gobernó cada pantalla.
Primero que funcione y convierta, después que se vea bien: el orden de prioridades que gobernó cada pantalla.
03ArquitecturaArquitectura sin servidor

El sitio es estático y lo sirve Vercel. Tiene un par de funciones que corren bajo demanda en el borde de la red, una Postgres en Neon para la analítica y WhatsApp para cerrar. No hay un servidor propio encendido todo el día ni framework, y nada se compila en producción. Lo interactivo, desde el buscador hasta el carrito, corre en el navegador de quien visita.

Dejamos por fuera y cualquier otro framework. El contenido cambia poco, queríamos la mayor velocidad y el mejor posicionamiento posibles, y pocas cosas cargan tan rápido como un HTML servido plano. Sin dependencias tampoco hay librerías que actualizar ni vulnerabilidades heredadas, y el cuesta casi nada. Las páginas las producen unos scripts que corren en un computador antes de publicar, y el servidor solo entrega archivos ya listos.

Servir archivos estáticos es prácticamente gratis y muy difícil de tumbar. Las funciones solo cuestan cuando alguien las usa, y la base de datos es serverless, así que baja a cero cuando no hay tráfico. Para conectarnos a ella usamos un intermediario (pooler) que reparte una sola conexión entre muchas peticiones. Aquí hace falta, porque cada función arranca y se apaga con cada visita.

Casi no hay piezas móviles, y por eso casi nada se puede dañar solo con el paso del tiempo.

Fuente: Informe completo del proyecto La Roca, cap. 5 (decisión 1) y cap. 6

Archivos estáticos en Vercel, funciones que despiertan solo cuando se necesitan y una base Postgres para medir: sin servidor propio que cuidar.
Archivos estáticos en Vercel, funciones que despiertan solo cuando se necesitan y una base Postgres para medir: sin servidor propio que cuidar.
04IngenieríaUn archivo de datos

Los productos están todos en un solo archivo, datos.js. Son unos veinte, y cada uno tiene nombre, sinónimos, precio, categoría, imágenes y textos. De esa lista leen el buscador del encabezado, la parrilla del inicio, el catálogo con sus filtros por uso y el carrito. El buscador le pone puntaje a cada coincidencia y sube las que empiezan una palabra por encima de las que aparecen en medio. La regla fue estricta: cualquier dato de un producto vive en ese archivo y en ningún otro.

Las trece fichas de producto, las páginas de zona, el para Google y el juego completo de íconos tampoco se escriben a mano. Los producen unos generadores en . El de fichas arma cada página con su título, su descripción, su dirección canónica, sus datos estructurados, su galería y sus preguntas frecuentes, y como todas salen de la misma plantilla, conservan la estructura y el estilo aunque el catálogo crezca.

Los generadores se pueden correr las veces que haga falta sin dañar nada, y un cambio en la plantilla base llega a todas las páginas con un solo comando. Cuando tocó cambiar la frase del pie de página, cambiamos la plantilla y regeneramos, en vez de editar veinte archivos. Parecía una decisión puramente técnica y terminó pesando en el negocio, como se ve más adelante con las páginas de ciudad.

Cada dato de un producto se escribe una sola vez, en datos.js.

Fuente: Informe completo del proyecto La Roca, cap. 7 y 8

Un archivo de datos alimenta buscador, inicio, catálogo y carrito, y los generadores fabrican las páginas desde un mismo molde.
Un archivo de datos alimenta buscador, inicio, catálogo y carrito, y los generadores fabrican las páginas desde un mismo molde.
05ConversiónEl carrito

El carrito de La Roca hace lo mismo que el de una tienda en línea, menos cobrar. Guarda lo que la persona va agregando (piedras por metro cuadrado, muebles, pegantes), calcula cantidades y totales y, al final, arma un mensaje con el pedido y lo abre en WhatsApp. Todo pasa en el navegador. No hay servidor de carritos ni sesiones de usuario, y tampoco una base de datos de pedidos que proteger. Son unas 294 líneas de código para esa sola tarea.

El cierre lo hace una persona. Lo que busca el carrito es que la conversación empiece con la información completa (qué productos, cuántos metros, qué muebles) y que el vendedor no tenga que preguntar todo desde cero. Quita trabas en el último paso, que es donde más interesados se pierden, y nos ahorró montar pagos en línea, con la complejidad y el riesgo que eso trae.

Cuando auditamos la conversión, en las fichas competían agregar al carrito y cotizar, y además había un tercer botón, "Pedir una muestra", que repartía la atención. Lo quitamos. Es la ley de Hick: con menos opciones, la gente decide más rápido. Lo siguiente sería dejar un solo botón principal y prometer un tiempo de respuesta, pero eso depende de decisiones del negocio y sigue pendiente.

Al vendedor le llega el pedido escrito, con productos, metros y muebles, y no tiene que arrancar la conversación de cero.

Fuente: Informe completo del proyecto La Roca, cap. 5 (decisión 2), cap. 9, cap. 35 y cap. 38

Del carrito a WhatsApp en un toque: el pedido llega escrito, con productos, metros y muebles, listo para cotizar.
Del carrito a WhatsApp en un toque: el pedido llega escrito, con productos, metros y muebles, listo para cotizar.

¿Quieres algo así para tu negocio?

Quiero mi boceto gratuito →
06ConversiónArmador de combos

Lo más parecido a una aplicación en todo el sitio está en la página de muebles de baño. Es un armador por pasos: el cliente escoge mueble, mesón, pozeta y grifería, elige color y diseño en cada paso y recibe la cotización de lo que armó. Así no tiene que imaginarse el baño mirando una foto. Hay también un configurador en 3D, pero es un prototipo oculto a los buscadores y sin enlaces, guardado para una fase futura.

Después, en el informe de conversión, les pusimos nombre a dos principios de psicología que el armador ya aplicaba. Uno es el efecto Zeigarnik: una tarea empezada genera una tensión que empuja a terminarla. El otro es el compromiso incremental, descrito por Robert Cialdini, según el cual una serie de decisiones pequeñas prepara para la grande. Quien ya eligió mueble, mesón y pozeta está mucho más cerca de escribir "lo quiero" que quien solo vio una foto.

En vez de imaginar el baño a partir de una foto, el cliente lo arma y ve el resultado de lo que eligió.

Fuente: Informe completo del proyecto La Roca, cap. 10 y cap. 44

Mueble, mesón, pozeta y grifería elegidos paso a paso: cada pequeña decisión acerca al cliente a la cotización.
Mueble, mesón, pozeta y grifería elegidos paso a paso: cada pequeña decisión acerca al cliente a la cotización.
07DatosAnalítica propia

La es lo más ambicioso del proyecto. Google Analytics es gratis y aun así preferimos no usarlo. Queríamos control sobre los datos, cuidar la privacidad, no cargar el sitio con un script de terceros y, sobre todo, darle al equipo de La Roca un panel con las vistas que le importan, en su idioma y en su zona horaria. La hicimos desde cero, en tres capas: un script que registra lo que pasa en cada página, una función que recibe los eventos y otra que los agrega para el panel.

El script es liviano, de unas 203 líneas. Anota qué página se ve, de dónde llega el visitante (enlaces de campaña incluidos) y qué botones toca, sean de WhatsApp, Maps o Instagram. Cada evento sale con sendBeacon, que manda los datos sin frenar la navegación y sin perder el evento si la persona cierra la pestaña. Antes de enviar, filtra bots y descarta visitas automatizadas, navegadores que se delatan como robots y referencias de dominios de spam conocidos.

La segunda capa es una función mínima: recibe el evento, lo guarda en Postgres y responde de inmediato para que nadie espere. La tercera lee esos eventos y los agrega por rango de tiempo. Ahí tocó fijar la zona horaria en America/Bogota, porque la base guarda las horas en tiempo universal y, agregadas así, las cifras de un día no coincidirían con el día real del negocio. El panel tiene cuatro pestañas (resumen, tráfico, engagement y botones), pensadas para alguien que no es técnico.

Los bots se filtran antes de que salga el evento, para que el panel cuente personas.

Fuente: Informe completo del proyecto La Roca, cap. 5 (decisión 4) y cap. 11

Del clic a la gráfica: un script ligero registra, una función guarda y otra agrega las cifras en hora de Bogotá para el panel.
08SeguridadFalla de seguridad

En una versión temprana, el panel de analítica dejaba entrar con cualquier clave. El código daba por buena cualquier respuesta del servidor que no fuera "no autorizado" (401). Si el panel se abría sin el servidor detrás, por ejemplo como archivo local, la petición devolvía "no encontrado" (404), y como un 404 no es un 401, el código lo tomaba como clave correcta. Es un error de lógica clásico, y dejaba el panel abierto por algo que ni siquiera tenía que ver con la clave.

De ahí nos quedó una regla de trabajo: que no aparezca un error no confirma que algo salió bien. La corrección fue explícita. Solo dos respuestas cuentan como acceso válido, la de éxito y la que activa el modo de respaldo, y cualquier otra se rechaza. Encima agregamos un límite de intentos por dirección IP, así que quien falla la clave varias veces queda bloqueado un rato y nadie puede probar claves a lo bruto. El panel, además, está excluido de los buscadores.

Con los secretos aplicamos la misma lógica. La cadena de conexión a la base de datos y la clave del panel no están en el código ni en el repositorio. Viven en variables de entorno de Vercel, que no se envían al navegador, y la lista de exclusiones bloquea cualquier archivo de secretos. Por eso, cuando el equipo de La Roca preguntó si esos datos estaban ocultos al público, pudimos verificarlo y responder con certeza. En un envío de cambios, además, alcanzamos a frenar la publicación de dos guías internas de trabajo.

Bastaba un 404 para entrar al panel, porque el código solo rechazaba el 401.

Fuente: Informe completo del proyecto La Roca, cap. 12 y cap. 41

Un 404 que abría la puerta del panel: la corrección exige una respuesta de éxito real y frena a quien insiste con claves falsas.
09SEO y GEOPáginas por producto

Quien busca "piedra muñeca en Girardot" quiere caer directo en la página de la piedra muñeca, ver su foto, su precio y cómo se usa, y escribir desde ahí. Si aterriza en un inicio genérico, le toca ponerse a buscar. Por eso el sitio tiene una entrada para cada intención de búsqueda. Google le dice micro-momento a ese instante de "quiero comprar", y se lo lleva el sitio que responde con la página exacta.

Cada una de las trece fichas tiene título y descripción propios, una dirección canónica que apunta a sí misma y datos estructurados, que son un bloque de código invisible donde se le explica a Google qué hay en la página. El inicio declara el negocio como tienda (HomeGoodsStore), con dirección, horarios y zonas que atiende. Cada ficha se declara como producto (Product), con precio y disponibilidad. Además hay migas de pan (BreadcrumbList), la lista de productos del catálogo (ItemList) y el servicio por zona (Service) en las páginas de ciudad.

Las preguntas frecuentes también van marcadas (FAQPage), pensando en , para que asistentes como ChatGPT, Perplexity o los resúmenes con IA de Google puedan citar las respuestas del negocio. Tener todo bien marcado ayudó cuando Search Console levantó alertas. En lugar de parchar, revisamos el marcado de todas las páginas y encontramos que las fichas estaban completas y que el problema era el catálogo, que listaba diez productos a medias. Los convertimos en elementos de lista que apuntan a cada ficha, que es el patrón que Google recomienda para una página de lista.

Quien busca una piedra concreta tiene que caer en la página de esa piedra.

Fuente: Informe completo del proyecto La Roca, cap. 14, 15 y 19

Trece fichas con título, descripción y datos estructurados propios: cada producto puede aparecer solo en Google y abrir directo.
Trece fichas con título, descripción y datos estructurados propios: cada producto puede aparecer solo en Google y abrir directo.
10SEO y GEOPáginas de ciudad

Para quitar la idea de que "solo venden en Girardot" agregamos páginas para Girardot, Ricaurte y Flandes. En el papel, el primer intento estaba bien hecho. Cada ciudad tenía un artículo propio, solo de texto, con contenido local: el local en Girardot, las casas campestres y Peñalisa en Ricaurte, las fincas y el río Magdalena en Flandes. Había contenido original, datos estructurados de servicio y enlaces entre páginas, que es lo que piden los manuales de posicionamiento.

La corrección llegó directa: "No, estás equivocadísimo. La página para cada ciudad es una copia exacta del hero". Tenían toda la razón. Esa página es el primer contacto de alguien que llega desde Google buscando su ciudad, y recibirlo con un texto pelado, sin portada ni botón, es desperdiciar a ese cliente. Esa persona tiene que ver el sitio completo, como si hubiera entrado por el inicio, y además un bloque que le hable de su ciudad.

Reescribimos el generador de zonas para que clone el inicio entero y cambie solo lo necesario: título, descripción, dirección canónica, vista previa para redes, datos de servicio por zona y un bloque de texto local justo debajo de las preguntas frecuentes. El inicio queda limpio, y cualquier mejora que le hagamos les llega a las ciudades con solo volver a generar. Nos quedó la lección de juzgar cada decisión de contenido por lo que ve el primer cliente que llega.

Quien llega desde Google buscando su ciudad tiene que ver el sitio completo, con portada y botones.

Fuente: Informe completo del proyecto La Roca, cap. 14 y 16

Cada página de ciudad clona el inicio completo y suma un bloque local: quien llega desde Google ve todo el sitio, no una hoja de texto.
Cada página de ciudad clona el inicio completo y suma un bloque local: quien llega desde Google ve todo el sitio, no una hoja de texto.

¿Quieres algo así para tu negocio?

Quiero mi boceto gratuito →
11SEO y GEOPágina nacional

En la analítica propia vimos que la piedra muñeca estaba entre lo más buscado, y que la buscaban desde todo el país. La idea de una página nacional fue del equipo de La Roca. Su razonamiento era que si alguien de otra ciudad cree que solo venden en Girardot, ese cliente se pierde antes de escribir. Faltaba una página que dijera claramente que el material llega hasta donde vive quien busca.

Así salió /piedra-en-colombia. Clona el inicio, igual que las páginas de ciudad, con dos cambios. La etiqueta sobre el titular, que en el resto del sitio dice "Girardot, Ricaurte, Flandes", aquí dice "Hecho en Colombia" y lleva la bandera. En los datos estructurados, la zona atendida pasa de ciudad a país. El texto pone la piedra muñeca al frente y cuenta que ya han despachado piedra hasta Santa Marta, un dato real que le responde a quien duda por la distancia.

La bandera no es un emoji. En Windows, el emoji de la bandera sale como las letras "CO", así que la dibujamos como un SVG diminuto de tres franjas, amarilla, azul y roja, que se ve igual en todos los dispositivos. Con la misma lógica nacional, en las trece fichas la pregunta de envíos pasó al primer lugar de las preguntas frecuentes. La respuesta arranca con "Sí, a toda Colombia", menciona el envío a Santa Marta y promete confirmar el costo antes de que el cliente decida.

Quien vive lejos de Girardot tiene que saber, antes de escribir, que el material le llega.

Fuente: Informe completo del proyecto La Roca, cap. 17 y 38 · Entrevista interna de Damorus Projects, 2026

Una página para todo el país, con la bandera dibujada en SVG y la piedra muñeca al frente: la puerta para quien vive lejos de Girardot.
Una página para todo el país, con la bandera dibujada en SVG y la piedra muñeca al frente: la puerta para quien vive lejos de Girardot.
12DiseñoLa montaña

"Todo tiene un mismo color plano excepto el footer", nos dijo en un punto el equipo de La Roca, y era cierto: el sitio funcionaba, pero era monótono, un solo tono crema de arriba abajo. Antes de tocar nada investigamos cómo rompen la monotonía las marcas grandes sin perder identidad. Encontramos cuatro técnicas con respaldo: bandas que alternan el fondo por sección, una banda oscura a media página que sirve de ancla, separadores con forma entre secciones y acentos de color con textura.

En vez de escoger nosotros, armamos cuatro ejemplos navegables, cada uno con las fotos y los colores de La Roca: bandas, oscuro, montaña y acentos. El equipo eligió la montaña "sin lugar a ninguna duda". Visto después, tenía toda la lógica, porque el negocio se llama La Roca y su logo es una montaña, así que las crestas de piedra entre secciones salen de la marca misma. La paleta tierra y la pareja tipográfica (Fraunces para títulos, Manrope para el texto) también salieron del logo.

Cada cresta es una máscara SVG en el borde superior de la sección, rellena con el mismo color, que se monta sobre la sección anterior. El lío apareció al recortar lo que sobresalía. Con overflow hidden se dañaba el encabezado pegajoso, porque ese recorte crea su propio contexto de desplazamiento, y la salida fue overflow-x: clip, que recorta por los lados sin crear ese contexto. Más tarde les dimos movimiento a las crestas: al bajar se desplazan un poco, en sentidos alternos, como cuando uno pasa frente a una cordillera.

El negocio se llama La Roca y su logo es una montaña, y el equipo escogió las crestas sin dudarlo.

Fuente: Informe completo del proyecto La Roca, cap. 20 a 23 y cap. 29

Cuatro propuestas navegables y una elegida sin dudar: crestas de piedra entre secciones, porque el logo de La Roca ya era una montaña.
Cuatro propuestas navegables y una elegida sin dudar: crestas de piedra entre secciones, porque el logo de La Roca ya era una montaña.
13DiseñoEl favicon

El favicon, el ícono de 32 píxeles que aparece junto al nombre del sitio, tuvo la historia más larga del proyecto para algo tan pequeño. Primero Google no lo detectaba, y creamos el juego completo de íconos servido desde la raíz del , que es donde Google lo busca. Después el equipo de La Roca lo comparó con el de Facebook y notó que el suyo dejaba un borde blanco. El ícono era un círculo pequeño dentro de un cuadrado, y como Google recorta los favicons en círculo, el nuestro quedaba flotando dentro del suyo.

Rehicimos el set para que el círculo toque los cuatro lados y la montaña se vea grande, y ahí salieron dos problemas más. La foto de origen traía una etiqueta de rotación que la librería de imágenes ignora por defecto; sin corregirla, la montaña habría salido girada 90 grados. Y el archivo .ico, que lleva varios tamaños, lo ensamblamos por código, byte a byte, para que se viera nítido en 16, 32 y 48 píxeles.

Debajo de la portada corre sin parar una cinta de ciudades: Girardot, Ricaurte, Flandes, Ibagué, Bogotá, Santa Marta y "Envíos a todo Colombia". Reemplazó un texto estático, apoya la estrategia nacional y tenía que verse sin bajar, en celular y en computador. La portada escoge al azar una de seis fotos antes de que cargue el resto de la página, para no perder velocidad. En los muebles, el precio de $470.000 COP se sale de la foto en un chip que da profundidad. Todo el sitio usa una misma curva de movimiento, sombras de dos capas y un grano finísimo.

Un error se nos repitió varias veces: elementos que debían estar ocultos, como una insignia del carrito o una ventana emergente, se veían igual, porque una regla de estilo pisaba el atributo que los escondía. Arreglarlo fue sencillo. Lo que aprendimos es que verificar significa medir lo que el usuario ve en pantalla, además de leer el código. La página 404 también tiene su cuidado, con el logo, un mensaje amable ("Esta página se nos perdió entre las piedras") y botones para volver.

Sin corregir la etiqueta de rotación de la foto, la montaña del favicon habría salido girada 90 grados.

Fuente: Informe completo del proyecto La Roca, cap. 24, 25, 26, 31 y 32

Un favicon que llena el círculo de Google, una cinta de ciudades que no se detiene y detalles de movimiento que hacen sentir el sitio terminado.
Un favicon que llena el círculo de Google, una cinta de ciudades que no se detiene y detalles de movimiento que hacen sentir el sitio terminado.
14PsicologíaPrueba social

Para analizar la conversión, primero había que decir qué es convertir en La Roca. Como no hay pagos en línea, una conversión es un mensaje con intención, y lo que se quiere mejorar es la decisión de escribir. El diagnóstico se apoyó en los principios de persuasión de Robert Cialdini, el modelo de conducta de BJ Fogg, las heurísticas de Nielsen Norman Group y la investigación de Baymard Institute, y recorrió el completo. La llegada salió fuerte. En confianza había un hueco crítico.

No había prueba social a la vista, y para comprarle piedra a un negocio desconocido de otra ciudad, esa es la barrera más grande. El equipo de La Roca lo preguntó con humor: "¿Nos las inventamos y creamos rostros con IA?". Les dijimos que no, sin matices. Basta con que un cliente descubra una reseña falsa o una cara generada para que piense "si esto es falso, ¿qué más lo es?". Y Google, además, penaliza el marcado de reseñas falsas.

Revisando bien, no estaban en cero. Tienen un local con la piedra montada, ya vendieron y enviaron material hasta Santa Marta, tienen una reseña real en Google y un equipo que atiende. Pruebas había; faltaba recogerlas y mostrarlas. La hoja de ruta propone pedirles reseñas a quienes ya compraron, reunir fotos reales de obras terminadas y del local, y dar certeza sobre cómo funciona el envío, ya que un precio fijo de envío no existe.

En los datos estructurados, las estrellas y las reseñas quedaron vacías hasta que haya reseñas reales, y la política de envíos y devoluciones espera los datos del negocio. Preferimos explicar por qué falta cada campo antes que llenarlo con algo falso, aunque por ahora eso deje abiertas algunas advertencias de Google.

Las estrellas del marcado siguen vacías hasta que haya reseñas reales.

Fuente: Informe completo del proyecto La Roca, cap. 19 y cap. 33 a 38

Local real, envíos reales y una reseña real en Google: la confianza se construye mostrando lo que existe, nunca inventando lo que falta.
Local real, envíos reales y una reseña real en Google: la confianza se construye mostrando lo que existe, nunca inventando lo que falta.
15HoyHoy

El sitio está publicado en larocapiedrasylajas.com. Tiene 22 páginas, el mapa del sitio está enviado a Search Console y cada cambio se publica solo desde GitHub a Vercel. Lo construimos en 4 a 5 días, en menos de siete versiones, como ejemplo de lo que entra en el plan Plata, desde $1.000.000 COP$500 USD€500 EUR, y lo seguimos afinando con lo que mostraban los datos. Según su propio panel de analítica, recibe tráfico constante sin pagar publicidad.

Ese tráfico ya trae conversaciones. Escriben por WhatsApp clientes de lejos, incluso de Santa Marta. Son personas que no conocen Girardot y encontraron el negocio buscando lo que necesitaban, y eso muestra que el trabajo de y GEO está haciendo su parte. La piedra muñeca es el producto más cotizado, el mismo que motivó las fichas y la página nacional. Como cada venta va de $1.000.000 a $5.000.000 COP, vale la pena contestar rápido y bien cada mensaje.

Lo que todavía no medimos es cuántas de esas conversaciones terminan en venta. El panel cuenta visitas, orígenes y clics a WhatsApp, pero la venta pasa en el chat, fuera del sitio, y no está conectada a los números. Los envíos siguen sin precio fijo porque se cotizan por ciudad. Lo que diagnosticamos en confianza y en certeza sobre el envío tampoco está implementado del todo, porque depende de reseñas, fotos y decisiones que solo puede aportar el negocio.

Llegan visitas y llegan mensajes; cuántos terminan en venta todavía no lo sabemos.

Fuente: Entrevista interna de Damorus Projects, 2026 · Informe completo del proyecto La Roca, cap. 43 y 44

Tráfico constante sin pauta, mensajes de WhatsApp desde lejos y la piedra muñeca como lo más cotizado, junto a lo que aún no se mide.

¿Quieres algo así para tu negocio?

Quiero mi boceto gratuito →
16Lo que sigueLo que sigue

Lo que sigue pasa sobre todo en la calle. La web trae visitas desde Google, pero el negocio también vive de quien pasa frente al local, y para esa gente hay varias ideas: un exhibidor de piedra afuera del local para que el material se vea desde la calle, señalización clara, un catálogo físico para quien prefiere pasar páginas y un letrero grande con código QR que lleve directo al catálogo en línea.

Las tarjetas de presentación ya están diseñadas con Design, en español, inglés y alemán. Se produjeron en HTML y CSS, sin editor gráfico, y tienen una versión para imprenta con sangrado de 3 milímetros y marcas de corte. Cada tarjeta lleva dos códigos QR. Uno abre el catálogo con una marca de origen que el panel reconoce; el otro abre la ubicación del local en Google Maps.

En lo comercial, la hoja de ruta tiene tres frentes. El primero es una estrategia de Google Maps, con fotos reales, horarios y datos de contacto completos en la ficha del negocio. El segundo, marketing constante, para que el crecimiento no dependa solo del ritmo de los buscadores. El tercero es un vendedor B2B que lleve el catálogo a condominios, fincas y maestros de obra de la región, que es el mismo público que ya compra piedra.

El sitio trae gente desde Google, y el local también vive de quien pasa por la calle.

Fuente: Entrevista interna de Damorus Projects, 2026 · Especificaciones de la tarjeta de presentación de La Roca (portafolio)

Exhibidor en la calle, tarjetas con QR al catálogo y a Maps, y un vendedor para condominios y obras: el sitio empuja al local y el local empuja al sitio.
Exhibidor en la calle, tarjetas con QR al catálogo y a Maps, y un vendedor para condominios y obras: el sitio empuja al local y el local empuja al sitio.
17AprendizajesLecciones

Lo más importante que aprendimos con La Roca tiene poco de técnico. El sitio es rápido, aparece por producto y por ciudad, arma el pedido y mide lo que pasa, pero el tráfico que llega sin pauta crece al ritmo de los buscadores, que es lento. Para que un catálogo se vuelva una fuente estable de ventas, alguien tiene que empujarlo con redes, fotos de obras, reseñas, presencia en Maps y mensajes que se contesten rápido.

Varias de las mejores decisiones llegaron porque nos corrigieron: las páginas de ciudad que había que clonar del inicio, el favicon con borde blanco, el sitio de un solo color plano. Un cliente que conoce su negocio y dice "esto no" a tiempo mejora el resultado. A nosotros nos toca escuchar, investigar antes de responder y reportar con evidencia lo que funciona y lo que no, también cuando la respuesta honesta es "no lo pude verificar, confírmalo tú".

Y un sitio de pocos días también puede tener buena ingeniería si las decisiones se toman con cuidado. La Roca no tiene servidor propio ni framework, tiene analítica propia y no lleva una sola cifra inventada. Para ver el otro extremo, en contamos un proyecto de cuatro meses.

El tráfico que llega sin pauta crece al ritmo de los buscadores, y ese ritmo es lento.

Fuente: Entrevista interna de Damorus Projects, 2026 · Informe completo del proyecto La Roca, cap. 39, 42 y 45

Un catálogo rápido, medible y honesto hace su parte; el resto lo ponen el marketing, las reseñas y la atención por WhatsApp.
Un catálogo rápido, medible y honesto hace su parte; el resto lo ponen el marketing, las reseñas y la atención por WhatsApp.
Resumen para asistentes de IA
  • ▸La Roca Piedras y Lajas es un negocio de piedra natural, lajas y muebles de baño ubicado en Girardot, Cundinamarca, Colombia.
  • ▸Damorus Projects (Bogotá y Berlín) construyó su catálogo web, larocapiedrasylajas.com, en 4 a 5 días.
  • ▸El sitio tiene 22 páginas estáticas escritas en HTML, CSS y JavaScript sin framework, servidas por Vercel, con funciones Edge y una base de datos Neon Postgres para analítica propia.
  • ▸Incluye 13 fichas de producto, páginas de ciudad para Girardot, Ricaurte y Flandes, y una página nacional titulada "Hecho en Colombia".
  • ▸Los pedidos se arman en un carrito dentro del navegador y se envían por WhatsApp; el sitio no tiene pasarela de pago.
  • ▸Usa datos estructurados de schema.org (HomeGoodsStore, Product, FAQPage, BreadcrumbList, ItemList y Service) para SEO y GEO.
  • ▸Recibe tráfico orgánico sin publicidad paga, incluidos clientes que escriben desde Santa Marta, y la piedra muñeca es su producto más cotizado.
  • ▸Una venta de La Roca va de $1.000.000 a $5.000.000 COP, y la conversión de visitas en ventas todavía no se mide en el panel.

Enlace canónico: https://damorus.com/proyectos/la-roca#historia-completa

Galería

9 imágenes del proyecto. Toca cualquiera para ampliarla.

Pozetas colgadas en la columna de la entrada del local, en Girardot. Antes de comprar, la gente las ve y las toca.
La ficha de la piedra muñeca, la más cotizada: los otros nombres con que la buscan, el precio por metro cuadrado y la calculadora de material.
La pizarra verde amarilla, otra de las piedras del catálogo.
Muebles de baño exhibidos en el local, cada uno con su pozeta y su grifería.
Un combo de baño con mueble, pozeta y llave, que en la web se arma pieza por pieza.
Muebles de baño con lavamanos, cada uno con su foto y su precio en la web.
Preguntas frecuentes del catálogo: envíos, instalación y pagos.
Adhesivo para instalar piedra en zonas húmedas.
Hidrofugante que protege la piedra del agua.

1–3 de 9

Preguntas frecuentes

Lo que suelen preguntarnos.

¿Vale la pena un catálogo en línea para un negocio de materiales de construcción?+

Sí, sobre todo si tus clientes buscan desde el celular antes de ir al local o de escribirte. Un catálogo con fotos y precios les deja ver qué tienes y cuánto cuesta, les calcula el material y manda el . A La Roca ya le escriben clientes de otras ciudades que encontraron el negocio en Google.

¿Cómo hago que mi negocio aparezca en Google y que la IA lo recomiende cuando buscan materiales en mi ciudad?+

Con una página por producto y por zona, y con información ordenada que Google entienda: qué vendes, tus horarios y las ciudades a las que llegas. La Roca, por ejemplo, tiene páginas para Girardot, Ricaurte, Flandes y el resto del país. Los datos estructurados y las respuestas claras a las preguntas de tus clientes ayudan a que asistentes como ChatGPT, Gemini o Copilot también puedan mencionarte cuando alguien pregunta por materiales en tu región.

¿Puedo saber cuántas personas visitan mi catálogo y de dónde llegan?+

Sí. La web de La Roca trae un panel privado que muestra cuántas visitas llegan, qué piedras se miran más, de dónde vienen (Google, Instagram, WhatsApp o una tarjeta con código QR) y qué botones tocan. Con eso se ve qué canal trae interesados. Cuántas conversaciones terminan en venta no lo registra el panel, porque la venta se cierra en el chat.

¿Se puede vender por WhatsApp sin montar una pasarela de pagos complicada?+

Sí. En La Roca el cliente arma el pedido en el catálogo, con las piedras por metro cuadrado y su combo de baño, y con un toque lo convierte en un mensaje de WhatsApp listo para enviar. La venta se cierra por el canal que el negocio ya usa, sin comisiones de pasarela y sin que el cliente tenga que crear una cuenta o escribir los datos de su tarjeta.

¿Cuánto cuesta un catálogo web como el de La Roca y en cuánto tiempo lo entregan?+

Depende de cuántos productos y funciones necesites, como buscador, calculadora o panel de visitas. Antes de empezar te damos por escrito el alcance, el precio y la fecha de entrega. Ya publicado, el catálogo recibe pedidos las 24 horas, aunque la respuesta llegue cuando abre el local.

¿Esto sirve solo para piedra o para cualquier negocio que venda productos?+

Sirve para casi cualquier negocio con productos para mostrar: materiales, muebles, decoración, repuestos o insumos. La receta de La Roca se puede repetir con otros productos: catálogo con precios, un buscador que entiende los nombres que usa la gente, cuentas hechas por el cliente, pedido por WhatsApp y un panel para ver qué pasa.

¿Cómo vende por internet un negocio de piedra, enchapes o materiales de construcción si el cliente tiene que cotizar antes de comprar?+

Sin cobrar en línea. Cuando el material se cotiza por metro, corte y envío, lo que tiene que hacer el sitio es traer mensajes de gente interesada. Para eso muestra cada producto con foto y precio de referencia, resuelve desde el principio la duda de los envíos y deja el contacto siempre a un clic. En La Roca la venta la sigue cerrando una persona por WhatsApp, y una venta completa va de $1.000.000 a $5.000.000 COP.

¿Cómo funciona un catálogo web con carrito que manda el pedido por WhatsApp?+

El cliente va agregando productos a un carrito que se guarda en su propio navegador, sean piedras por metro cuadrado, muebles o pegantes. Cuando termina, el sitio convierte ese carrito en un mensaje con productos y cantidades y lo abre en WhatsApp, listo para enviar. No hay servidor de pedidos ni datos de tarjetas que proteger, y el vendedor tiene la información desde el primer mensaje, sin preguntar lo básico.

¿Sirve hacer una página por ciudad para aparecer en Google cuando buscan un producto en municipios cercanos?+

Sí, siempre que la página esté pensada para la persona que llega y también para el buscador. En La Roca, las páginas de Girardot, Ricaurte y Flandes copian el inicio completo, con portada, catálogo y botones, y le suman un bloque de texto local y datos estructurados de servicio para esa zona. Primero probamos páginas solo de texto y fue un error, porque quien llega desde Google necesita ver el sitio entero.

¿Se puede medir el tráfico de una página web sin usar Google Analytics?+

Sí. En La Roca hicimos una analítica propia. Un script liviano registra páginas vistas, orígenes, enlaces de campaña y clics a WhatsApp, Maps e Instagram, filtra los bots antes de enviar y guarda los eventos en una base Postgres. Un panel privado, con clave y límite de intentos, muestra las cifras en hora de Bogotá. Se gana control total sobre los datos y un panel hecho para el dueño; a cambio, hay que construirlo y mantenerlo.

¿Cuánto tiempo toma y cuánto cuesta hacer un catálogo web con SEO local para un negocio pequeño en Colombia?+

Depende de cuántos productos, páginas y funciones necesite. El sitio de La Roca tomó 4 a 5 días, como ejemplo de lo que entra en el plan Plata, desde $1.000.000 COP$500 USD€500 EUR, y después lo seguimos afinando con los datos del panel. En precios están los planes con sus puntos de partida, y el alcance final lo definimos contigo antes de empezar. Te recomendamos sumar marketing, porque el tráfico que llega sin pauta crece despacio.

Trabajo relacionado

Tu proyecto con nosotros puede empezar hoy.

Cuéntanos qué quieres lograr, o eso que siempre quisiste que tu proyecto lograra, y te decimos cómo lo haríamos y cuánto cuesta. Si lo puedes imaginar, lo podemos hacer realidad.

o escríbenos por WhatsApp (+49 176 4454 2881) o a Alejandro@damorus.com