【WordPress】投稿ごとにOGP画像を設定するカスタムフィールドの作成方法

SNSでシェアされた際、見栄えやクリック率に大きく影響するのがOGP（Open Graph Protocol）画像です。WordPressでは、アイキャッチ画像をOGPに使う方法が一般的ですが、記事ごとに自由なOGP画像を設定したい場合には、カスタムフィールドを利用するのが効果的です。

本記事では、投稿ごとにOGP画像を自由に設定できるカスタムフィールドの作成方法と、実際にHTMLへ出力する方法を解説します。

ステップ1：カスタムフィールドを作成する（ACF使用）
ステップ2：OGP画像をHTMLヘッダーに出力する
ステップ3：Twitterカード用のタグも追加（任意）
ステップ4：OGP画像のサイズや仕様に注意
まとめ

ステップ1：カスタムフィールドを作成する（ACF使用）

まず、Advanced Custom Fields（ACF）プラグインを使って、OGP画像用のフィールドを作成します。

WordPress管理画面の「カスタムフィールド」→「フィールドグループを追加」へ移動
フィールド名：OGP画像（フィールドキー例：ogp_image）
フィールドタイプ：画像
表示条件：「投稿タイプが等しい投稿」
保存して公開

これで、投稿の編集画面に「OGP画像」アップロード欄が表示されるようになります。

ステップ2：OGP画像をHTMLヘッダーに出力する

functions.php に以下のコードを追加することで、投稿ごとにOGP画像をHTMLヘッダーに反映させることができます。

function add_custom_ogp_image_tag() {
  if (is_single()) {
    global $post;

    // ACFの画像フィールドを取得
    $ogp_image_id = get_field('ogp_image', $post->ID);

    if ($ogp_image_id) {
      $ogp_image_url = wp_get_attachment_url($ogp_image_id);
    } else {
      // Fallback：アイキャッチ画像
      $ogp_image_url = get_the_post_thumbnail_url($post->ID, 'full');
    }

    if ($ogp_image_url) {
      echo '<meta property="og:image" content="' . esc_url($ogp_image_url) . '">' . "\n";
    }
  }
}
add_action('wp_head', 'add_custom_ogp_image_tag');

このコードは以下のように動作します：

ACFで設定したogp_imageがあればそちらを使用
なければアイキャッチ画像（アイキャッチもなければOGPなし）

ステップ3：Twitterカード用のタグも追加（任意）

Twitterカードも設定したい場合は、twitter:imageタグを追加しましょう。

echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
echo '<meta name="twitter:image" content="' . esc_url($ogp_image_url) . '">' . "\n";