Next.js の SEO：ChatGPT に御社のサイトを引用してもらうには？

許可する必要がある OpenAI のクローラーはどれですか？

ChatGPT の検索に御社のサイトを表示できるかどうかを決めるのは OAI-SearchBot です。三つのクローラーはそれぞれ役割が異なるため、ブロックするか許可するかは個別に決めてください。

// app/robots.ts

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

なぜ本文はサーバー側で描画される必要があるのですか？

ChatGPT のクローラーは、サーバーが送る HTML を読み、JavaScript は実行しないためです。App Router では、ページはデフォルトでサーバーコンポーネントです。読み込み後にクライアントコンポーネントで取得した本文は、その HTML に含まれません。ページはサーバーコンポーネントのままにし、インタラクティブな部分だけを "use client" のファイルに移してください。

各ページのメタデータには何を含めればよいですか？

一意のタイトルと説明文、正規 URL、そして多言語のサイトでは言語の代替 URL です。generateMetadata でページごとに作成します。Next.js は代替 URL を rel="canonical" と hreflang のリンクに変換します。JSON-LD は、Next.js のドキュメントが示すとおり、「<」をエスケープした通常の script タグとしてページに入れ、表示されている本文と同じ内容にしてください。

// app/guides/[slug]/page.tsx (a Server Component: no "use client")

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

クローラーのように確認するにはどうすればよいですか？

ブラウザを使わずに公開中のページを取得し、回答の本文、タイトル、正規 URL、JSON-LD があるかを確認します。本文が生の HTML に含まれていなければ、ChatGPT はそれを引用できません。

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

完璧な設定をすれば、引用されますか？

いいえ。設定によって、ページは読めて対象になるようになります。ただし ChatGPT は、ページがどれだけ質問によく答えているかで情報源を選びます。内容は、お客様が尋ねることへの最も明確な答えでなければなりません。