La imagen y su texto alt
Pon una foto real y ligera de la categoría. El texto alternativo (alt) describe qué se ve e incluye tu palabra clave: orienta a quien no puede ver la imagen y da contexto. Con un tamaño fijo evitas saltos al cargar.
Ver más MODO GUÍA
Es una guía, no un sitio de cliente: cada bloque te dice QUÉ poner y DÓNDE
editarlo. Los datos viven en src/config/site.ts.
Bloque 1 · Hero
El Hero: di en una frase qué haces y para quién
Es lo primero que se ve. Un H1 único con tu propuesta (incluye ahí tu palabra clave principal) y, debajo, una sola línea que la resuma sin tecnicismos.
Qué incluir. El hero es tu primera impresión y solo tienes unos segundos: en ese instante el visitante decide si se queda. Resuélvelo con un H1 único que diga, en lenguaje claro, qué ofreces y para quién —ahí va tu palabra clave principal, sin forzarla—. Debajo, una sola frase de apoyo que sume el beneficio concreto o despeje la duda más común. Cierra con una o dos acciones, la principal primero, para que el siguiente paso sea obvio. El logotipo vive en el Header: aquí manda el mensaje, no la marca.
Cómo redactarlo. Escribe para una persona, no para un buscador: parte de una necesidad real y promete solo lo que puedas demostrar. Cambia los adjetivos por hechos —«entrega en 48 horas» convence más que «súper rápido»— y apóyate en verbos concretos. Léelo en voz alta: si suena a folleto, reescríbelo hasta que suene a alguien que de verdad sabe del tema. Evita varios H1, párrafos eternos, tecnicismos y promesas vagas; cuando dudes, recorta. Todo esto vive en el componente Hero —title, accent, subtitle y descRight—: esto que lees es, justamente, el ejemplo.
Catálogo
El catálogo: agrupa tu oferta en categorías
Cada tarjeta arma una categoría como si fuera un producto: imagen, título, un texto breve y atajos a las subcategorías. Las cuatro de abajo te muestran, parte por parte, qué poner en cada una y cómo redactarla.
Aquí tu oferta deja de ser una lista larga y se vuelve un mapa: agrupas lo que vendes en pocas categorías que cualquiera entiende de un vistazo. Cada tarjeta funciona como una mini portada —una imagen real, un título con la palabra que la gente busca y una frase que adelanta qué hay dentro—, así el visitante pasa de «¿qué venden aquí?» a «esto es justo lo que necesito» en segundos. Es la diferencia entre una bodega amontonada y una tienda bien señalizada.
Para que funcione, ordena las categorías como las piensa tu cliente, no como las archivas tú: agrupa por lo que la gente busca, nombra cada una con su término real y mantén el mismo criterio en todo el sitio. Redacta cada tarjeta para una persona —un beneficio concreto, la palabra clave sin forzar y un motivo para confiar— y deja que los atajos a las subcategorías hagan de guía. Bien armado, todos ganan: el visitante encuentra antes y los buscadores entienden tu estructura y llegan a tus páginas internas.
El título y su jerarquía
El título de la tarjeta va como H3 y respeta el orden de la página: H1 en el hero, H2 en la sección, H3 en cada tarjeta. Nómbralo con la palabra clave de la categoría: claro, corto y fácil de escanear.
Ver másEl texto de venta
Una o dos frases que unen el beneficio con tu palabra clave y una señal de confianza. Escribe para la persona, no para el buscador: la palabra clave entra natural, nunca apilada. Apunta a 120–160 caracteres.
Ver másSubcategorías y botón
Enlaces a las subcategorías con texto real ("Línea profesional", "Accesorios"): le dan al visitante el atajo exacto y conectan con las páginas hijas. Cierra con un solo botón claro, sin competir con otros.
Ver másLa categoría a fondo
La imagen y su texto alt
Esta es la primera tarjeta del catálogo vista por dentro. Una buena imagen de categoría no es decoración: es lo primero que mira el visitante y, en menos de un segundo, le confirma si está en el lugar correcto. Por eso conviene una foto real —no un genérico de banco— que muestre el producto o servicio tal como es y que pese poco para no hacer esperar.
El texto alternativo (el atributo alt) es su pareja invisible: describe en una frase qué se ve, con la palabra clave de la categoría incluida con naturalidad. Ayuda a quien navega con lector de pantalla y da contexto a quien, por una conexión lenta, no alcanza a ver la foto. Si además fijas su ancho y alto, el hueco queda reservado y la página no «salta» mientras carga.
- Foto real y propia, nunca un genérico de banco de imágenes
- Peso optimizado (AVIF/WebP) para que cargue al instante
- Texto alternativo descriptivo, con la palabra clave incluida
- Ancho y alto fijos para que la maqueta no salte al cargar
La categoría a fondo
El título y su jerarquía
El título es el letrero de la tarjeta: en dos o tres palabras le dice al visitante —y al buscador— de qué trata esta categoría. Va como H3 porque respeta el orden de la página: un solo H1 en el hero, los H2 abren cada sección y los H3 nombran cada tarjeta. Ese escalonado no es capricho, es el índice que la gente y los lectores de pantalla siguen para ubicarse sin perderse.
Para que funcione, nómbralo con la palabra clave de la categoría, no con un nombre interno ni un juego de palabras: claro, corto y fácil de escanear de un vistazo. Mantén un nivel por escalón —no saltes de H2 a H4— y evita repetir el mismo título en varias tarjetas. Un buen título se entiende fuera de contexto: si alguien lo lee solo, sabe exactamente a dónde llega.
- Va como H3, respetando H1 (hero) → H2 (sección) → H3 (tarjeta)
- Nombrado con la palabra clave de la categoría
- Claro, corto y fácil de escanear de un vistazo
- Sin saltos de nivel ni títulos repetidos entre tarjetas
La categoría a fondo
El texto de venta
El texto de venta es ese párrafo corto bajo el título: una o dos frases que convierten una categoría en una razón para entrar. Su trabajo es unir tres cosas —el beneficio concreto, la palabra clave de la categoría y una señal de confianza— sin que se note el esfuerzo. No describe lo obvio («aquí hay productos»); responde la pregunta que el visitante trae en la cabeza: ¿esto me sirve y por qué contigo?
Escríbelo para la persona, no para el buscador: la palabra clave entra natural, nunca apilada ni repetida. Cambia los adjetivos por hechos —«entrega en 48 h» pesa más que «el mejor servicio»— y cierra con algo que dé seguridad: años de experiencia, garantía o una certificación. Apunta a 120–160 caracteres: lo justo para decir lo importante y que se lea de un vistazo. Si suena a folleto, recórtalo hasta que suene a alguien que sabe del tema.
- Une beneficio + palabra clave + señal de confianza
- Escrito para la persona, no para el buscador
- La palabra clave entra natural, nunca apilada
- 120–160 caracteres: corto y fácil de escanear
La categoría a fondo
Subcategorías y botón
Al final de cada tarjeta van los atajos: enlaces a las subcategorías con texto real —«Línea profesional», «Accesorios», «Refacciones»— y un solo botón que lleva a la categoría completa. No son decoración: le dan al visitante el camino exacto a lo que busca sin obligarlo a volver al menú, y de paso tejen los enlaces internos que conectan la categoría con sus páginas hijas.
La clave está en el texto del enlace: que diga a dónde lleva, no «clic aquí» ni «ver». Usa el nombre real de la subcategoría —es lo que la persona reconoce y lo que da contexto a la navegación—. Cierra con un único botón claro, sin tres llamadas compitiendo entre sí: una acción principal por tarjeta. Cuando todo apunta al mismo lugar, el visitante avanza sin dudar.
- Enlaces con el texto real de cada subcategoría
- Atajo directo a lo que el visitante busca
- Conectan la categoría con sus páginas hijas
- Un solo botón claro, sin acciones que compitan
La empresa
Qué hacemos y cómo lo hacemos
El bloque que cuenta quién está detrás del negocio: a qué se dedica, cómo trabaja y por qué se puede confiar en él. Es de los más decisivos de la página —la gente le compra a quien entiende y le da confianza—.
Es el bloque donde el negocio deja de ser una marca anónima y se vuelve alguien con nombre, trayectoria y forma de trabajar. Antes de pedir precio o agendar, la gente quiere saber con quién trata: aquí se lo dices en tres movimientos —qué haces, cómo lo haces y con qué lo respaldas— para que la decisión deje de ser un salto al vacío.
Lo que convierte es la concreción: cambia los adjetivos por hechos —años, proyectos, garantías, tiempos— y habla como una persona, no como un folleto corporativo. Es, además, el contenido de experiencia y confianza que sostiene tu reputación dentro y fuera del sitio. Redáctalo una vez, con datos reales, y tendrás el argumento que más pesa cuando alguien duda entre tú y la competencia.
Qué hacemos
Aquí va, en lenguaje claro y sin tecnicismos, a qué se dedica el negocio y para quién: el producto o servicio principal, el problema que resuelve y el tipo de cliente al que sirve. Dos o tres frases bastan para que cualquiera entienda en segundos qué ofreces y si está en el lugar correcto.
Es la base de la confianza: nadie le compra a lo que no entiende. Habla de beneficios concretos, no de una lista de tareas, e incluye con naturalidad la palabra clave de tu actividad.
Cómo lo hacemos
-
El método
Resume tu forma de trabajar en pasos claros: cómo entregas, en qué te apoyas y qué te hace distinto del resto.
-
La prueba
Respáldalo con hechos —procesos, materiales, tiempos, garantías— en vez de adjetivos vacíos como «los mejores».
-
La cercanía
Habla como una persona, no como un folleto: trato directo, lenguaje claro y solo la promesa que de verdad puedes cumplir.
- +10 años de experiencia
- +500 proyectos entregados
- 98% clientes que repiten
- 24 h tiempo de respuesta
Por qué elegirnos
Los beneficios: di por qué elegirte
De tres a seis razones concretas —beneficios para el cliente, no adjetivos— que responden, de un vistazo, «¿por qué tú y no otro?». Cada una con su ícono, su dato y una frase que lo respalda.
Este bloque responde la pregunta que el visitante trae sin decirla: «¿por qué contigo y no con el de al lado?». No es presumir: es darle motivos concretos para quedarse. Funciona porque convierte tu propuesta en beneficios que se entienden en segundos —qué gana la persona al elegirte, no una lista de lo que haces—.
La regla es la misma de toda la guía: hechos, no adjetivos. Un dato corto («respuesta en menos de 4 h», «garantía de 12 meses») convence; «los mejores» no dice nada. Quédate en tres a seis razones —las que de verdad te distinguen—, cada una con su ícono y su cifra. En un sitio real, cámbialas por tus diferenciadores reales.
- < 4 h primera respuesta
Respuesta el mismo día
Escríbenos y te contestamos en horas, no en días. Recibes un primer diagnóstico claro y los siguientes pasos desde el primer mensaje, sin filtros ni esperas.
- 12 meses de garantía
Garantía por escrito
Cada trabajo queda respaldado por una garantía clara y por escrito. Si algo falla dentro del periodo, volvemos y lo resolvemos sin costo ni discusiones.
- 0 cargos ocultos
Precio transparente
Recibes una cotización detallada antes de empezar: materiales, mano de obra y tiempos. Lo que acordamos es exactamente lo que pagas, sin extras de última hora.
- 1 a 1 sin intermediarios
Trato directo
Hablas siempre con quien hace el trabajo, no con un conmutador. Una sola persona te acompaña de la cotización a la entrega, con comunicación clara en cada paso.
- 100% bajo norma
Calidad comprobada
Usamos materiales y procesos que cumplen la norma aplicable. Te mostramos evidencia del avance y del resultado para que lo verifiques, no para que confíes a ciegas.
- Tu zona servicio cercano
Cobertura local
Trabajamos en tu área y conocemos sus accesos y tiempos. Llegamos puntuales y damos seguimiento de cerca, con presencia real donde estás.
Astro · metadatos
Metadatos de cada página
Antes que nada se eligen 3 palabras clave y se construyen las metas sobre ellas: el title en 3 módulos (kw1 primero, sin marca) y la description que abre con la kw1 y teje las 3 sin sobreoptimizar.
Los metadatos son lo que tu página dice de sí misma antes de que alguien la abra: el título y la descripción que aparecen en una lista de resultados o cuando compartes el enlace. Aquí eliges tres palabras clave por orden de importancia y construyes ambos sobre ellas —el título arranca con la principal, sin la marca pegada, y la descripción abre con ella y teje las otras dos con naturalidad—.
El oficio está en la mesura: decirlo una vez, claro, para una persona que ojea una lista de opciones —no apilado ni repetido para «verse optimizado»—. La demo lo muestra de las dos formas, bien y mal, y la misma regla (metaAudit) marca sola la versión recargada. Unas buenas metas dan un empujón; el peso de verdad sigue en el contenido de la página.
kw1 · principal plantilla astro
kw2 · secundaria contenido markdown
kw3 · variante sitio profesional
Hoja de ruta
Tipos de página y sus layouts
Cada tipo de página (home, categoría, ficha, artículo…) tiene su layout listo en src/layouts/. Reúsalos: tú defines el contenido y el layout pone la estructura, así no rehaces el armazón en cada página.
Un sitio no es una página repetida: son unos pocos tipos de página, cada uno con su trabajo —la home presenta, la categoría lista, la ficha de producto o servicio vende el detalle, el artículo explica—. Nombrarlos desde el principio (home, categoría, ficha, artículo, directorio) te da el mapa de qué construir y en qué orden.
Cada tipo ya tiene su layout esperando en src/layouts/, hecho una vez y reutilizable: tú traes el contenido y el layout trae la estructura —header, espaciados y bloques en su sitio—. Así nunca rehaces el armazón página por página; solo lo llenas. La lista de abajo marca lo que ya está cableado y lo que viene después.
L1 Home (esta página) Incluida
L2 Categoría (catálogo) Próxima parte
L4 Producto (ficha) Próxima parte
L4 Servicio (ficha) Próxima parte
L3 Artículo de blog Próxima parte
L3 Directorio / Zona Próxima parte
Preguntas sobre esta plantilla
¿Esto es un sitio de cliente?
No. Es una plantilla-guía: un sitio dummy de referencia para construir futuros sitios Astro. Los datos (teléfono, dirección, catálogo) son DEMO y se reemplazan en site.ts.
¿Dónde edito los textos y los datos?
Casi todo vive en src/config/site.ts (identidad, contacto, taxonomía, mensajes de WhatsApp). El catálogo vive en src/content/ y la marca (colores, tipografía) en src/styles/tokens.css.
¿Cómo agrego una página o un producto?
Para catálogo, agrega un Markdown en src/content/productos o src/content/servicios y aparece solo. Para páginas nuevas, crea un .astro en src/pages/ usando un layout de src/layouts/.
¿Por qué WhatsApp y no un formulario?
El sistema prioriza la conversión por WhatsApp: respuesta inmediata, sin fricción y con mensaje pre-armado por intención (WA_MESSAGES). Todos los enlaces se generan con waUrl().
¿Cómo cambio la identidad visual?
Edita las variables de src/styles/tokens.css (sobre todo --c-primary y las fuentes). Todo el sitio se reviste solo: es la fuente única de diseño.