Twitterのツイートにアイキャッチ画像を表示させる

Twitterのツイートを見たら、いつの間にかアイキャッチ画像が表示されなくなっていました。どうやらWordPressのテーマをStinger 5からTwenty Seventeenに変えたのが原因のようです。ソースコードを見たら、Twitter Card関連のコードが見あたらなかったので、Twenty Seventeenにはそういうコードは最初から入っていないようです。

そういうわけでTwitterのツイートにアイキャッチ画像を表示させる方法です。

プラグインで対応する方法

テーマを直接編集できるのはわかっていますが、面倒なので、この際、プラグインで対応してみました。

利用したプラグインは、「Open Graph and Twitter Card Tags」と言うものです。インストールして有効化するだけでいいです。

デフォルトでは、大きな画像が表示されるようになっているので、小さな画像にしたい場合は、設定で、「Cards」のタブを選び、一番下のCard Typeで「Summary Card」を選択すればいいです。

やってみたところ、新しく記事を投稿すると、こういうエラーが出ました。

Error: Facebook Open Graph Tags cache NOT updated/purged.
Facebook returned: (#100) Must have a valid access token or a valid url_hmac

This is NOT a plugin error.
– Do not open support tickets about this issue. – Lately and unfortunately, Facebook is not allowing to update the cache programmatically.
– Have you already configured the App ID and App Secret, needed for flushing the cache on Facebook? If you haven’t, go to the settings page (Open Graph tab), and do it now.
or
– Click here to try to clear the cache manually and then click “Scrape Again”

なんか、よけい面倒なことになってしまいました。そこで自分が管理している他のサイトをチェックしたところ、テンプレートが編集されていました。どうやら、テンプレートを編集した方がはるかに簡単なようです。

テーマを編集する方法

先ほどのプラグインは停止、削除して、functions.phpの末尾に以下のコードを書き込んで、「ファイルを更新する」をクリックして、保存すればいいです。

//START my_meta_ogp

function my_meta_ogp() {
  if( is_front_page() || is_home() || is_singular() ){
    global $post;
    $ogp_title = '';
    $ogp_descr = '';
    $ogp_url = '';
    $ogp_img = '';
    $insert = '';

    if( is_singular() ) { //記事&固定ページ
       setup_postdata($post);
       $ogp_title = $post->post_title;
       $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
       $ogp_url = get_permalink();
       wp_reset_postdata();
    } elseif ( is_front_page() || is_home() ) { //トップページ
       $ogp_title = get_bloginfo('name');
       $ogp_descr = get_bloginfo('description');
       $ogp_url = home_url();
    }

    //og:type
    $ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

    //og:image
    if ( is_singular() && has_post_thumbnail() ) {
       $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       $ogp_img = $ps_thumb[0];
    } else {
     $ogp_img = 'https://www.example.com/wp-content/uploads/2020/03/example.png';
    }

    //出力するOGPタグをまとめる
    $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
    $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
    $insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
    $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
    $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
    $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
    $insert .= '<meta name="twitter:card" content="summary" />' . "\n";
    $insert .= '<meta name="twitter:creator" content="@example" />' . "\n";
    $insert .= '<meta name="twitter:site" content="@example" />' . "\n";
    $insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";

    echo $insert;
  }
}

//END my_meta_ogp

add_action('wp_head','my_meta_ogp');//headにOGPを出力

やはり、こちらの方が簡単ですね。

私が書いたコードではありません。ソースがどこだったのか忘れましたので、検索して調べたところ、ほたるさんのところでした。ほたるさんは別のコードを元に書き直したらしいです。

さて書き直すところは、赤で示したところです。

表示形式は、summaryにするかsummary_large_imageにするか、どちらかです。

いろいろ試して見たところ、アイキャッチ画像のアスペクト比で選べばいいのではないかと思います。正方形のアイキャッチ画像を使っている場合は、summaryで、横長のアイキャッチ画像を使っている場合は、summary_large_imageがよいと思います。正方形のアイキャッチ画像でsummary_large_imageを使うと、上下がカットされて、変な画像になることがあります。

まあ、元の画像を見たい場合は、ブログにアクセスしてもらえばいいので、Twitterに大きな画像を表示する必要はありませんね。

他の設定については、考えればわかるでしょう。万一、わからないときは、下のサイトに行って調べて下さい。

どうしてもプラグインでやるなら

もしどうしてもプラグインでやりたい場合は、「JM Twitter Cards」の方が簡単にできそうです。試して見て下さい。

関連ページ:
Twitterカードなどを表示する方法/WordPress(ほたるのブログ)