Caprini Dev

sagas/odisea-del-blog-maestro/019-el-alma-en-el-head-y-el-cine-del-carpincho.md

2026-03-24 published

Episodio 019 — El alma en el head y el cine del carpincho

Episodio 019 — El alma en el head y el cine del carpincho

Serie: bitácora de ingeniería — caprini.dev
Hilo: la metadata deja de ser un comentario en el YAML y se vuelve contrato con el navegador y con quien inspecciona el sitio.

De dónde sale lo que ves en F12

  1. Origen: cada entrada vive en Markdown bajo src/content/docs/ (bitácora) o src/content/series/ (La Odisea). Ahí declaras title, description y, por convención del proyecto, seoTitle, metaDescription (≤160 caracteres) y keywords (lista).

  2. Validación: src/content.config.ts define el esquema Zod de las colecciones. Si el frontmatter no cumple, el build falla antes de generar HTML basura.

  3. Consumo en página: las rutas Astro (src/pages/blog/[slug].astro, src/pages/odisea/[slug].astro, etc.) llaman a getCollection / getEntry, leen éntry.data` y pasan props al layout.

  4. Layout: src/layouts/MainLayout.astro resuelve el título y las metas con una cadena de fallback: seoTitle → title (legacy) → valor por defecto documentado en src/content/docs/system/BRANDING.md §6 e implementado en src/lib/site-seo-defaults.ts. Lo mismo para descripción y keywords (si no hay lista, se usa la cadena de keywords por defecto del branding).

  5. Salida estática: en ñpm run build, Astro **hornea** , y en cada índex.html. No hay runtime en el servidor: lo que ves en el inspector es el artefacto ya decidido en el repo.

La Odisea: vídeo primero, prosa después

En /odisea/[slug] el flujo añade una capa visual: videoUrl del frontmatter se traduce a una URL de embed (YouTube) y se pinta un iframe responsivo antes del cuerpo. El Markdown se renderiza debajo con la clase .episode-prose (estilos compartidos en src/styles/global.css), de modo que una sola fuente alimenta SEO, miniatura, vídeo y artículo.

Por qué importa

Unificar gobernanza (reglas en .cursor/rules/10-seo-standards.mdc), esquema (content.config.ts) y render (MainLayout) evita que el título de la pestaña sea siempre genérico mientras el artículo promete otra cosa. El “cine del carpincho” es la Odisea; el “alma en el head” es que el navegador muestre la misma historia que el Markdown firmó.