2026年5月20日

WordPressのFacebook OGP画像が表示されない場合の解決方法

エラー・白い画面

はじめに

ブログ記事のURLをFacebookやLINE・Twitterでシェアしても画像が表示されない、または古い画像が表示されたまま更新されないことがあります。これはOGP（Open Graph Protocol）タグの設定か、ソーシャルメディア側のキャッシュが原因です。

症状・原因

URLをシェアしても画像なしのリンクカードになる
以前の画像が表示されたままで更新されない
一部のSNSでは表示されるが特定のSNSだけ表示されない

主な原因：

1. og:image タグが出力されていない

2. 画像URLがHTTPSでない（FacebookはHTTPS必須）

3. 画像サイズが要件を満たしていない（最小200×200px、推奨1200×630px）

4. ソーシャルメディア側のOGPキャッシュが古い

解決手順

ステップ1：OGPタグの出力を確認

ブラウザでページのソースを表示し、内に以下のタグがあるか確認します。

<meta property="og:title"       content="記事タイトル" />
<meta property="og:description" content="記事の説明" />
<meta property="og:image"       content="https://example.com/image.jpg" />
<meta property="og:url"         content="https://example.com/article/" />
<meta property="og:type"        content="article" />

ステップ2：OGPタグを手動で追加する

Yoast SEOやRank Mathプラグインを使っていない場合は、functions.phpで出力します。

// functions.php
add_action('wp_head', function() {
    if (!is_singular()) return;

    global $post;
    $image_url = '';

    if (has_post_thumbnail($post->ID)) {
        $image = wp_get_attachment_image_src(
            get_post_thumbnail_id($post->ID),
            'large'
        );
        $image_url = $image[0] ?? '';
    }

    if (!$image_url) {
        $image_url = get_template_directory_uri() . '/images/default-ogp.jpg';
    }

    echo '<meta property="og:image" content="' . esc_url($image_url) . '" />' . "\n";
    echo '<meta property="og:image:width" content="1200" />' . "\n";
    echo '<meta property="og:image:height" content="630" />' . "\n";
}, 1);

ステップ3：Facebook Sharing Debuggerでキャッシュをクリア

Facebookのキャッシュは自動更新されないため、URLを変更するか、Sharing Debuggerで強制更新します。

1. Facebook Sharing Debugger（developers.facebook.com/tools/debug）にアクセス

2. 問題のURLを入力して「デバッグ」

3. 「再度スクレイピング」をクリックしてキャッシュを更新

ステップ4：画像のサイズと形式を確認

// アイキャッチ画像の推奨サイズを追加
add_image_size('ogp-image', 1200, 630, true);

// functions.phpのog:imageでこのサイズを使う
$image = wp_get_attachment_image_src(
    get_post_thumbnail_id(),
    'ogp-image'  // 上で登録したサイズ名
);

Facebookの要件：

最小: 200×200px
推奨: 1200×630px
最大ファイルサイズ: 8MB
形式: JPG・PNG・GIF（アニメーションGIF非対応）
URL: HTTPS必須

ステップ5：LINEやSlackのキャッシュをクリア

LINE: LINEのリンクプレビューは一定期間キャッシュされます。URLにパラメータを付けて（?v=2 など）異なるURLとして認識させます
Slack: unfurl_links=false になっていないか確認。Slackは自動でOGPを取得します

注意事項

OGPタグが重複して出力されないよう注意（プラグインとfunctions.phpで二重出力するケース）
og:image のURLは絶対URLで指定する（相対パスは無効）
Facebookデバッガーは1日あたりのリクエスト制限があります

まとめ

OGP画像が表示されない場合は、まずページのソースで og:image タグの有無を確認し、Facebook Sharing Debuggerで再スクレイピングします。画像サイズが1200×630px・HTTPSであることを確認すれば、ほぼすべてのSNSで正しく表示されます。

Post Views: 26