SEO en Next.js: ¿cómo hago que ChatGPT cite mi sitio?

¿Qué bot de OpenAI tengo que permitir?

OAI-SearchBot es el que decide si la búsqueda de ChatGPT puede mostrar tu sitio. Los tres hacen cosas distintas, así que permite o bloquea cada uno por separado.

// app/robots.ts
import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: "*", allow: "/" },
      // ChatGPT search: must be allowed to be shown in answers
      { userAgent: "OAI-SearchBot", allow: "/" },
      // Model training: your choice, it does not decide search
      { userAgent: "GPTBot", allow: "/" },
    ],
    sitemap: "https://www.example.com/sitemap.xml",
  };
}

¿Por qué el texto debe venir renderizado del servidor?

Porque los bots de ChatGPT leen el HTML que envía tu servidor y no ejecutan JavaScript. En el App Router las páginas son Server Components por defecto; el texto que se trae en un Client Component después de cargar no está en ese HTML. Deja la página como Server Component y pasa solo lo interactivo a archivos con "use client".

¿Qué debe tener la metadata de cada página?

Un título y una descripción únicos, la URL canónica y, en sitios multilingües, las alternativas de idioma. generateMetadata los arma por página; Next.js convierte alternates en enlaces rel="canonical" y hreflang. El JSON-LD va en la página en una etiqueta script simple, con "<" escapado como muestra la documentación de Next.js, y debe decir lo mismo que el texto visible.

// app/guides/[slug]/page.tsx (a Server Component: no "use client")
import type { Metadata } from "next";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const page = await getPage(slug);
  return {
    title: page.title,
    description: page.description,
    alternates: {
      canonical: `/guides/${slug}`,
      languages: { "pt-BR": `/pt/guides/${slug}`, es: `/es/guides/${slug}` },
    },
  };
}

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = await getPage(slug);
  const jsonLd = { "@context": "https://schema.org", "@type": "Article", headline: page.title };
  return (
    <article>
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
      <h1>{page.title}</h1>
      <p>{page.answer}</p>
    </article>
  );
}

¿Cómo lo pruebo como lo ve un bot?

Descarga la página publicada sin navegador y busca el texto de la respuesta, el título, el canonical y el JSON-LD. Si el texto no está en el HTML crudo, ChatGPT no puede citarlo.

# 1. The text is in the raw HTML (no JavaScript run)
curl -s -A "OAI-SearchBot" https://www.example.com/guides/my-page | grep -i "a sentence from the answer"

# 2. Title, canonical and JSON-LD are there too
curl -s https://www.example.com/guides/my-page | grep -iE "<title>|rel=\"canonical\"|ld\+json"

# 3. robots.txt and sitemap answer
curl -s https://www.example.com/robots.txt
curl -s https://www.example.com/sitemap.xml | grep -c "<loc>"

¿Con todo bien configurado me van a citar?

No necesariamente. La configuración hace que tus páginas se lean y sean elegibles; ChatGPT elige fuentes por lo bien que responden. El contenido todavía tiene que ser la respuesta más clara a lo que preguntan tus clientes.