2026年5月20日

WordPressのOGP（Open Graph Protocol）が正しく設定されない場合の解決方法

エラー・白い画面

はじめに

FacebookやLINEでWordPressの記事をシェアしても画像が表示されない、タイトルが「WordPress」のままになる、サムネイルが別の記事の画像になってしまう。OGPの設定ミスはSNSでのクリック率に直結する重要な問題です。

症状・原因

OGPが正しく動作しない主な原因：

OGPプラグイン未導入：WordPressデフォルトではOGPタグが出力されない
og:imageが空：アイキャッチ画像が設定されていない
複数プラグインの競合：Yoast SEOとAll in One SEOが両方有効になっている
キャッシュが古い：Facebookのキャッシュが残っていて新しいOGP情報が反映されない
httpsとhttpの混在：og:imageがhttpのURLになっている

解決手順

ステップ1：OGPタグが出力されているか確認する

ページのソースを確認します。Ctrl+Uでソース表示し、og:を検索します。

<!-- 正しく出力されている場合の例 -->
<meta property="og:title" content="記事タイトル" />
<meta property="og:description" content="記事の説明文" />
<meta property="og:image" content="https://yoursite.com/wp-content/uploads/ogp.jpg" />
<meta property="og:url" content="https://yoursite.com/article-slug/" />
<meta property="og:type" content="article" />

ステップ2：Yoast SEOでOGP設定を確認する

1. Yoast SEO → 設定 → ソーシャル

2. Facebook/X(Twitter) タブ → 「OGメタデータを追加する」をオン

3. 各記事の編集画面 → Yoast SEOパネル → ソーシャル → og:imageを設定

ステップ3：プラグインなしでOGPを実装する

// functions.php — 手動でOGPタグを出力
add_action('wp_head', function() {
    if (!is_singular()) return;
    
    global $post;
    
    $title       = get_the_title($post);
    $description = has_excerpt($post)
        ? get_the_excerpt($post)
        : mb_substr(strip_tags($post->post_content), 0, 120);
    $url         = get_permalink($post);
    $type        = 'article';
    
    // og:imageの取得（アイキャッチ → デフォルト画像）
    if (has_post_thumbnail($post)) {
        $image = get_the_post_thumbnail_url($post, 'large');
    } else {
        $image = get_site_icon_url(512) ?: get_template_directory_uri() . '/images/ogp-default.jpg';
    }
    
    echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
    echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
    echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
    echo '<meta property="og:type" content="' . esc_attr($type) . '" />' . "\n";
    echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
    echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
}, 5);

ステップ4：og:imageの推奨サイズに合わせる

// functions.php — OGP用の画像サイズを登録
add_action('after_setup_theme', function() {
    // Facebook推奨：1200×630px
    add_image_size('ogp', 1200, 630, true);
});

// og:imageに専用サイズを使う
$image = get_the_post_thumbnail_url($post, 'ogp');

ステップ5：Facebookのキャッシュをクリアする

Facebookはリンクのプレビューをキャッシュします。設定変更後は下記で更新できます。

Facebook for Developers の Sharing Debugger ツールを使う
URLを入力して「デバッグ」→「再度スクレイピングする」をクリック

ステップ6：og:imageをHTTPSに統一する

// functions.php — og:imageのhttp→httpsを強制
add_filter('wp_get_attachment_url', function($url) {
    if (is_ssl()) {
        $url = str_replace('http://', 'https://', $url);
    }
    return $url;
});

注意事項

og:imageは最低600×315px（推奨1200×630px）以上が必要です。小さすぎると表示されません。
複数のSEOプラグインを同時に有効化するとOGPタグが重複します。一つに絞りましょう。
LINEやSlackなど各SNSで独自のキャッシュ期限があります。すぐには反映されない場合があります。

まとめ

OGPはYoast SEOの設定確認とアイキャッチ画像の設定で解決するケースがほとんどです。プラグインなしで実装する場合はwp_headフックでog:タグを出力します。Facebookのキャッシュクリアも忘れずに行いましょう。関連記事：Twitterカードが表示されない場合、SNSシェアボタンの設置

Post Views: 17