# Cómo solucionar que la IA ignore los metadatos SEO

> Los agentes de IA generan páginas de Next.js y Astro sin etiquetas de título, metadatos de Open Graph ni URL canónicas, entregando páginas invisibles para los motores de búsqueda y los rastreadores sociales.

**Type:** Failure  
**Tools:** Cursor, Claude Code, Codex, Windsurf  
**Stack:** Next.js, Astro, TypeScript  
**Updated:** 2026-06-08

---

El agente genera componentes de página sin exportación de `Metadata`, sin etiqueta `title` y sin etiquetas Open Graph, produciendo páginas que se posicionan mal y se comparten mal en redes sociales.

## El síntoma

Una página de Next.js App Router se genera sin ninguna exportación de metadatos, dejando el título de la pestaña en blanco y el `head` vacío más allá de los valores predeterminados de Next.js.

```tsx
// app/blog/[slug]/page.tsx — WRONG
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
  // No <title>, no meta description, no og:image, no canonical URL
}
```

Google ve: `Untitled document`. Twitter/LinkedIn muestran una tarjeta en blanco.

## Por qué ocurre

El agente se centra en la interfaz de usuario visible — obtención de datos y renderizado — y trata los metadatos del `head` como algo secundario. El SEO es invisible durante el desarrollo local y no produce un error en tiempo de ejecución, por lo que el agente nunca recibe retroalimentación de que falta algo.

## Cómo detectarlo

- Sin `export const metadata` o `export async function generateMetadata` en los archivos de página de App Router.
- Sin `Astro.props` ni `title` / `description` impulsados por frontmatter en los diseños de Astro.
- Puntuación SEO de Lighthouse por debajo de 90 en una página nueva.
- `curl -s http://localhost:3000/blog/my-post | grep "<title>"` no devuelve nada o un título de sitio genérico.
- `og:image` faltante en el `head` (la vista previa social muestra una tarjeta en blanco).

## Cómo solucionarlo

Exporta `generateMetadata` para páginas dinámicas y agrega todas las etiquetas requeridas.

```tsx
// app/blog/[slug]/page.tsx — CORRECT
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://example.com/blog/${params.slug}` },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://example.com/blog/${params.slug}`,
      images: [{ url: post.ogImage, width: 1200, height: 630, alt: post.title }],
      type: "article",
      publishedTime: post.publishedAt,
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}
```

Para Astro, pasa los metadatos a través del diseño:

```astro
---
// src/pages/blog/[slug].astro
const { post } = Astro.props;
---
<Layout
  title={post.title}
  description={post.excerpt}
  ogImage={post.ogImage}
  canonical={`https://example.com/blog/${post.slug}`}
>
  <article>
    <h1>{post.title}</h1>
    <post.Content />
  </article>
</Layout>
```

```txt
[ ] Every page exports generateMetadata (Next.js) or passes title+description to layout (Astro)
[ ] title is unique per page — not just the site name
[ ] description is 120-160 characters and describes the page content
[ ] og:title, og:description, og:image (1200x630), og:url are all set
[ ] twitter:card is "summary_large_image" for pages with images
[ ] canonical URL is set to the preferred URL (no trailing slash ambiguity)
[ ] robots meta is not accidentally set to "noindex"
[ ] Verify with: curl -s <url> | grep -E "<title>|og:title|description"
```

## Indicación de solución

```txt title="Fix Prompt"
This page component is missing all SEO metadata. Add an async generateMetadata
export (Next.js App Router) that returns title, description, canonical URL, full
openGraph object (title, description, url, images with 1200x630 dimensions, type),
and twitter card metadata. Derive values from the page's data fetch — do not use
placeholder strings. Also confirm that no parent layout accidentally sets
robots: noindex.
```

## Prueba

```bash
# Check that <title> and og:title appear in the server-rendered HTML
curl -s http://localhost:3000/blog/my-post \
  | grep -E '<title>|og:title|og:description|og:image|canonical' \
  | grep -v "node_modules" \
  && echo "Metadata present" || echo "FAIL: metadata missing"
```