El patrón head y SEO

El problema de un head fijo

En la lección anterior el layout llevaba un <title>Mi sitio</title> escrito directamente. Como marco compartido funciona, pero como estrategia de SEO es un desastre: la página de contacto, la de inicio y cada artículo del blog saldrían al mundo con el mismo título en la pestaña del navegador y en los resultados de búsqueda. El buscador usa el <title> y la <meta name="description"> como la carta de presentación de cada URL; si todas dicen lo mismo, ninguna se distingue.

El objetivo, entonces, es conciliar dos fuerzas que parecen opuestas. Por un lado queremos un <head> centralizado, con toda su fontanería —codificación, viewport, enlaces a estilos, favicon— escrita una sola vez. Por otro, necesitamos que el título y la descripción cambien página a página. La solución no es renunciar a la centralización, sino parametrizarla: mantener la estructura en el layout y dejar que cada página inyecte los pocos datos que la hacen única.

Props: la página informa al layout

Un componente Astro recibe datos a través de Astro.props, y un layout, por ser un componente, no es distinto. En el frontmatter del layout desestructuras las props que esperas, y en el marcado las usas como cualquier valor.

---// src/layouts/Base.astroconst { title, description } = Astro.props;---<!doctype html><html lang="es">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>{title}</title>    <meta name="description" content={description} />  </head>  <body>    <slot />  </body></html>

Del lado de la página, las props se pasan como atributos en la etiqueta del layout, igual que pasarías atributos a cualquier componente.

---// src/pages/contacto.astroimport Base from '../layouts/Base.astro';---<Base title="Contacto" description="Cómo ponerte en contacto con nosotros">  <h1>Contacto</h1></Base>

Los atributos title y description de <Base> llegan al layout como Astro.props, y el layout los coloca en su <head>. El layout ha pasado de ser una estructura rígida a ser una plantilla: define la forma del documento y deja unos huecos con nombre que cada página rellena con sus datos.

Un head que se arma con datos

Con las props en la mano, el <head> deja de ser texto fijo y pasa a ser una pequeña construcción a partir de datos. Puedes aplicar un patrón de título coherente, calcular la URL canónica y ofrecer una descripción por defecto para las páginas que se olviden de darla.

---// src/layouts/Base.astroconst { title, description = 'Sitio construido con Astro 7' } = Astro.props;const tituloCompleto = `${title} · Mi sitio`;const canonica = new URL(Astro.url.pathname, Astro.site);---<head>  <meta charset="utf-8" />  <title>{tituloCompleto}</title>  <meta name="description" content={description} />  <link rel="canonical" href={canonica} /></head>

Aquí hay tres decisiones de diseño condensadas. El valor por defecto en description garantiza que ninguna página salga sin una descripción, aunque su autor la olvide. El tituloCompleto aplica una convención —nombre de la página, un separador, nombre del sitio— en un solo punto, así que cambiar ese formato afecta a todo el sitio a la vez. Y la URL canónica se calcula combinando Astro.site, la URL de producción declarada en astro.config.mjs, con Astro.url.pathname, la ruta de la página actual, de modo que cada página anuncia su dirección canónica sin que tú la escribas.

Valores por defecto y metadatos sociales

El <head> moderno no termina en el título y la descripción. Las tarjetas que se ven al compartir un enlace en redes o mensajería salen de las etiquetas Open Graph, y conviene generarlas desde los mismos datos para no mantener dos fuentes de verdad.

<meta property="og:title" content={title} /><meta property="og:description" content={description} /><meta property="og:type" content="website" /><meta property="og:url" content={canonica} />

Reutilizar title, description y canonica para las etiquetas sociales tiene una consecuencia valiosa: la página aporta un solo conjunto de datos y el layout los proyecta en todos los formatos que los buscadores y las redes esperan. Añadir mañana una etiqueta nueva —una imagen de previsualización, una tarjeta de un tipo distinto— es editar un fichero, no cientos.