【ワードプレス】ツイッターカードにならずに画像投稿になる問題

山林生活
ウェブ関連
【ワードプレス】ツイッターカードにならずに画像投稿になる問題

【ワードプレス】ツイッターカードにならずに画像投稿になる問題

［更新日］2023/04/15

先日サーバーを引っ越してサイトをリニューアルしました。現在もまだ改善すべきところがあり少しずつ修復中です。テーマを自作したため結構不具合っていうのがあるんです。またサーバーが変わると仕様もかわるのでそれへの対処が必要となります。まだまだなおすところが一杯です。

そんな中気になるところがあり、色々試行錯誤しているのですがなおらないんです。それはツイッターカードに関してです。

私はブログ記事を投稿すると自動的に更新するシステムを採用しています。この機能はワードプレスのプラグインJetpackの機能の一部を使っています。単純に投稿したらツイッターに共有するというやつです。このような機能は別のプラグインでもあります。連携すれば勝手にツイートしてくれるわけです。こんな楽な機能はありません。

これまでFacebookが重要だとか、これからはInstagramだとか、そんな感じで色々なアカウントは取得してきました。しかし管理ができない。管理ができれば良いツールなのでしょうがそれがめんどくさい。その結果Facebookに関しては何もせず、Instagramに関してはラーメンの画像をアップしているだけです。たまに見ず知らずの外国人がいいねしてくれるだけのものとなってしまいました。当然そこからサイトにアクセスしてくれる気宇な人はいないようです。

そんなわけで現状はツイッター一本で絞っています。

ツイッターだと色々見れますからね。普通に使い勝手もいい感じです。それで投稿したら宣伝してくれるから楽です。

とはいってもツイッターからのアクセス数は一日5件程度。かなり少ないんです。そもそも自動投稿しているだけですからね。そこまで増えないのもわかります。ただ少ないのには理由があったのです。

以前までは投稿をするとタイトルとリンク、そしてその記事に附帯する画像が投稿されていました。画像をクリックするとその画像を大きく見ることができます。大きく見るといっても元々投稿している画像は614px×345pxサイズなのでそこまで大きくなりません。そのため大きく見る必要も無いわけです。重要なのは画像ではなくリンクをクリックしてくれるかどうかです。でもただのテキストリンクです。そしてそのリンクを説明するのはタイトルだけ。

これだとなかなかクリックしてくれないわけです。

でも、ほかの人のツイートを見ているとそうではない形で表示されているのです。

画像をクリックするとサイトに飛ぶ形になっているのです。これがツイッターカードというものです。
まぁ知ってはいたのですが別にどっちでもいいかなーと思っていました。でもせっかくそれができるのであればそれを目指そうかと。

ツイッターカードを表示させるためにはサイト側に情報提供欄を作らなければなりません。
ツイッターがそれを読み込み、ツイートとして表示するみたいです。

情報提供欄はヘッダーの中に

<meta property="og:title" content="【福岡】塩辛が美味い！天麩羅処ひらおで酒盛り" />
<meta property="og:description" content="毎年この時期になると博多にいます。生憎の雨ですがこの時期は仕方がありません。そしてちょうど山笠祭りの時期だっ..." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://real-hunter.com/machi/20190717.html" />
<meta property="og:image" content="https://real-hunter.com/wp-content/uploads/2019/07/807.jpg" />
<meta property="og:site_name" content="山林生活" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@noma_takanashi" />
<meta property="og:locale" content="ja_JP" />

こんな感じのヤツをいれていきます。
恐らくAll In One SEO PackやJetpackなどSEOに関するプラグインを入れている人であれば、これは自然と記述されるはずです。しかし私はAll In One SEO Packを使用しないこととしました。そしてJetpackからもOGPタグが書かれないように設定していました。なぜこのような設定にしていたかというと、

ヘッダーが汚くなるから。

それだけの理由です。
出来ればヘッダーはタイトルと説明文、そしてJavascriptとCSSへのリンク。これくらいに留めておきたいんです。他のを書きだすとすごく長い文字となり汚らしいんです。とくにヘッダーは人に見られない場所です。人に見られないからこそ綺麗にしておきたいわけです。そんなわけで削除していたのですが、ツイッターカードにはこのOGPタグが必要なので再設定することとしました。

私のような考えの方でも有効ですが、ほかのプラグインを利用してツイッターカードが表示されないという方でも使えると思います。

functions.phpで以下のような形で設定します。

//OGPタグ/Twitterカード設定を出力
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://hogehohe.com/image/hogehoge.jpg';
}

//出力する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_large_image" />' . "\n";
$insert .= '<meta name="twitter:site" content="@noma_takanashi" />' . "\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を出力

これだけです。ネットで色々探して一番合いそうなやつを見つけてきました。

なぜわざわざ自作でOGPタグを書くことになったのかというと、更新日付と投稿日付の部分があったからです。プラグインのOGPタグを使うと日付情報が含まれることがあります。私はこの日付情報を入れたくなかったのです。Google先生が私の思惑通りに読み込んでくれるわけではありません。時には更新したのにも関わらずずっと投稿日付のままになってしまうことだってあるのです。そうなると最新記事なのにも関わらず傍から見れば古い記事に思われてしまいます。

ちゃんと読み込まないことがあるならば、そもそも読ませない選択をした。

OGPタグから投稿日付情報を削除。そして更新日付だけ表示させておく。こうすることで先生が読み間違えることなく、更新されればその日付を返してくれるわけです。こんな些細な理由からプラグインを使わずに自作でOGPタグを表示できる形を取りました。

実際にツイッターカードで投稿したところアクセス数は少しだけ上がりました。
ほんのちょっとですがこういうことを積み重ねてサイトは作っていくもんです。千里の道も一歩からです。

しかし少々問題が出ているのです。

ツイッターカードとして表示されることもあるのですが、表示されないこともあるのです。

これの原因が不明です。何らかの仕様変更で表示されなくなったのであれば対処できるのですが、表示される時もあればされないときもある。とくに法則性もないのです。それだから少々困っているんです。

ツイッターカードとしてちゃんと表示されるかどうかを確かめるサイトで確認しても問題なく表示されるのですが、実際の投稿は以前のような画像添付という形になってしまうことがあります。私の見立てでは画像のキャッシュの可能性があります。あとは読み込みの順序という感じでしょうか。

記事を投稿するとツイッターに投稿した旨を連絡。
ツイッターは情報を取得していきます。その取得する際にツイッターカードの情報を先に読むか、それとも画像情報を読むかで返ってくる値がかわるのかもしれません。画像の位置によって先に画像を読み込んでしまうと画像投稿となりますが、OGPの情報を先に取得していればツイッターカードとして表示されるようです。
でもこれに関しても実際のところ正解なのかはわかりません。テストで不具合がないため別に何か問題があるのでしょう。
Facebookを介して投稿をする方法、IFTTTという外部サイトを介して投稿する方法などもありましたが、とりあえず投稿できているのでもう少し様子を見てみます。

この二日間ほどツイッターカードとして表示してくれています。果たしてこの記事はどのように表示されるのでしょうかね。