francisco-carracedo.com

Por qué publicar un meta case study

Lo más caro de evaluar a un desarrollador freelance es averiguar si de verdad construye lo que dice construir. La mayoría de portfolios resuelven ese problema listando logos de clientes y pidiéndote que confíes en el copy. Este lo resuelve siendo aquello que vende: cada decisión de arquitectura está en el código fuente que puedes inspeccionar desde tu navegador ahora mismo.

El brief que me puse a mí mismo

• Funcionar como prueba de lo que vendo — headless WordPress, Next.js, AEO, multilingüe.
• Cargar rápido en una conexión móvil típica del Reino Unido, no solo en mi portátil.
• Aparecer correctamente en AI Overviews, Perplexity y ChatGPT Search — answer-engine primero, page-rank después.
• Funcionar sin sobrecarga DevOps mensual — un proyecto en Vercel, un hosting de WordPress, cero servidores que tenga que cuidar.

Arquitectura

WordPress es el CMS. Entradas, proyectos, taxonomías, grupos de campos ACF Pro — toda la superficie editorial vive ahí. El frontend es un build de Next.js 16 con App Router que consume vía WPGraphQL con revalidación tipo ISR: el contenido es dinámico para el editor pero estático para el visitante. El CMS y el frontend pueden caer de forma independiente — si WP se cae, el último contenido válido se sigue sirviendo desde el edge.

Los dos sistemas están unidos solo por una variable de entorno del lado servidor, y el cliente GraphQL omite deliberadamente el prefijo NEXT_PUBLIC_ para que el endpoint nunca llegue al bundle del navegador. Ese detalle importa porque la instalación de WP es el único sistema que guarda secretos; si se filtrase al lado cliente, todas las demás capas serían una falsa sensación de seguridad.

La superficie AEO

Cada página emite un stack de schemas JSON-LD — Person, WebSite, Article, BreadcrumbList — con valores @id estables para que los crawlers consoliden el site como una única entidad, no como un puñado de páginas casi duplicadas. Una ruta dinámica /llms.txt sirve el resumen canónico que los agentes de ingesta de LLMs piden cuando quieren el elevator pitch sin scrapear HTML.

i18n bien hecho

El portal se publica en inglés (mercado objetivo: UK) y español. El <html lang> es dinámico por locale, cada página genera alternates.languages con hreflang y x-default, el sitemap emite una entrada por URL por locale con alternates emparejados, y un script en build-time fuerza paridad entre los bundles EN y ES — el build falla si una clave existe en uno y no en el otro. Cuando el contenido del lado WP no está traducido (actualmente el caso para los cuerpos de los proyectos), aparece un banner discreto “Available in English” para los visitantes ES con un cambio directo de ruta. Sin fallback silencioso.

Rendimiento

Lighthouse 90+ es el suelo al que me comprometo en cada página. next/image sirve variantes AVIF/WebP con un hint sizes específico por contexto, la imagen LCP se carga con priority para tenerla cuanto antes, las fuentes están subsetadas, y la mayor parte del site renderiza como Server Components — el bundle de JS que llega al visitante es una fracción pequeña de lo que contiene la página.

Lo que puedes verificar en 30 segundos

• Ver Código Fuente en cualquier página — busca los bloques application/ld+json y las etiquetas hreflang.
• Abre /llms.txt en tu navegador — esa es la página que ven los agentes LLM.
• Abre /sitemap.xml — cada URL aparece una vez por locale con sus alternates.
• Cambia el locale en la navbar — la URL se reescribe, el <html lang> cambia, y el case study en el que estás se intercambia limpiamente.
• Ejecuta Lighthouse en cualquier ruta desde DevTools — comprueba el suelo.

Lo que este case study no es

No es un proyecto de cliente. Es el demostrador que construí entre proyectos de cliente para hacer concreto el resto de la oferta. Si estás considerando un build similar para tu propio negocio o el de un cliente, los patrones de aquí transfieren directamente — la instalación de WP está desacoplada, el setup de i18n es reutilizable, y la factory de JSON-LD es lo bastante genérica para meterla en cualquier proyecto Next App Router.