Show · Food and entertainment
Cocina vs HostEvery episode of the show turned into a recipe people can search for
Astro site for a cooking show with guests: every episode has its recipe, ingredients, steps, timestamped moments, FAQ and structured data.
Technologies
- 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
sitemap URLs
15
episode pages
14
recipes with ingredients and steps
My role
Design and development of the site at Azirgo SAS for the production company La Jungla: episode system, technical SEO and structured data, measurement and deployment.
The problem
Cocina vs Host is published on YouTube: every week a guest who cannot cook takes on a real Ecuadorian recipe alongside Dina Muñoz. Everything people search for - what was cooked, what goes into it, how it is made - was trapped inside the video. YouTube titles also do not work as search titles: some reach 90 characters with the brand and others are so short they do not say what the episode is about. And brands that wanted to sponsor the show had nowhere to write.
What I built
- A home page with the latest episode in the hero, the pillars of the format, photos from the set, the six most recent episodes, a host section, a wall of every guest who has been through the kitchen and frequently asked questions.
- An episode archive and a page per episode: the guest and their role, the dish of the day and its difficulty, the production challenge, the video, a long summary, the episode write-up, the recipe with ingredients and step by step, and timestamped moments that open the video at that minute.
- Frequently asked questions for each episode generated from its own data - what is cooked, what goes into it, the step by step, who the guest is and how long it runs -, shown on the page and marked up as FAQPage with the same text.
- A profile of the host, Dina Muñoz, with her bio, her career told in stages, her social accounts and her latest episodes.
- Contact built for sponsors: WhatsApp and email with the message already written, the studio address and a Google map that only loads on interaction or as it nears the screen. A WhatsApp bubble with a sponsorship message sits on every page.
- An RSS feed and llms.txt generated from the same episode collection, so they never have to be updated by hand when an episode comes in.
- A script that generates episode files in bulk from a list of links or from the CSV that YouTube Studio exports, and another that turns each episode's thumbnail into the background photo of its header.
How it's structured
Astro 7 with Tailwind v4 and MDX, built on the Astro Theme Cactus architecture with an episode system of its own. The show's copy, host, social accounts and contact details live in a single data module, and the episodes in an MDX collection. It deploys in Docker on Railway, behind Cloudflare.
- Routes: the home page, /episodios and each episode page, /host/dina-munoz and /contacto, plus /rss.xml and /llms.txt generated at build time. The host's old URL redirects with a 301 to the new profile.
- From video to site: the YouTube ID defines the thumbnail, the player and the VideoObject. The player is lite: it shows only the thumbnail and loads the youtube-nocookie iframe on click.
- A JSON-LD graph on every page with the show, the production company, the host and the WebSite; TVSeries on the home page, VideoObject on each episode, FAQPage wherever there are questions, ProfilePage on the host profile, and ContactPage with LocalBusiness and the studio's coordinates on contact.
- robots.txt with an explicit stance on AI: AI search engines get in and so do training crawlers, on purpose, so the show comes up when someone asks about it. Bytespider is blocked.
- URLs with no trailing slash across canonicals, menus, JSON-LD, sitemap and RSS, and titles on every page kept to 50-60 characters.
- GA4 and Microsoft Clarity on every page, with preconnect and deferred loading so they do not compete with the hero.
- Identity: purples, pink and a mango accent, with Bricolage Grotesque, Space Grotesk and Instrument Serif. When the tab goes to the background, the title and favicon blink with messages from the show, like “Se te quema el arroz” (your rice is burning).
From YouTube episode to searchable recipe
Each episode page is designed to answer what people search for after watching the video, or instead of watching it.
- A header with the guest and their role, the dish of the day and its difficulty, and the production challenge, over the episode's own thumbnail.
- The recipe as a block of its own: ingredients and step by step, exactly as they were cooked on set.
- Timestamped moments that link to the exact minute of the video on YouTube.
- A long summary and the episode write-up, written in the body of the MDX.
- FAQ generated from the episode's data; on the home page, the answer to which recipes are cooked on the show is built from the real list of dishes.
- Navigation to the previous and next episode, and three more episodes to keep watching.
Inside the site

Episode page: guest, dish of the day and challenge. 
Host profile for Dina Muñoz.
Technical decisions
- Each episode is an MDX file whose name is the URL, validated by a schema: number, guest, recipe, challenge, topics, moments and its own questions. A new episode is added by copying an earlier one, and a draft shows in development but never in production.
- The search title of each episode page builds itself: it tries candidates - with the brand, with the dish, with the main dish - and the first one that lands between 50 and 60 characters wins. Padding it would mean inventing text, and blind truncation leaves titles that Google cuts off.
- Each episode's FAQ is built from the data on its page rather than written by hand: nothing can go stale or contradict the recipe, and what people read and what is marked up as FAQPage is exactly the same text.
- The site runs on the Node adapter, like the rest of La Jungla's sites, but every content page is prerendered: it is faster, and it is the condition for Astro to inject a hash-based CSP with no unsafe-inline. That is why analytics is bundled as a module rather than an inline script.
- Three separate entities in the graph - the show, the production company and the host -, each with a stable @id and only its own accounts in sameAs. Mixing them tells Google an account belongs to someone it does not, and for a while the contact page sent people to the production company's accounts as if they were the show's.
Challenges
- YouTube titles that do not work for search: up to 90 characters with the brand, or so short they do not say what the episode is about. Long ones get their own SEO title on the episode; for short ones, the dish completes the title.
- Keeping a strict CSP with GA4, Clarity, the YouTube player and the Google map living on the same site, without opening it up with unsafe-inline.
- Letting an episode with no recipe - the best-moments compilation - live in the same template without breaking the page, the FAQ or the schema.
Result
The site is in production with the show's complete archive: every episode has its page with recipe, moments and FAQ, and it goes into the sitemap, the RSS feed and llms.txt without touching anything else. Brands reach WhatsApp with the sponsorship message already written, from any page.