OGPとメタタグのGEO最適化——AIが参照するメタ情報

AI検索サービスで自社ページが引用されるとき、タイトルや説明文がどこから取得されているかを考えたことはあるでしょうか。多くの場合、その情報源はHTMLの<head>内に記述されたメタタグです。

OGP（Open Graph Protocol）やdescriptionメタタグは、従来はSNSシェアやGoogle検索のスニペット用と考えられてきました。しかしAIクローラもこれらの情報を読み取り、コンテンツの要約や分類に活用しています。

この記事では、GEO対策としてメタタグをどう設計すべきかを、AIクローラの挙動をもとに解説します。

メタタグの基本——head要素に書かれる3つの情報

HTMLの<head>要素には、ページの内容を説明するための複数のメタ情報が含まれます。 GEO対策で重要なのは、標準HTMLメタタグ、OGPタグ、Twitterカードタグの3種類です。

<head>
  <!-- 1. 標準HTMLメタタグ -->
  <title>CDN設定とAIクローラの相性——キャッシュがクロールを妨げるケース</title>
  <meta name="description" content="CDNのBot対策がAIクローラをブロックする事例と対処法を解説します。" />

  <!-- 2. OGPタグ -->
  <meta property="og:title" content="CDN設定とAIクローラの相性" />
  <meta property="og:description" content="CDNのBot対策がAIクローラをブロックする事例と対処法" />
  <meta property="og:image" content="https://example.com/images/cdn-ai-crawler.png" />
  <meta property="og:url" content="https://example.com/blog/cdn-ai-crawler" />
  <meta property="og:type" content="article" />

  <!-- 3. Twitterカードタグ -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="CDN設定とAIクローラの相性" />
  <meta name="twitter:description" content="CDNのBot対策がAIクローラをブロックする事例と対処法" />
</head>

OGPはFacebookが2010年に策定したプロトコルで、SNSでURLがシェアされたときの表示内容を制御します。 AIクローラもこの情報をページの概要把握に利用しています。

AIクローラはメタタグをどう読んでいるか

AIクローラがWebページを取得するとき、まずHTMLの<head>セクションを解析します。本文（<body>）の前にページの概要を把握するためです。

各AIクローラのメタタグ参照傾向を整理します。

クローラ	User-Agent	title / description	OGPタグ
GPTBot（OpenAI）	GPTBot/1.0	参照する	参照する
ChatGPT-User	ChatGPT-User	参照する	参照する
Google-Extended	Google-Extended	参照する	参照する
ClaudeBot（Anthropic）	ClaudeBot/1.0	参照する	参照する
PerplexityBot	PerplexityBot	参照する	参照する

AIクローラはJavaScriptを実行しないため、サーバーサイドでレンダリングされたHTMLに含まれるメタタグのみを読み取ります。クライアントサイドでメタタグを動的に生成している場合、AIクローラからは空に見えることがあります。

AIが検索結果でページを引用する際、<title>タグを最も重視し、<meta name="description">が概要の要約に使われます。 og:titleと<title>が異なる場合、<title>が優先される傾向があります。

GEO対策としてのメタタグ設計——5つの原則

原則1: titleとog:titleは一致させる

<title>とog:titleに異なるテキストを設定すると、AIがどちらを「正式な」タイトルとして扱うか予測できません。

<!-- 推奨 -->
<title>CDN設定とAIクローラの相性——キャッシュがクロールを妨げるケース</title>
<meta property="og:title" content="CDN設定とAIクローラの相性——キャッシュがクロールを妨げるケース" />

原則2: descriptionには「何がわかるか」を書く

AIはdescriptionを引用テキストの候補として使います。文字数は120〜160文字が目安です。

<!-- 推奨：読者にとっての価値が明確 -->
<meta name="description" content="CDNのBot対策がAIクローラをブロックする3つのパターンと、Cloudflare・Vercelの設定手順を解説します。" />

原則3: og:typeとarticle:published_timeを正しく設定する

article:published_timeはAIが情報の鮮度を判断する材料になります。日付のないページは「いつ書かれたかわからない情報」として信頼度が下がる可能性があります。

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-08-08T00:00:00+09:00" />

原則4: canonical URLを明示する

link rel="canonical"とog:urlで正規URLを明示します。この2つは必ず同じURLを指す必要があります。

<link rel="canonical" href="https://example.com/blog/cdn-ai-crawler" />
<meta property="og:url" content="https://example.com/blog/cdn-ai-crawler" />

原則5: 不要なメタタグを入れない

<meta name="keywords">はGoogle検索でもAIクローラでも参照されません。使用するメタタグは、上記で紹介したものに絞ります。

フレームワーク別のメタタグ実装

Next.js（App Router）

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug)
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.publishedAt,
      url: `https://example.com/blog/${params.slug}`,
    },
    twitter: { card: 'summary_large_image', title: post.title },
    alternates: { canonical: `https://example.com/blog/${params.slug}` },
  }
}

Astro

---
const { title, description, publishedAt, slug } = Astro.props
const canonicalUrl = new URL(`/blog/${slug}`, Astro.site)
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalUrl} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:type" content="article" />
  <meta property="og:url" content={canonicalUrl} />
  <meta property="article:published_time" content={publishedAt} />
  <meta name="twitter:card" content="summary_large_image" />
</head>

メタタグの検証方法

AIクローラのUser-Agentを指定してリクエストを送り、レスポンスのHTMLを確認します。

curl -s -A "GPTBot/1.0" https://example.com/blog/cdn-ai-crawler \
  | grep -E '<title>|<meta (property|name)="(og:|twitter:|description)'

JavaScriptでメタタグを動的に生成している場合、このコマンドの結果にメタタグが含まれません。その場合はSSR対応が必要です。

AI固有のメタタグ——今後の動向

現時点では、AIクローラ専用の標準メタタグは存在しません。ただし、<meta name="robots">でクローラ個別に指示を出せます。

<meta name="GPTBot" content="index, follow" />
<meta name="Google-Extended" content="noindex, nofollow" />

構造化データ（JSON-LD）とメタタグの併用も有効です。メタタグとJSON-LDの情報が矛盾しないよう、同一のデータソースから両方を生成する仕組みが理想です。

チェックリスト

チェック項目	確認方法
`<title>`と`og:title`が一致しているか	curlでHTML取得して比較
descriptionが120〜160文字で具体的か	目視確認
`og:type`が正しいか（article / website）	HTML確認
`og:url`とcanonicalが一致しているか	HTML確認
`article:published_time`が設定されているか	HTML確認
AIクローラのUser-Agentでメタタグが見えるか	curl -A で確認
JavaScriptなしでメタタグがレンダリングされるか	curl確認

まとめ

メタタグはSNSシェアのためだけのものではなく、AIクローラにコンテンツの概要を伝える重要な手段です。 <title>、description、OGP、canonical URLの4点を正確かつ一貫して設定することが、GEO対策の基盤になります。

フレームワークのメタデータAPIやCMSの設定を活用して、メタタグの品質を維持する運用体制を整えてください。