Configurar SEO en Astro antes de enviar tu proyecto a producción marca la diferencia entre un sitio invisible y uno que Google, redes sociales y lectores RSS puedan descubrir. Aquí aprendes a estructurar el head, integrar Open Graph, generar tu feed RSS y crear un sitemap. Es una guía práctica para desarrolladores que quieren cumplir con los estándares mínimos de optimización.

¿Cómo crear un componente BaseHead con metadatos SEO en Astro?

El primer paso es centralizar toda la configuración SEO en un único componente reutilizable. Así, cada página hereda los metadatos sin que tengas que repetir código.

En src/components creas un archivo llamado BaseHead.astro y pegas el bloque de código que se entrega como recurso. En la parte superior defines tres props clave que llegan desde Astro.props: title, description y la URL canónica.

js const { title, description } = Astro.props; const canonicalURL = new URL(Astro.url.pathname, Astro.site);

La URL canónica le dice a los buscadores cuál es la dirección original de tu contenido, algo crítico si alguien copia tus tips.

¿Qué es una URL canónica y para qué sirve? Es la dirección oficial de una página. Si Google detecta contenido duplicado en otro sitio, la URL canónica le indica cuál es la fuente principal y evita que tu SEO se vea afectado.

¿Qué metadatos básicos debe tener tu head?

Dentro de BaseHead se incluyen elementos que cumplen funciones específicas:

• Charset UTF-8 para soportar acentos y emojis del español latinoamericano.
• viewport para que Tailwind aplique reglas responsive en mobile, tablet y desktop.
• Metas de compatibilidad como estándar HTML.
• title y description dinámicos desde props.
• Favicon e iconos para iPhone, Windows y otros sistemas operativos.

No necesitas diseñar cada icono a mano. Con un solo PNG de 512x512 píxeles puedes generar todos los formatos en herramientas online recomendadas en la sección de recursos.

¿Cómo añadir Open Graph y Twitter Cards para previews en redes sociales?

Open Graph es el estándar que permite previsualizar tu URL al compartirla en WhatsApp, Facebook o LinkedIn. Cuando pegas un enlace y aparece una imagen con título y descripción, eso es Open Graph trabajando.

La estructura incluye etiquetas como og:type, og:url, og:title, og:description y la famosa og:image. Esta última es la imagen que aparece en el preview, conocida también como OG image.

Twitter usa su propio estándar con metas twitter:card, twitter:title, twitter:image y dos campos importantes: twitter:creator y twitter:site. El primero es tu usuario personal, el segundo puede ser la cuenta de la empresa o marca. Recuerda reemplazar el usuario de ejemplo por el tuyo.

¿Qué diferencia hay entre Open Graph y Twitter Cards? Open Graph es el estándar genérico que usan Facebook, WhatsApp y la mayoría de plataformas. Twitter Cards es la versión específica de Twitter, con campos adicionales como creator y site para atribución.

¿Cómo integrar BaseHead en tu layout principal?

En tu layout base haces el import del componente y le pasas las props:

astro <BaseHead title="Astro Tips" description="My First Pitch" />

También debes cambiar el atributo lang del HTML a es porque tu sitio está en español.

Si al ejecutar npm run dev aparece un error de invalid URL en una línea extraña, no te confíes del número que marca el log. El problema está en new URL porque falta declarar el site en astro.config:

js export default defineConfig({ site: 'https://astrobuild.tips' });

¿Cómo generar un feed RSS y un sitemap en Astro?

Un feed RSS permite que lectores y agregadores se enteren cuando publicas contenido nuevo. El sitemap, en cambio, es el mapa que Google y otros buscadores usan para indexar tu sitio.

Primero instalas la integración oficial:

bash npm install @astrojs/rss@2.1.0

Dentro de src/pages creas un archivo rss.xml.js con esta estructura:

js import rss from '@astrojs/rss'; import { getCollection } from 'astro:content';

export async function get(context) { const post = await getCollection('tips'); return rss({ title: 'Astro Build.Tips', description: 'My First Page', site: context.site, items: post.map((post) => ({ ...post.data, link: /post/${post.slug}/ })) }); }

La función getCollection trae cada tip de tu carpeta content/tips y los mapea con su slug correspondiente.

¿Cómo añadir el sitemap automático?

La integración del sitemap es aún más sencilla:

bash npm install @astrojs/sitemap@1.0.1

En astro.config importas y registras la integración:

js import sitemap from '@astrojs/sitemap';

export default defineConfig({ site: 'https://astrobuild.tips', integrations: [sitemap()] });

Al ejecutar npm run build se generan automáticamente rss.xml y los archivos del sitemap dentro de la carpeta dist. Todo el proceso tarda alrededor de 3.14 segundos.

Un detalle importante: revisa que no queden console.log olvidados en tu proyecto, porque aparecen en cada build y no es buena práctica dejarlos.

Habilidades y conceptos clave de la clase

• Componente BaseHead centralizado para metadatos SEO [01:30].
• URL canónica generada con new URL(Astro.url.pathname, Astro.site) [02:15].
• Open Graph para previews en WhatsApp, Facebook y LinkedIn [04:20].
• Twitter Cards con creator y site para atribución [05:40].
• Configuración site en astro.config para evitar el error invalid URL [08:10].
• Integración @astrojs/rss versión 2.1.0 para generar el feed [09:30].
• getCollection para iterar contenido y construir items del RSS [10:45].
• Integración @astrojs/sitemap versión 1.0.1 para indexación en buscadores [12:20].

¿Ya tienes tu sitio listo con estos metadatos? Cuéntame en los comentarios qué integraciones SEO sumarías además del RSS y el sitemap.