Crea desde cero un sitio nuevo para mi negocio en mi servidor de hosting
[server name]. Datos:
1. Nombre del negocio:
[business name], oficio:
[plumber / locksmith / AC service / other]
2. Nombre del Perfil de Empresa o dominio:
[Business Profile name]
3. Servicios (cada uno tendrá su propia página):
[services]
4. Distritos que atiendo y ubicación de mi taller:
[districts],
[workshop location]
5. Teléfono:
[phone], WhatsApp:
[WhatsApp], dirección:
[address, or "I hide my address"], horario:
[hours]
6. Dominio:
[domain], preferencia de color:
[colour preference], fotos reales:
[where the photos are, or "none"]
7. Trabajos que no hago:
[services not offered]
Primero lee la ficha de
[Business Profile name] con gbp_location_details. Compara en una sola tabla el nombre, el teléfono, la dirección, el sitio web, el horario, la categoría principal, los servicios y el enlace del mapa con lo que te he dado. Donde haya diferencias, pregúntame cuál es correcto; no cambies nada en el Perfil de Empresa. En el sitio, usa el nombre, la dirección y el teléfono exactamente como están escritos en el Perfil de Empresa. Si la ficha oculta la dirección, no muestres ninguna dirección postal en el sitio y enumera solo las zonas de servicio. Toma las coordenadas únicamente del marcador del mapa de la ficha, nunca las adivines. Elige el subtipo de LocalBusiness del schema según la categoría principal (Plumber, Locksmith, HVACBusiness, Electrician, etc.).
Después confirma el servidor con list_servers, llama primero a scaffold_site con style="service" y confirm=false para mostrarme qué se va a sobrescribir, y ejecútalo con confirm=true tras mi aprobación. Lee site_design_guide y site_seo_guide. Antes de escribir código, escribe la decisión de diseño en _kaynak/ART.md y enséñamela: una maquetación minimalista suiza, una tipografía grotesca pesada para titulares de Fontshare (por ejemplo Cabinet Grotesk 800) con una tipografía de texto sencilla (por ejemplo General Sans 400 y 600), fondo blanco roto, texto azul marino oscuro, un único color de señal que dé al menos 4,5:1 de contraste con texto blanco, y un verde de WhatsApp aparte. El elemento distintivo es un par de botones grandes fijos en la parte inferior de la pantalla en móvil: "Llamar ahora" y "Escribir por WhatsApp".
Páginas y schema:
1. Inicio: la primera pantalla dice en una frase qué haces y qué distritos cubres, con los botones de llamada y WhatsApp y el horario. Después, tarjetas de servicios, tarjetas de distritos, los pasos de una intervención y una FAQ de 4 preguntas. Schema: WebPage, FAQPage.
2. Una página de servicios y una página por servicio: el primer párrafo responde directamente a "qué haces y cómo"; después síntomas, los pasos en el sitio, cuándo es una urgencia, cómo se fija el precio (sin inventar cifras), 3 FAQ propias de la página, el autor y la fecha. Schema: Service (provider #business, areaServed los distritos), FAQPage.
3. Una página de zona por distrito. Estas NO deben ser copias con el nombre de la ciudad cambiado. Cada una incluye los nombres de los barrios de ese distrito, las averías que más se ven allí según el parque de edificios local (una tabla cuyas filas cambian de un distrito a otro), una nota sobre desplazamiento y aparcamiento, la distancia desde el taller, dos FAQ específicas de ese distrito y enlaces a las demás zonas. Escribe al menos 300 palabras de texto original; si el análisis de duplicados de seo-check detecta más de un 50 % de solapamiento entre dos páginas de zona, reescríbelas. No crees una página para un distrito que no atiendo realmente. Schema: AdministrativeArea (containedInPlace la provincia, containsPlace los barrios), Service, FAQPage.
4. Sobre nosotros: quién eres, cómo trabajas, con qué equipo y qué trabajos no aceptas. Schema: AboutPage, y Person si te di un nombre real.
5. Contacto: NAP, horario, un enlace "Cómo llegar" y el formulario de WhatsApp. Schema: ContactPage con mainEntity #business.
6. Una página de aviso de privacidad y una página 404.
Nada inventado: no escribas reseñas, valoraciones, premios, certificados, cifras de clientes ni afirmaciones como "el mejor" que no sean reales. No añadas al schema ni al texto horarios, coordenadas, precios o un correo electrónico que no te haya dado; deja el campo fuera y anótalo como pendiente en el informe. No uses rayas largas ni eslóganes genéricos, y haz que el primer párrafo de cada página responda directamente a la pregunta de esa página.
SEO común: cada página lleva un title único de 48 a 60 caracteres, una description de 145 a 158 caracteres, un único H1 y un canonical que termine en barra. Añade a cada página su propio nodo WebPage y un BreadcrumbList, enlazados al grafo base mediante @id. En robots.txt escribe Allow: / para Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended y CCBot, explica la decisión en un comentario e indica qué cambiar si quiero bloquear los rastreadores de entrenamiento. sitemap.xml lleva fechas lastmod reales. llms.txt describe el negocio con precisión en dos frases y enumera el NAP y las páginas importantes con enlaces.
Configuración técnica (en este sitio no se usa la ruta por defecto del kit, por estas razones):
1. Compila Tailwind y elimina el CDN. El kit carga Tailwind mediante el CDN Play, que compila en el navegador, imprime una advertencia en la consola y reduce el rendimiento en móvil. Escribe _kaynak/package.json con site_write_file, instala con site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) y espera con site_command_status. En _kaynak/tailwind.config.js establece content como "./*.html", "./**/*.html", "!./_kaynak/**" y "./_kaynak/chrome.mjs". Mueve las reglas @font-face, las líneas @tailwind y el anillo de foco, el skip link y la protección contra desbordamiento del app.css del kit a _kaynak/site.css. Genera la salida en assets/app.css, porque design-check.mjs busca las fuentes en ese archivo, y añade ?v=<content hash> al enlace en cada página para que la caché del edge nunca sirva el archivo antiguo.
2. Autoaloja las fuentes. Lee con site_read_url la URL del CSS de las familias de Fontshare que elegiste (api.fontshare.com/v2/css?f[]=...), descarga sus archivos woff2 con site_fetch en assets/fonts/ y decláralos con @font-face y font-display: swap. Precarga cada peso usado en la primera pantalla con <link rel="preload" as="font" type="font/woff2" crossorigin>, tres archivos como máximo. Si te lo saltas, el cambio de fuente desplaza el diseño; en la demo el CLS en escritorio fue 0,078 por este motivo y bajó a 0 con la precarga.
3. Haz que el menú y el pie sean HTML estático. Los componentes <site-nav> y <site-footer> del kit funcionan con JavaScript, y la mayoría de los rastreadores de IA nunca ven el menú, la dirección ni el teléfono. Elimina los scripts chrome.js y motion.js de todas las páginas. En _kaynak/chrome.mjs escribe dos funciones que construyan el HTML de la cabecera y del pie a partir de assets/site.config.js; construye el menú móvil sin JavaScript con <details> y <summary>, y marca la página actual con aria-current="page". Escribe build.mjs en la raíz del sitio, que, por orden, ejecute node seo-stamp.mjs, vuelva a estampar todo lo que hay entre <!-- chrome:header:start --> y <!-- chrome:header:end --> (y lo mismo para el pie) en cada página, compile Tailwind y actualice el hash en el enlace del CSS. Después de cada cambio, ejecuta solo site_run_command("node build.mjs").
4. Sin movimiento. No cargues GSAP, Lenis, Swiper ni ningún script de animación en este sitio; los visitantes llegan desde el móvil para llamar o escribir rápidamente.
5. Reduce las imágenes. Descarga cada foto con site_fetch en archivos separados usando resize="480x", "800x", "1200x", "1600x", image_format="webp" y una calidad entre 60 y 68. Da a cada <img> srcset, sizes, y width y height que coincidan con la proporción real; si recortas, añade una clase de proporción como aspect-
[4/3] con object-cover, de lo contrario el diseño se desplaza al cargar la imagen. La imagen de la primera pantalla lleva fetchpriority="high" y no es lazy; todas las demás llevan loading="lazy". Descarga la imagen para compartir en redes como un JPG de 1200x630 con site_fetch.
6. Pequeños detalles que cuestan puntos: añade un favicon SVG con <link rel="icon"> (si no, el navegador solicita /favicon.ico, el 404 aparece como error en la consola y Best Practices baja). Escribe DOCTYPE en mayúsculas, no uses atributos style y no dejes espacios al final de las líneas. Usa en lugar de espacios en el texto visible de los enlaces de teléfono (la regla tel-non-breaking de html-validate). Los enlaces del menú, el pie, las migas de pan y los encabezados deben medir al menos 44 píxeles de alto y de ancho. No incrustes un iframe de Google Maps; el sitio no debe hacer peticiones externas, así que muestra la dirección y un enlace "Cómo llegar".
7. Ninguna petición debe salir del sitio: fuentes, scripts, estilos e imágenes viven en tu propio servidor. No hay gestor de formularios, así que el formulario de contacto es un formulario method="get" que apunta a https://wa.me/
[WhatsApp number] con un textarea prerrellenado llamado "text"; no se necesita JavaScript.
Puertas de calidad (en este orden; no lo des por terminado hasta que todas pasen):
1. Ejecuta node build.mjs con site_run_command y luego node seo-check.mjs: 0 errores, 0 advertencias. Una advertencia de contenido duplicado significa que dos páginas no son lo bastante distintas; reescríbelas.
2. node design-check.mjs: 0 errores. Si elegiste un estilo sin movimiento, comunica la advertencia de "sin movimiento" como una decisión deliberada, con el motivo.
3. _kaynak/node_modules/.bin/html-validate en cada archivo HTML: 0 errores. Pon una línea _kaynak/ en un archivo .htmlvalidateignore en la raíz del sitio para que no se analicen las dependencias.
4. Comprobación del NAP: muestra en una tabla que el nombre, la dirección y el teléfono del sitio coinciden con la salida de gbp_location_details letra por letra.
5. Revisa cada página con site_preview en view="mobile", view="desktop", y también con anchos de 360 y 768. Corrige el desplazamiento horizontal, los titulares que se desbordan, los botones apretados o el texto ilegible y vuelve a mirar.
6. Mide cada página con core_web_vitals con strategy="mobile" y strategy="desktop", y obtén las puntuaciones de accesibilidad, buenas prácticas y SEO con seo_audit. El objetivo en móvil es 100 en accesibilidad, buenas prácticas y SEO y al menos 95 en rendimiento; en escritorio, al menos 95 en las cuatro. En una página que no lo alcance, ejecuta core_web_vitals con resources=true, localiza el elemento LCP y cualquier imagen sobredimensionada, corrígelo y repite seo_audit con runs=2, porque una sola medición de laboratorio puede fluctuar.
7. Las peticiones de red no deben contener ninguna dirección ajena al dominio propio del sitio.
Tras la publicación: envía sitemap.xml con gsc_submit_sitemap y revisa la página de inicio y las tres páginas más importantes con gsc_inspect_urls. Ninguna herramienta puede pulsar "Solicitar indexación"; enumera lo que tengo que solicitar a mano en Search Console.
Termina con este informe: la lista de páginas con las puntuaciones en móvil y escritorio por página en una tabla (rendimiento, accesibilidad, buenas prácticas, SEO, LCP, CLS), el resultado de cada puerta de calidad, las correcciones que hiciste y la información que aún necesitas de mí. Si no se alcanzó algún objetivo, dilo claramente en lugar de darlo por terminado.
