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

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

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

ステップ1：カスタムフィールドを作成する（ACF使用）
ステップ2：OGP画像をHTMLヘッダーに出力する
OGP画像のサイズや仕様に注意
よくある質問（FAQ）
まとめ

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

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

WordPress管理画面の「カスタムフィールド」→「フィールドグループを追加」へ移動
フィールド名：OGP画像（フィールドキー例：ogp_image）
フィールドタイプ：画像
返り値の形式：画像ID（デフォルトは「配列」のため、必ずここを変更してください）
表示条件：「投稿タイプが等しい投稿」
保存して公開

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

返り値の形式を必ず「画像ID」にする
ACFの画像フィールドは、「返り値の形式」のデフォルトが配列（Array）です（ACF公式情報で確認）。この設定を変更せずに次のPHPコード（wp_get_attachment_url($ogp_image_id)のように投稿ID＝整数を前提にしたコード）を使うと、get_field()が配列を返してしまい正しく動作しません。さらに配列は真値として判定されるため、アイキャッチ画像へのフォールバックにも到達せず、OGP画像タグ自体が一切出力されなくなります。フィールド設定画面で「返り値の形式」を必ず「画像ID」に変更してください。

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

functions.phpに以下のコードを追加することで、投稿ごとにOGP画像をHTMLヘッダーに反映させることができます。Twitterカード用のタグもこの関数内にまとめて出力します。

functions.php：OGP・Twitterカード画像タグの出力

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

    // ACFの画像フィールドを取得（返り値の形式を「画像ID」にしておくこと）
    $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";

      // Twitterカード用のタグも追加（任意）
      echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
      echo '<meta name="twitter:image" content="' . esc_url($ogp_image_url) . '">' . "\n";
    }
  }
}
add_action('wp_head', 'add_custom_ogp_image_tag');

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

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

OGP画像のサイズや仕様に注意

OGP画像として推奨されるサイズは以下の通りです。

推奨サイズ：1200×630px（アスペクト比1.91:1）
ファイル形式：JPGまたはPNG
ファイルサイズ：5MB以下が望ましい

ACFで画像サイズを制限したい場合は、フィールド設定画面で制限を加えることができます。

よくある質問（FAQ）

QOGP画像専用のカスタムフィールドをメタボックスで実装するには？

Aadd_meta_box()でメタボックスを追加し、WordPressのメディアアップローダーを使って画像IDをカスタムフィールドに保存します。表示にはwp_get_attachment_image_url()でURLを取得してog:imageに出力します。

QOGP画像が設定されていない場合にアイキャッチ画像にフォールバックするには？

Aカスタムフィールドの値を確認し、空ならget_the_post_thumbnail_url()を使います。それも空ならサイトのデフォルトOGP画像URLにフォールバックするという段階的な処理を実装します。

QYoastやRankMathと組み合わせてOGPフィールドを使うには？

AYoast SEOの場合はwpseo_opengraph_imageフィルターでカスタムフィールドの値に上書きする方法が確実です。ただしこのフィルターは既存のog:imageを上書きする仕組みのため、そもそもog:imageが出力されていない状態では効果がありません。プラグイン設定でカスタムOGP画像を直接設定できる場合はそちらが推奨です。