Guía de SEO Técnico Avanzado para Sitios con Astro

Astro es un framework excepcional para el SEO. Su arquitectura de Multi-Page Application (MPA) y su enfoque en enviar cero JavaScript por defecto se traducen en un rendimiento de primer nivel, un factor clave para el ranking en Google. Sin embargo, para exprimir todo su potencial, es crucial configurar correctamente los aspectos técnicos del SEO.

Esta guía te mostrará, con ejemplos de código, cómo implementar las mejores prácticas de SEO técnico en tu proyecto de Astro.

1. Sitemap Automático con `@astrojs/sitemap`

Un sitemap le dice a Google qué páginas existen en tu sitio y ayuda a que las descubra más rápido. La integración oficial de Astro lo hace increíblemente fácil.

Instalación:

npx astro add sitemap

Configuración: El comando anterior ya modifica tu astro.config.mjs. Solo asegurate de que la URL de tu sitio (site) esté definida.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://www.tu-sitio.com', // ¡URL de producción!
  integrations: [sitemap()],
});

Ahora, cada vez que construyas tu sitio (npm run build), se generará un sitemap-index.xml en tu carpeta dist/.

2. Controlando a los Rastreadores con `robots.txt`

Este archivo le da instrucciones a los bots de los buscadores. Creá un archivo robots.txt dentro de la carpeta public/.

# public/robots.txt

# Permitir a todos los bots rastrear todo el sitio
User-agent: *
Allow: /

# Bloquear la indexación de entornos de preview
User-agent: *
Disallow: /preview/

# Ubicación del Sitemap
Sitemap: https://www.tu-sitio.com/sitemap-index.xml

3. Rich Snippets con un Componente de Schema Reutilizable

El Schema (o datos estructurados) ayuda a Google a entender tu contenido y a mostrar “rich snippets” en los resultados, mejorando tu CTR. La mejor forma de manejarlo es con un componente reutilizable.

Creá el componente src/components/Schema.astro:

---
// src/components/Schema.astro
import type { Thing, WithContext } from 'schema-dts';

interface Props {
  schema: WithContext<Thing>;
}

const { schema } = Astro.props;
---

<script type="application/ld+json" set:html={JSON.stringify(schema)} />

Nota: Para tener autocompletado y tipado, podés instalar npm install schema-dts.

Usalo en tus layouts: Ahora podés importar este componente y pasarle el schema correspondiente.

Ejemplo para un post de blog (src/layouts/PostLayout.astro):

---
import Schema from '../components/Schema.astro';
import BaseLayout from './BaseLayout.astro';
import type { Article } from 'schema-dts';

const { frontmatter } = Astro.props;

const articleSchema: Article = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: frontmatter.title,
  description: frontmatter.description,
  image: frontmatter.image.src,
  datePublished: frontmatter.publishDate,
  author: {
    '@type': 'Person',
    name: frontmatter.author,
  },
};
---
<BaseLayout {...frontmatter}>
  <Fragment slot="head">
    <Schema schema={articleSchema} />
  </Fragment>
  <article>
    <slot />
  </article>
</BaseLayout>

4. URLs Canónicas para Evitar Contenido Duplicado

Una etiqueta canónica le dice a Google cuál es la versión “preferida” de una página. Es crucial para evitar problemas de contenido duplicado. En Astro, es tan simple como añadir esta línea en tu layout principal, dentro del <head>:

<link rel="canonical" href={Astro.url.href} />

5. Internacionalización (i18n) y `hreflang`

Si tu sitio tiene múltiples idiomas, las etiquetas hreflang le indican a Google las versiones alternativas de una página para diferentes idiomas o regiones.

En tu layout, podés generar estas etiquetas dinámicamente:

---
// Suponiendo que tenés un objeto con las URLs de cada idioma
const translations = {
  'es': 'https://example.com/es/mi-pagina',
  'en': 'https://example.com/en/my-page',
};
---
<head>
  {Object.entries(translations).map(([lang, href]) => (
    <link rel="alternate" hreflang={lang} href={href} />
  ))}
</head>

Conclusión: SEO Técnico Simplificado

Astro no solo te da una base de rendimiento increíble, sino que su sistema de componentes y su configuración simple hacen que implementar SEO técnico avanzado sea una tarea ordenada y mantenible. Al automatizar la generación de sitemaps, centralizar el schema y manejar correctamente las URLs canónicas, te asegurás de que tu contenido de alta calidad reciba la visibilidad que merece.

¿Querés una auditoría técnica completa de tu sitio Astro? Contactanos. Te entregamos un reporte con quick wins y un roadmap de mejoras por impacto.