Next.js SEO: how do I get my site cited by ChatGPT?

Which OpenAI crawler do I need to allow?

OAI-SearchBot is the one that decides whether ChatGPT search can show your site. The three have different jobs, so block or allow them separately.

// 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",
  };
}

Why must the text be server-rendered?

Because ChatGPT's crawlers read the HTML your server sends and do not run JavaScript. In the App Router, pages are Server Components by default; text fetched in a Client Component after load is missing from that HTML. Keep the page a Server Component and move only the interactive parts to "use client" files.

What should each page's metadata include?

A unique title and description, a canonical URL and, on multilingual sites, the language alternates. generateMetadata builds them per page; Next.js turns alternates into rel="canonical" and hreflang links. JSON-LD goes in the page as a plain script tag, with "<" escaped as the Next.js docs show, and must say the same as the visible text.

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

How do I test it like a crawler?

Fetch the live page without a browser and look for the answer text, the title, the canonical and the JSON-LD. If the text is not in the raw HTML, ChatGPT cannot quote it.

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

Does a perfect setup get me cited?

No. The setup makes your pages readable and eligible; ChatGPT picks sources by how well a page answers the question. The content still has to be the clearest answer to what your buyers ask.