SEO no Next.js: como fazer meu site ser citado pelo ChatGPT?

Qual robô da OpenAI eu preciso liberar?

O OAI-SearchBot é o que decide se a busca do ChatGPT pode mostrar seu site. Os três têm funções diferentes, então libere ou bloqueie cada um 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 que o texto precisa vir renderizado do servidor?

Porque os robôs do ChatGPT leem o HTML que o servidor envia e não executam JavaScript. No App Router as páginas são Server Components por padrão; texto buscado num Client Component depois de carregar não está nesse HTML. Mantenha a página como Server Component e leve só as partes interativas para arquivos com "use client".

O que a metadata de cada página precisa ter?

Título e descrição únicos, URL canônica e, em site multilíngue, as alternativas de idioma. O generateMetadata monta isso por página; o Next.js transforma alternates em links rel="canonical" e hreflang. O JSON-LD entra na página numa tag script simples, com "<" escapado como a documentação do Next.js mostra, e precisa dizer o mesmo que o texto visível.

// 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>
  );
}

Como testo do jeito que o robô vê?

Baixe a página em produção sem navegador e procure o texto da resposta, o título, o canonical e o JSON-LD. Se o texto não está no HTML bruto, o ChatGPT não consegue citar.

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

Com tudo certo eu vou ser citado?

Não necessariamente. A configuração deixa as páginas legíveis e elegíveis; o ChatGPT escolhe fontes pela qualidade da resposta. O conteúdo ainda precisa ser a resposta mais clara para o que seus clientes perguntam.