<head>Lo que pones en el <head> es invisible para el usuario, pero clave para Google, Twitter, WhatsApp, Facebook, navegadores y lectores RSS. Un <head> bien hecho gana clics y mejora el ranking; uno descuidado pierde tráfico antes de que el usuario llegue a verte.
Las piezas mínimas:
<title> — qué aparece en la pestaña y en los resultados de búsqueda.<meta name="description"> — el snippet bajo el título en Google.<meta property="og:title"> y og:description — Open Graph, lo que se ve cuando compartes el enlace.<meta property="og:image"> — la imagen del unfurl.<link rel="canonical"> — la URL "oficial" (evita penalizaciones por contenido duplicado).Lo ergonómico es que el <head> lo construya el layout, recibiendo los datos por props:
Cada página solo tiene que pasar title y description:
Astro.url → URL de la petición/build (con pathname, search, etc.).Astro.site → el site que pongas en astro.config.mjs. Útil para construir URLs absolutas.Astro.params y Astro.props → para componer titles dinámicos.Astro tiene integraciones oficiales:
@astrojs/sitemap → genera sitemap-index.xml automático.@astrojs/rss → endpoint RSS desde tus content collections.Las añades en astro.config.mjs con integrations: [sitemap(), ...].
Para datos estructurados (artículos, productos, eventos), inyecta JSON-LD desde el layout:
set:html mete el contenido sin escaparlo (úsalo solo cuando confíes en los datos).
Abre src/layouts/BaseLayout.astro. Tu trabajo:
interface Props { title: string; description: string } en el frontmatter.const { title, description } = Astro.props.<head>:
<title>{title}</title>.<meta name="description" content={description} />.<meta property="og:title" content={title} />.Si haces todo, cualquier página que use BaseLayout puede pasarle un title/description y obtener un <head> SEO-ready, consistente y sin repetir código.