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.

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.

// 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.

// 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:

---
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>

[ ] 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

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

# 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"