Programa · Gastronomía y entretenimiento
Cocina vs HostCada capítulo del programa convertido en una receta que se puede buscar
Sitio en Astro para un programa de cocina con invitados: cada capítulo trae su receta, ingredientes, pasos, momentos con marca de tiempo, FAQ y schema.
Tecnologías
- Astro 7
- TypeScript
- Tailwind CSS v4
- MDX
- Content Collections + Zod
- @astrojs/node
- @astrojs/rss
- @astrojs/sitemap
- astro-robots-txt
- sharp
- Docker
- Railway
- Google Analytics 4
- Microsoft Clarity
- JSON-LD

19
URLs en el sitemap
15
capítulos con ficha
14
recetas con ingredientes y pasos
Mi rol
Diseño y desarrollo del sitio en Azirgo SAS para la productora La Jungla: sistema de episodios, SEO técnico y datos estructurados, medición y despliegue.
El problema
Cocina vs Host se publica en YouTube: cada semana un invitado que no sabe cocinar se enfrenta a una receta ecuatoriana real junto a Dina Muñoz. Todo lo que la gente busca - qué se cocinó, qué ingredientes lleva, cómo se prepara - estaba atrapado dentro del video. Los títulos de YouTube, además, no sirven como títulos de búsqueda: unos llegan a 90 caracteres con la marca y otros se quedan tan cortos que no dicen de qué va el capítulo. Y las marcas que querían auspiciar no tenían por dónde escribir.
Qué construí
- Home con el último capítulo en el hero, los pilares del formato, fotos del set, los seis episodios más recientes, un bloque de la host, un muro con todos los invitados que han pasado por la cocina y preguntas frecuentes.
- Archivo de episodios y una ficha por capítulo: el invitado y su rol, el plato del día con su dificultad, el reto de producción, el video, un resumen largo, la crónica del capítulo, la receta con ingredientes y paso a paso, y los momentos con marca de tiempo que abren el video en ese minuto.
- Preguntas frecuentes de cada capítulo generadas a partir de sus propios datos - qué se cocina, qué ingredientes lleva, el paso a paso, quién es el invitado y cuánto dura -, visibles en la página y marcadas como FAQPage con el mismo texto.
- Ficha de la host, Dina Muñoz, con su bio, su trayectoria contada por etapas, sus redes y sus últimos capítulos.
- Contacto pensado para auspiciantes: WhatsApp y correo con el mensaje ya escrito, la dirección del estudio y un mapa de Google que solo se carga al interactuar o al acercarse a pantalla. Una burbuja de WhatsApp con mensaje de auspicio acompaña todas las páginas.
- Feed RSS y llms.txt generados desde la misma colección de episodios, para no tener que actualizarlos a mano cada vez que entra un capítulo.
- Un script que genera los archivos de episodio en lote a partir de una lista de enlaces o del CSV que exporta YouTube Studio, y otro que convierte la miniatura de cada capítulo en la foto de fondo de su encabezado.
Cómo está estructurado
Astro 7 con Tailwind v4 y MDX, montado sobre la arquitectura de Astro Theme Cactus con un sistema de episodios propio. Los textos del programa, la host, las redes y el contacto viven en un solo módulo de datos, y los capítulos en una colección MDX. Se despliega en Docker sobre Railway, detrás de Cloudflare.
- Rutas: la home, /episodios y la ficha de cada capítulo, /host/dina-munoz y /contacto, más /rss.xml y /llms.txt generados en build. La antigua URL de la host redirige con 301 a la ficha nueva.
- Del video al sitio: el ID de YouTube define la miniatura, el reproductor y el VideoObject. El reproductor es lite: muestra solo la miniatura y carga el iframe de youtube-nocookie recién al hacer clic.
- Grafo JSON-LD en todas las páginas con el programa, la productora, la host y el WebSite; TVSeries en la home, VideoObject en cada capítulo, FAQPage donde hay preguntas, ProfilePage en la ficha de la host, y ContactPage con LocalBusiness y geocoordenadas del estudio en contacto.
- robots.txt con postura explícita frente a la IA: entran los buscadores con IA y también los rastreadores de entrenamiento, a propósito, para que el programa aparezca cuando alguien pregunte por él. Bytespider queda bloqueado.
- URLs sin barra final en canonicals, menús, JSON-LD, sitemap y RSS, y títulos de todas las páginas acotados a 50-60 caracteres.
- GA4 y Microsoft Clarity en todas las páginas, con preconnect y carga diferida para no competir con la portada.
- Identidad: morados, rosa y un acento mango, con Bricolage Grotesque, Space Grotesk e Instrument Serif. Cuando la pestaña queda en segundo plano, el título y el favicon parpadean con mensajes del programa, como «Se te quema el arroz».
De capítulo de YouTube a receta que se puede buscar
La ficha de cada capítulo está pensada para responder lo que se busca después de ver el video, o en lugar de verlo.
- Encabezado con el invitado y su rol, el plato del día con su dificultad y el reto de producción, sobre la miniatura del propio capítulo.
- La receta como bloque propio: ingredientes y paso a paso, tal como se cocinaron en el set.
- Momentos con marca de tiempo que enlazan al minuto exacto del video en YouTube.
- Resumen largo y crónica del capítulo, escrita en el cuerpo del MDX.
- Preguntas frecuentes generadas con los datos del capítulo; en la home, la respuesta a qué recetas se cocinan en el programa se arma con la lista real de platos.
- Navegación al capítulo anterior y al siguiente, y tres capítulos más para seguir viendo.
Por dentro del sitio

