お問い合わせ
お問い合わせ
ホーム > WordPress > SEO対策 > ACFでOGP画像を記事ごとに設定する方法【WordPress初心者向け】

ACFでOGP画像を記事ごとに設定する方法【WordPress初心者向け】

WordPress
ACFでOGP画像を記事ごとに設定する方法を解説するWordPress初心者向けアイキャッチ画像
ACFを使ってWordPressの記事ごとにOGP画像を設定する方法を紹介するチュートリアル用アイキャッチ画像。シンプルで統一感のあるデザイン。

OGP（Open Graph Protocol）画像を記事ごとに設定することで、SNSでシェアされたときに見た目をぐっと引き立てることができます。
本記事では、**Advanced Custom Fields（ACF）**を使って、記事ごとにOGP画像を自由に設定する方法をわかりやすく解説します。

1. OGPとは？設定の重要性

OGPとは、SNSでリンクを共有したときに表示される「タイトル・説明・サムネイル画像」などの情報を制御する仕組みです。
特に画像（OGP画像）はクリック率に直結する重要要素です。

✅ 例えば、以下のような効果があります：

  • SNSシェア時にアイキャッチ画像とは別の画像を設定可能
  • ブランドイメージを統一できる
  • 投稿内容に合わせて訴求力を高められる

🔗 関連記事：【初心者向け】構造化データ（schema.org）とは？

2. 事前準備：ACFプラグインの導入

まず、ACF（Advanced Custom Fields）をインストールして有効化しましょう。

手順：

  1. 管理画面 →「プラグイン」→「新規追加」
  2. 「Advanced Custom Fields」で検索
  3. インストール → 有効化

👉 詳しくは：WordPressでカスタムフィールドを使う方法（ACF入門）

3. フィールドグループの作成

  1. 管理画面 →「カスタムフィールド」→「新規追加」
  2. フィールドグループ名を「OGP設定」などにします
  3. 「画像」フィールドを追加し、下記のように設定します：
項目設定内容
フィールドラベルOGP画像
フィールド名ogp_image
フィールドタイプ画像
返り値の形式画像URL
表示する投稿タイプ投稿（post）

設定後、「公開」ボタンをクリック。

4. 投稿画面でOGP画像を登録する

投稿編集画面に「OGP画像」フィールドが追加されているはずです。
各記事ごとに好きな画像を設定しましょう。

5. テーマファイルへのコード追加

次に、ACFで登録したOGP画像をmetaタグとして出力します。
header.phpまたはfunctions.phpに以下を追記します。

<?php
// ACFで設定したOGP画像を出力
function my_custom_ogp_image() {
  if (is_single()) {
    $ogp_image = get_field('ogp_image'); // ACFのフィールド名
    if ($ogp_image) {
      echo '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . "\n";
    } else {
      // OGP画像未設定時はアイキャッチ画像を使用
      if (has_post_thumbnail()) {
        $thumbnail = get_the_post_thumbnail_url(null, 'full');
        echo '<meta property="og:image" content="' . esc_url($thumbnail) . '">' . "\n";
      } else {
        // デフォルトの画像
        echo '<meta property="og:image" content="' . get_template_directory_uri() . '/img/common/default-ogp.jpg">' . "\n";
      }
    }
  }
}
add_action('wp_head', 'my_custom_ogp_image');
?>

💡 ポイント：

  • 投稿にOGP画像を設定 → ACF画像を出力
  • 未設定 → アイキャッチ画像を出力
  • どちらもない → デフォルトOGP画像を出力

これで、SNSシェア時に記事ごとに異なるOGP画像が反映されます。

6. OGPが正しく反映されているか確認

FacebookやX（旧Twitter）に投稿する前に、OGPの内容をチェックしましょう。

🔍 チェッカーサイト：

👉 ここで設定したOGP画像が正しく表示されていれば成功です！

💡 7. よくあるトラブルと対処法

トラブル原因対処法
OGP画像が更新されないSNS側のキャッシュDebuggerで再取得
画像が表示されないフィールド名のミスget_field('ogp_image')の確認
一部記事だけ反映されない条件分岐の漏れis_single()を正しく指定

8. さらに便利な応用例

ACFを使えば、OGP画像以外にも以下のような設定が可能です👇

  • OGPタイトル・OGP説明を個別設定
  • Twitterカード用画像を別に指定
  • Facebook専用のシェア画像を設定

🔗 関連記事：

まとめ：ACFで柔軟なOGP設定を実現しよう

内容説明
ACF導入カスタムフィールドを追加できる
OGPフィールド作成記事ごとに画像を設定可能
meta出力コードwp_headフックで制御
確認方法Facebook Debugger・Twitter Validator

ACFを使うことで、プラグインに頼らず記事ごとに自由なOGP画像設定が可能になります。
SNSシェア時の印象を高めて、あなたのブログをもっと魅力的に見せましょう！

関連記事