2026年5月20日

WordPressのTwitterカードが表示されない場合の解決方法

エラー・白い画面

はじめに

X（旧Twitter）でWordPressの記事URLをツイートしても、リンクカードが表示されずURLだけが貼られる、画像のサムネイルが出ない、タイトルと説明文が表示されない。Twitterカードはメタタグの設定が必要で、OGPとは別途対応が必要なケースがあります。

症状・原因

Twitterカードが表示されない原因：

twitter:cardタグが未設定：がHTML内にない
Twitterのキャッシュが古い：Card Validatorで更新が必要
noindexページ：Twitterはnoindexページのカードを表示しないケースがある
og:imageがhttps未対応：httpのURLでは画像が読み込まれない
画像サイズが小さい：summary_large_imageには最低300×157px以上が必要

解決手順

ステップ1：Twitterカードのタグを確認する

ページのソースでtwitter:を検索します。

<!-- summary_large_image（大きい画像カード）の場合 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="記事タイトル" />
<meta name="twitter:description" content="記事の説明文（最大200文字）" />
<meta name="twitter:image" content="https://yoursite.com/ogp.jpg" />

<!-- summary（小さいサムネイル）の場合 -->
<meta name="twitter:card" content="summary" />

ステップ2：Yoast SEOでTwitterカードを有効化する

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

2. X（Twitter） タブを開く

3. 「Twitterのカードメタデータを追加する」をオンにする

4. 各記事の Yoast SEOパネル → ソーシャル → Xイメージ を設定

ステップ3：functions.phpで手動実装する

// functions.php — Twitterカードを手動で出力
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, 200);
    
    // アイキャッチ画像があればlarge_image、なければsummary
    if (has_post_thumbnail($post)) {
        $card  = 'summary_large_image';
        $image = get_the_post_thumbnail_url($post, 'large');
    } else {
        $card  = 'summary';
        $image = get_site_icon_url(512);
    }
    
    echo '<meta name="twitter:card" content="' . esc_attr($card) . '" />' . "\n";
    echo '<meta name="twitter:site" content="@yourhandle" />' . "\n";
    echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "\n";
    echo '<meta name="twitter:description" content="' . esc_attr($description) . '" />' . "\n";
    
    if ($image) {
        echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "\n";
    }
}, 5);

ステップ4：Card Validatorでキャッシュをクリアする

TwitterのCard Validatorでカードが正しく表示されるか確認・キャッシュをクリアできます。

1. Twitter Card Validator（cards-dev.twitter.com/validator）にアクセス

2. 記事URLを入力して「Preview card」をクリック

3. エラーが出る場合はエラーメッセージを確認して修正

ステップ5：画像サイズと比率を確認する

|------------|----------|----------|------|

| summary_large_image | 1200×628px | 300×157px | 2:1 |

| summary | 512×512px | 144×144px | 1:1 |

// functions.php — Twitter用画像サイズを登録
add_action('after_setup_theme', function() {
    add_image_size('twitter-card', 1200, 628, true);
});

ステップ6：og:タグをTwitterカードのフォールバックとして使う

TwitterはOGPタグも読み取ります。twitter:タグがない場合はog:タグを使用します。

<!-- og:タグがあればtwitter:imageは省略可能 -->
<meta property="og:image" content="https://yoursite.com/ogp.jpg" />
<!-- Twitterはこれをフォールバックとして使用する -->

注意事項

summary_large_imageは画像の比率が2:1でないと正しく表示されません。
同一URLで頻繁にOGP情報を変更するとTwitterのキャッシュが長く残ることがあります。
個人アカウントはCard Validatorにサインインが必要です。

まとめ

TwitterカードはYoast SEOのX設定を有効化するか、twitter:cardメタタグを手動で追加することで解決します。Card Validatorでキャッシュをクリアし、画像サイズが推奨サイズ（1200×628px）になっているか確認しましょう。関連記事：OGPが正しく設定されない場合、SNSシェアボタンの設置

Post Views: 17