IA · Flujo de trabajo

Plan 9
11 oct 2026
9 min de lectura

Cómo creamos un sitio .NET listo para SEO sin escribir una línea de código

Una guía práctica de cómo plan9.co.uk pasó de un prototipo en Claude Design a un sitio en vivo y prerenderizado en IIS en solo unos días, con 100 puntos en SEO y todo el código escrito por Claude.

IA · Flujo de trabajo

Prototipo → Diseño → Configuración → Publicación → Repetir

En solo unos días, el sitio que estás leyendo pasó de ser un prototipo en Claude Design a un sitio ASP.NET Core en vivo y prerenderizado en IIS. Obtiene 100 en SEO y 91 en rendimiento móvil en Lighthouse. Nadie de nuestro equipo escribió una línea de código. Cada línea de C#, MSBuild y Node la escribió Claude Cowork.

Esta es la guía que nos habría gustado tener al principio. Si gestionas tus sitios con Windows, IIS y .NET y quieres usar Claude para crear un sitio rápido y fácil de encontrar en buscadores, así lo hicimos, esto es lo que salió mal y lo que repetiríamos.

Este es el artículo de cómo lo hicimos. Para saber por qué construimos así nuestro propio sitio, lee Los hijos del zapatero van descalzos.

Ideas clave

Cero programaciónNosotros marcamos el rumbo, revisamos y probamos. Claude hizo el trabajo pesado.

Divide el trabajoClaude Design para las páginas y el contenido; Claude Cowork para la funcionalidad del servidor, el prerenderizado y la publicación.

Prerenderiza para el SEOTodos los rastreadores ven HTML terminado, no marcadores de JavaScript.

Publica en dos pasosExporta un zip y pulsa Publicar.

Mide y ajustaTras una revisión con Lighthouse, el rendimiento móvil pasó de 83 a 91. Todas las métricas están por encima de 90.

No necesitas programar, pero sí conocer el terreno

Claude escribió cada línea de código. Nuestro trabajo fue describir lo que queríamos, revisar los resultados y probarlos. Eso solo funciona si entiendes lo suficiente las herramientas implicadas, como Visual Studio, IIS, Cloudflare, DNS, el envío de correo y Google Search Console, para detectar cuándo algo no va bien. Piensa en ello como dirigir la obra en lugar de construirla.

Dos Claudes, dos carriles

La decisión más útil que tomamos fue dividir el trabajo entre dos herramientas y mantener cada una en su carril.

Claude Design: aspecto y contenidoDiseñó cada página, escribió los textos y los casos de éxito, generó todas las páginas a partir de un archivo maestro y exportó el sitio como zip.

Claude Cowork: servidor e infraestructuraConectado a nuestro entorno de desarrollo local, escribió el código .NET, de correo, de SEO y de publicación, probó los cambios en su propio entorno aislado y revisó el sitio en vivo en un navegador.

Breves notas en Markdown entre ambosLos dos se pasaban el trabajo mediante pequeñas notas en la carpeta del proyecto, como CONTACT-FORM.md (qué envía el formulario y qué espera recibir) y PRERENDER.md. Cada parte sabía exactamente lo que necesitaba la otra.

La infraestructura

Visual Studio y .NET 10Compila la aplicación. El botón Publicar la despliega en IIS con Web Deploy.

IIS en AWSAloja la aplicación en un servidor Windows en Amazon Web Services.

CloudflareDNS, HTTPS, caché y compresión delante del servidor.

Amazon SESEnvía los correos del formulario de contacto.

Node.js y PlaywrightHerramientas de compilación que se ejecutan en nuestro entorno de desarrollo durante la publicación. No se ejecuta nada extra en el servidor en vivo.

Empezamos con un proyecto ASP.NET Core vacío cuyo único código decía «Hello World!» y copiamos la exportación de Claude Design en wwwroot.

Paso 1: servir el sitio estático

La primera corrección fue sencilla. La aplicación no servía wwwroot, así que cada visita mostraba «Hello World!». Claude Cowork activó los archivos estáticos para que el index.html de cada carpeta cargue en una dirección limpia como /work/alliance-wine/, configuró una caché adecuada, ocultó archivos de trabajo como notas de diseño y scripts de compilación, y añadió una redirección a HTTPS en producción.

Paso 2: un formulario de contacto que funciona

Claude Design definió el formulario y escribió un breve contrato que lo describía. Claude Cowork construyó la parte del servidor de acuerdo con él.

Un endpoint /api/contactValida el nombre, el correo y el mensaje en el servidor y luego envía la consulta a nuestra bandeja mediante Amazon SES, con el visitante como Reply-To.

Un correo de confirmación con nuestra marcaClaude Design creó la plantilla de correo con el estilo del sitio. El servidor completa los datos del visitante y la envía junto a una versión en texto plano.

Protección contra spamUn límite de cinco envíos por visitante cada diez minutos, más un campo trampa oculto que solo rellenan los bots.

Secretos fuera del códigoLas credenciales de correo se guardan en una configuración de entorno segura en nuestros servidores de desarrollo y producción, nunca en el control de versiones.

Paso 3: una página 404 real y redirecciones

