SEO Next.js : comment faire citer mon site par ChatGPT ?

Quel robot OpenAI faut-il autoriser ?

OAI-SearchBot est celui qui décide si la recherche ChatGPT peut afficher votre site. Les trois ont des rôles différents, donc bloquez-les ou autorisez-les séparément.

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

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: "*", allow: "/" },
      // ChatGPT search : doit être autorisé pour apparaître dans les réponses
      { userAgent: "OAI-SearchBot", allow: "/" },
      // Entraînement des modèles : votre choix, cela ne décide pas de la recherche
      { userAgent: "GPTBot", allow: "/" },
    ],
    sitemap: "https://www.example.com/sitemap.xml",
  };
}

Pourquoi le texte doit-il être rendu côté serveur ?

Parce que les robots de ChatGPT lisent le HTML que votre serveur envoie et n'exécutent pas JavaScript. Dans l'App Router, les pages sont des Server Components par défaut ; un texte chargé dans un Client Component après le chargement est absent de ce HTML. Gardez la page en Server Component et ne placez dans des fichiers « use client » que les parties interactives.

Que doivent contenir les métadonnées de chaque page ?

Un titre et une description uniques, une URL canonique et, sur un site multilingue, les versions alternatives par langue. generateMetadata les construit pour chaque page ; Next.js transforme les alternates en liens rel="canonical" et hreflang. Le JSON-LD va dans la page sous forme de balise script simple, avec « < » échappé comme le montre la documentation de Next.js, et doit dire la même chose que le texte visible.

// app/guides/[slug]/page.tsx (un Server Component : pas de "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>
  );
}

Comment le tester comme un robot ?

Récupérez la page en ligne sans navigateur et cherchez le texte de la réponse, le titre, la canonique et le JSON-LD. Si le texte n'est pas dans le HTML brut, ChatGPT ne peut pas le citer.

# 1. Le texte est dans le HTML brut (aucun JavaScript exécuté)
curl -s -A "OAI-SearchBot" https://www.example.com/guides/my-page | grep -i "une phrase de la réponse"

# 2. Le titre, la canonique et le JSON-LD sont là aussi
curl -s https://www.example.com/guides/my-page | grep -iE "<title>|rel=\"canonical\"|ld\+json"

# 3. Réponse de robots.txt et du sitemap
curl -s https://www.example.com/robots.txt
curl -s https://www.example.com/sitemap.xml | grep -c "<loc>"

Une configuration parfaite suffit-elle à être cité ?

Non. La configuration rend vos pages lisibles et éligibles ; ChatGPT choisit ses sources selon la qualité de la réponse à la question. Le contenu doit toujours être la réponse la plus claire à ce que demandent vos acheteurs.