OGP（Open Graph Protocol）は、SNSでURLをシェアした際に表示される「カード」の見た目を制御する仕組みです。適切に設定することで、クリック率が大幅に向上します。
現在のbiken-sendai.comでは、OGP画像がfavicon（apple-touch-icon.png）になっています。SNSでシェアされると小さなアイコンしか表示されず、信頼性・クリック率が低下しています。
専用OGP画像（1200×630px）を設定すると、SNSシェア時に会社名・業種・所在地が一目でわかる画像が表示されます。取引先への信頼性向上と新規問い合わせの増加が期待できます。
Generated OGP Images
作成済みOGP画像（2パターン）
以下の画像をダウンロードしてWordPressにアップロードしてください。
パターンA（推奨）
パターンBMethod A
方法A：Yoast SEO プラグインを使う
最も簡単な方法です。Yoast SEOがインストール済みであれば、コードを一切触らずに設定できます。
Aサイト全体のデフォルトOGP画像を設定する
WordPress管理画面にログインする
ブラウザで https://biken-sendai.com/wp-admin/ にアクセスし、管理者アカウントでログインします。
「SEO」→「ソーシャル」メニューを開く
左側のメニューから 「SEO」 をクリックし、サブメニューの 「ソーシャル」 を選択します。
「Facebook」タブ →「デフォルト画像」を設定する
「Facebook」タブを選択し、「デフォルト画像」の 「画像を選択」 ボタンをクリックします。
メディアライブラリが開いたら、「ファイルをアップロード」タブからダウンロードしたOGP画像（パターンA推奨）をアップロードし、「選択」をクリックします。
「変更を保存」をクリックする
ページ下部の 「変更を保存」 ボタンをクリックして完了です。
これでサイト全体のデフォルトOGP画像が設定されました。各ページにアイキャッチ画像がない場合、このデフォルト画像が使用されます。
B各ページ個別にOGP画像を設定する（任意）
設定したいページの編集画面を開く
「固定ページ」または「投稿」の一覧から、OGP画像を個別設定したいページの 「編集」 をクリックします。
画面下部の「Yoast SEO」ブロックを開く
編集画面を下にスクロールすると、「Yoast SEO」ブロックが表示されます。「ソーシャル」タブをクリックします。
「Facebook画像」に画像を設定して更新する
「Facebook画像」の 「画像を選択」 からOGP画像を設定し、ページ右上の 「更新」 ボタンをクリックして保存します。
Method B
方法B：All in One SEO プラグインを使う
All in One SEO がインストールされている場合の手順です。
「All in One SEO」→「ソーシャルネットワーク」を開く
左メニューの 「All in One SEO」 をクリックし、「ソーシャルネットワーク」 を選択します。
「Open Graph（Facebook）」タブを選択する
「Open Graph（Facebook）」タブをクリックします。
「デフォルトのOGP画像」をアップロードする
「デフォルトのOGP画像」の「画像を選択」からOGP画像をアップロード・選択します。
「変更を保存」をクリックする
ページ下部の 「変更を保存」 ボタンをクリックして完了です。
方法C：functions.php に直接コードを追加する
SEOプラグインを使用していない場合の方法です。テーマのfunctions.phpに以下のコードを追加します。
※ functions.phpの編集は誤ると画面が真っ白になる場合があります。必ずバックアップを取ってから作業してください。
// functions.php に追加するコード
function biken_ogp_tags() {
// デフォルトOGP画像のURL（アップロード後に変更）
$ogp_image = get_template_directory_uri() . '/assets/images/ogp.png';
// 各ページにアイキャッチ画像があればそちらを優先
if ( is_singular() && has_post_thumbnail() ) {
$ogp_image = get_the_post_thumbnail_url( get_the_ID(), 'large' );
}
echo '<meta property="og:image" content="' . esc_url( $ogp_image ) . '" />' . "\n";
echo '<meta property="og:image:width" content="1200" />' . "\n";
echo '<meta property="og:image:height" content="630" />' . "\n";
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:image" content="' . esc_url( $ogp_image ) . '" />' . "\n";
}
add_action( 'wp_head', 'biken_ogp_tags' );注意：コードを追加した後、get_template_directory_uri() . '/assets/images/ogp.png' の部分を、実際にアップロードしたOGP画像のURLに変更してください。
Verification
設定後の確認方法
設定完了後は必ず以下のツールで正しく反映されているか確認してください。
OGP確認ツール（おすすめ）
URLを入力するだけでOGP画像・タイトル・説明文の表示を確認できます。最もシンプルで使いやすいツールです。
https://ogp.buta3.net/Facebook シェアデバッガー
FacebookおよびInstagramでのシェア時の表示を確認できます。キャッシュのクリアも行えます。
https://developers.facebook.com/tools/debug/Twitter Card Validator
X（旧Twitter）でのカード表示を確認できます。
https://cards-dev.twitter.com/validatorよくある質問
SNSはOGP情報をキャッシュ（一時保存）しています。Facebookシェアデバッガーを使い、URLを入力して「再度スクレイピング」ボタンをクリックするとキャッシュがクリアされます。
Checklist
作業完了チェックリスト
以下の項目をすべて完了したら作業終了です。