Las páginas que no existen muestran ahora nuestra página 404 diseñada con un estado 404 auténtico, para que los buscadores no indexen enlaces rotos. Las direcciones antiguas del sitio anterior redirigen de forma permanente a su nueva ubicación, y añadir una redirección es una línea en una lista.

Paso 4: prerenderizado para el SEO

Este fue el paso más importante. Las páginas de Claude Design son plantillas que JavaScript rellena en el navegador. Google se las arregla, pero Bing, las vistas previas de LinkedIn, rastreadores de IA como ChatGPT, Perplexity y Claude, y la mayoría de las herramientas de SEO veían marcadores de plantilla sin procesar entre llaves en lugar de encabezados y texto.

Renderizar una vez, al publicarUn script de Playwright abre cada página de sitemap.xml en un navegador Chrome oculto, espera a que termine de renderizarse y guarda el resultado como HTML terminado, con títulos, descripciones, enlaces canónicos y datos estructurados.

Nada cambia para los visitantesLa plantilla original se conserva en la página y se restablece antes de que arranque el JavaScript del sitio, así que el menú, los filtros, el cambio de tema y el formulario funcionan exactamente igual.

Los elementos personales, fueraEl aviso de cookies, la nota de peso de página y el contador de visitas no se guardan en el HTML, porque son distintos para cada visitante.

Una red de seguridadLa publicación falla si alguna página sigue teniendo un marcador sin rellenar, así que nunca puede salir en vivo un sitio a medio renderizar.

Si un rastreador no puede leerlo, no existe. El prerenderizado hizo que todos los rastreadores pudieran leer cada página.

Paso 5: publicación con un clic

Actualizar el sitio ahora son dos acciones:

1. ExportarDescarga el sitio desde Claude Design como zip y guárdalo en una carpeta design-drop del proyecto.

2. PublicarPulsa Publicar en Visual Studio. La compilación descomprime el sitio en wwwroot, lo optimiza, prerenderiza cada página, lo despliega en IIS y sale en vivo a través de Cloudflare. Cualquier fallo detiene la publicación, así que el sitio en vivo nunca queda a medio actualizar.

Los pasos adicionales se ejecutan automáticamente en cada compilación Release, así que la depuración normal sigue siendo rápida. La única configuración inicial es instalar Node.js en el entorno de desarrollo y dejar que la primera publicación descargue el navegador de Playwright.

Paso 5a: la alternativa para equipos, Git y un runner

Publicar desde Visual Studio funciona bien para un equipo pequeño. Si varias personas trabajan en el sitio, publica en un repositorio Git y configura un runner en tu servidor, como un runner autoalojado de GitHub Actions o GitLab. Cada vez que se suben cambios, el runner compila, prerenderiza y despliega el sitio automáticamente, así todos trabajan desde la misma fuente y cada versión queda registrada.

Paso 6: ajustes con Lighthouse

Ejecutamos Lighthouse en una ventana de incógnito y pegamos el informe en ambas herramientas. Claude Design corrigió la parte de contenido: el idioma de la página, un H1 en la página de inicio y el tamaño de las imágenes. Claude Cowork corrigió la parte del servidor: caché de larga duración con nombres de archivo versionados, un script principal que no bloquea, React servido desde nuestro propio servidor, Google Tag Manager cargando después de la página y scripts minificados a aproximadamente la mitad de su tamaño original.

Rendimiento83 → 91

Accesibilidad92 → 96

SEO100

Aparece el contenido principal4,0 s → 2,4 s

Consejos si quieres hacer lo mismo

Da a cada herramienta un solo trabajoDeja que la herramienta de diseño se encargue de las páginas y el contenido, y la de programación, del servidor. No permitas que ambas editen los mismos archivos.

Entrega por escritoBreves notas en Markdown en la carpeta del proyecto mantuvieron a ambas partes coordinadas y se convirtieron en nuestra documentación.

Ten un archivo de notas permanenteUn archivo CLAUDE.md con reglas de trabajo, como «cada página nueva debe estar en sitemap.xml», evita que tengas que repetirte en cada sesión.

Prerenderiza desde el primer díaSi tus páginas se construyen en el navegador, prerenderízalas al publicar. Es la diferencia entre un sitio bonito y uno que se encuentra.

Haz que la publicación falle de forma visibleLas comprobaciones automáticas que detienen una mala publicación valen más que cualquier cantidad de pruebas manuales.

Prueba como un visitanteRevisa el sitio en vivo en una ventana de incógnito, en tu teléfono y en el Post Inspector de LinkedIn. Las vistas previas en caché y las copias obsoletas de la CDN sorprenden a todo el mundo.

Qué significa esto para nuestros clientes

Este sitio es deliberadamente sencillo: pocas páginas, editadas por quienes lo crearon. Para los clientes que necesitan editores, flujos de trabajo e integraciones, Umbraco sigue siendo la respuesta correcta. Pero el mismo enfoque, con la IA haciendo el trabajo rutinario y personas con experiencia revisando cada cambio, ahora también recorre nuestros proyectos con clientes. Es más rápido, cuesta menos y deja a nuestros desarrolladores más tiempo para los problemas que los necesitan.

Si quieres ayuda para crear algo parecido en tu propia infraestructura .NET e IIS, escríbenos.