Ficha de capítulo: invitada, plato del día y reto. 
Ficha de la host, Dina Muñoz.
Decisiones técnicas
- Cada capítulo es un archivo MDX cuyo nombre es la URL, validado por un esquema: número, invitado, receta, reto, temas, momentos y preguntas propias. Un capítulo nuevo se carga copiando uno anterior, y uno en borrador se ve en desarrollo pero nunca en producción.
- El título de búsqueda de cada ficha se arma solo: se prueban candidatos - con la marca, con el plato, con el plato principal - y gana el primero que cae entre 50 y 60 caracteres. Alargar a la fuerza sería inventar texto, y recortar a ciegas deja títulos que Google corta.
- Las preguntas frecuentes de cada capítulo se construyen con los datos de su ficha y no se escriben a mano: nada puede quedar desactualizado ni contradecir la receta, y lo que se lee y lo que se marca como FAQPage es exactamente el mismo texto.
- El sitio corre con el adapter de Node, igual que el resto de los sitios de La Jungla, pero cada página de contenido se prerenderiza: es más rápido y es la condición para que Astro inyecte una CSP con hashes, sin unsafe-inline. Por eso la analítica se empaqueta como módulo y no como script inline.
- Tres entidades separadas en el grafo - el programa, la productora y la host -, cada una con su @id estable y solo sus propias redes en sameAs. Mezclarlas le dice a Google que una cuenta es de quien no es, y durante un tiempo la página de contacto mandaba a las redes de la productora como si fueran las del programa.
Retos
- Títulos de YouTube que no sirven para buscar: largos hasta los 90 caracteres con la marca, o tan cortos que no dicen de qué va el capítulo. Para los largos existe un título SEO propio en la ficha; para los cortos, el plato completa el título.
- Sostener una CSP estricta con GA4, Clarity, el reproductor de YouTube y el mapa de Google conviviendo en el mismo sitio, sin abrirla con unsafe-inline.
- Que un capítulo sin receta - el recopilatorio de los mejores momentos - conviva en la misma plantilla sin romper la ficha, las preguntas frecuentes ni el schema.
Resultado
El sitio está en producción con el archivo completo del programa: cada capítulo tiene su ficha con receta, momentos y preguntas frecuentes, y entra al sitemap, al feed RSS y al llms.txt sin tocar nada más. Las marcas llegan a WhatsApp con el mensaje de auspicio ya escrito, desde cualquier página.