ウェブサイトに Open Graph タグを追加する方法

生の HTML、WordPress、Next.js、Webflow のいずれを使用している場合でも、Open Graph タグをサイトに追加する方法は次のとおりです。

方法 1: 生の HTML (任意の静的 Web サイト)

HTML ファイルに直接アクセスできる場合は、各ページの セクション内に次のタグを追加します。

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

og:image URL が絶対 URL (https:// で始まる) であることを確認してください。 /images/preview.jpg のような相対パスは機能しません。

方法 2: WordPress (Yoast SEO)

Yoast SEO で WordPress を使用すると、OG タグが自動的に処理されます。

1. Yoast SEO プラグインをインストールして有効化する
2. 任意のページまたは投稿を編集します
3. Yoast SEO メタボックスまで下にスクロールします。
4. 「ソーシャル」タブをクリックします
5. 「Facebookタイトル」「Facebook説明」「Facebook画像」を設定します
6. Yoast は正しい og: タグを自動的に生成します

Yoast は、Twitter Card タグも自動的に追加します。 Yoast SEO → Social → Twitter で設定できます。

方法 3: WordPress (RankMath)

RankMath は Yoast と同様に機能しますが、設定が若干異なります。

1. RankMath SEO をインストールして有効化する
2. 任意のページまたは投稿を編集します
3. RankMath メタボックスを見つける
4. 「ソーシャル」タブに移動します
5. ソーシャルイメージ、タイトル、説明を設定します
6. RankMath は OG タグと Twitter Card タグを自動生成します

方法 4: Next.js (アプリルーター)

Next.js 13+ (App Router) では、メタデータ API を使用します。

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

動的ページ (ブログ投稿など) の場合、generateMetadata() でメタデータを生成します。

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

さらに詳しくは、Next.js ガイド の Open Graph タグをご覧ください。

よくある質問