記事内に広告が含まれる場合があります

2024年Twitterカードでタイトルが表示できない!WordPressの設定!(Xカード)

Twitter(X)予約投稿ツール(GASとスプレッドシート)

Twitterカードの設定まとめです。

現在、予約投稿ツールCraft Twixで運用しています。WordPressの過去記事も投稿できます。詳しくはこちらの記事をみてください。

もちろん、Craft TwixはTwitterカードの切り替えは効果ありますよ。ただ、設定はWordPress側で行います。

2024年Twitterカードでタイトルが表示できない!WordPressの設定!(Xカード)

Twitterカードで画像にタイトルが表示されなくなったのはなぜ!?

イーロン・マスクさんの仕業です…、またか(´・ω・`)

Twitterカードの画像サイズ大はタイトルが消されました。理由は外部に誘導を減らすためです。しかし、UI的にただの画像とリンクの区別がつきにくくなり、単にわかりにくくなった気がします。イーロンさんも一応エンジニア出身なのでUIUXぐらい意識してほしい気がしますね…。

外部リンクが表示されるところがTwitterのよい点なんですけどね。簡単にいうと改悪となりました。

ただ、ちょっと抜けている話なのですが、Twitterカード小はそのままタイトルが表示されるのです。X社のエンジニアはそのことをイーロンさんに報告しなかったのでしょうか。もしかしたらこっそりと抜け道を残してくれたかもしれませんね…。

個人的にその抜け道はつぶされるんじゃないかと思って、しばらく放置していました(2023年10月頃の話です)。しかし、いまだ問題なくTwitterカード小にすればタイトルが表示できます。

そのため数多くのWebサイトはTwitterカード小に切り替えています。

リンクとわかりにくいものより、画像が小さくてもクリック率が高いものを選ぼうということですね。

Twitterカード(OGP)のWordPress設定をsummary_large_imageからsummaryに切り替え

Twitterカード大から小に切り替えます。

summary_large_imageからsummaryに切り替えとなります。

有名なテーマならWordPressのテーマにその機能が内包されているため誰でもすぐできます。キャッシュなどが関係しているため、反映するまで時間がかかります。

Cocoon(コクーン)のTwitterカードの設定

このサイトはCocoonを使っています。

Cocoon 設定 > Cocoon 設定> OGP > Twitterカードタイプ

simplicityのTwitterカードの設定

Revive Old Posts proでしか画像を添付することはできません、しかし、自分でTwitterカードを指定するコードを書くと画像を添付することができます。それほど難しくありません。しかも、Wordpressのテーマがsimplicityの方はもともとそのコードが組み込まれています。

当サイトは現在、Wordpressのテーマがsimplicityだったため、楽をさせてもらいました。毎回、ほしい機能がもともと入っているためsimplicityは本当にすごいですね。管理画面から簡単に指定できます。

外観 > カスタマイズ > SNS > 「Twitterカードタグを挿入」をチェック(デフォルトでチェックが入っています)。

simplicityのTwitterカードは小さいものと大きなものが選べます。画像は大きなイメージがよかったため、変更します。

外観 > カスタマイズ > SNS > Twitterカードタイプ > summary_large_image

Twitterカードのサイズ変更の反映には時間がかかるかも。

これだけでコードを書く必要はありません。今回はsimplicityのおかげでプログラムのコードを書きませんでしたね。
他のテーマをお使いの方でコードを書いていない場合は、コードを書いてください。Twitterカードでぐぐればすぐわかります。コピペでも一応いけるレベルです。

完成した投稿はこちらです。

Twitterカードをプラグインで設定

twitterカードに対応していないテーマは自分でプログラミングのコードを書くか、プラグインを使うかする必要があります。

GoogleスプレットシートやWPのプラグインから過去ツイートをしようとしたとき、この設定が必要になります。

Revive Old Postsの場合、pro版にしないと画像添付できませんからTwitterカードの設定が必要です。Twitterカードを導入すると無料でも画像添付できます。

Twitterカード非対応のテーマはWordPressのプラグインで対応

「不動産 Toot Old Post」を利用する場合、この設定はいりません。

ただし、Twitterのシェアボタンで画像つきでシェアしたい場合はこの設定がいります(Cocoonはこの設定がテーマに組み込まれています)。

Cocoonを利用していないサイトも運営しているため、今回、その対応方法を追記しています。

twitterカードをコードで実装する方法はいろいろと紹介されています。

しかし、twitterなどのsns系は仕様変更があると嫌だな。と思って今回はプラグインに丸投げすることにしました。

「Twitter Cards Meta」と「JM Twitter Cards」の比較

有名なプラグインに「Twitter Cards Meta」と「JM Twitter Cards」があります。他にも「all in seo pack」などには設定があるようです(個人的には利用していませんのでわかりません)

Twitter Cards Meta – Best Twitter Card Plugin for WordPress
The Best Twitter Card Plugin in WordPress. Supports Summary Card with Large Image. Easy & Automated Solution with Previe...
JM Twitter Cards
WordPress を Twitter cardsと簡単に連携。すべてのカードタイプを提供。

「Twitter Cards Meta」の方が昔からあるプラグインです。しかし、ダウンロード数は「JM Twitter Cards」の方が多い。

実際に両方ともインストールしてみてその理由がわかりました。似たプラグインですが、決定的な違いがありました。「Twitter Cards Meta」はプレミアムオプションに入らないと大きな画像を指定できません。「JM Twitter Cards」は無料でできます。

そのため「JM Twitter Cards」の方がおすすめかも。このプラグインを使うとシェアボタンをツイートしたとき、画像つきになります。

「JM Twitter Cards」の使い方

プラグインを有効化して設定画面に移動するとチュートリアルの動画があります。

大変わかりやすい動画なので、その動画を見るのが手っ取り早いです。個人的にはOpenGraphをyesにして対応しました。

yesにすればうまくいく人が多いかも。技術的に詳しく知りたい人は調べてみるといいかも。

twitterカードの確認/表示されないなど

公式サイトがテストツールを提供しています。

Card Validator | Twitter Developers

twitterカードの失敗ログ(ERROR: No card found (Card error))

失敗すると以下のログがでます。

INFO: Page fetched successfully
INFO: 6 metatags were found
ERROR: No card found (Card error)

ちょっとおかしくなっていたとき、wordpressのアップデートで改善したこともありました。が、基本はOGPの設定がおかしいと考えるべきでしょう。

twitterカードの成功ログ

成功すると以下のログがでます。

INFO: Page fetched successfully
INFO: 14 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully

参考になりましたらシェアしてくれると嬉しいです。

コメント

タイトルとURLをコピーしました