Twitterカードの設定まとめです。
現在、予約投稿ツールCraft Twixで運用しています。WordPressの過去記事も投稿できます。詳しくはこちらの記事をみてください。
もちろん、Craft TwixはTwitterカードの切り替えは効果ありますよ。ただ、設定はWordPress側で行います。
2024年Twitterカードでタイトルが表示できない!WordPressの設定!(Xカード)
Twitterカードで画像にタイトルが表示されなくなったのはなぜ!？
イーロン・マスクさんの仕業です…、またか(´・ω・｀)
Twitterカードの画像サイズ大はタイトルが消されました。理由は外部に誘導を減らすためです。しかし、UI的にただの画像とリンクの区別がつきにくくなり、単にわかりにくくなった気がします。イーロンさんも一応エンジニア出身なのでUIUXぐらい意識してほしい気がしますね…。
外部リンクが表示されるところがTwitterのよい点なんですけどね。簡単にいうと改悪となりました。
ただ、ちょっと抜けている話なのですが、Twitterカード小はそのままタイトルが表示されるのです。X社のエンジニアはそのことをイーロンさんに報告しなかったのでしょうか。もしかしたらこっそりと抜け道を残してくれたかもしれませんね…。
個人的にその抜け道はつぶされるんじゃないかと思って、しばらく放置していました(2023年10月頃の話です)。しかし、いまだ問題なくTwitterカード小にすればタイトルが表示できます。
そのため数多くのWebサイトはTwitterカード小に切り替えています。
リンクとわかりにくいものより、画像が小さくてもクリック率が高いものを選ぼうということですね。
私自身もリンクじゃなくて画像だと認識してスルーすることが増えたように、Xが外部リンク付き投稿の表示を変えてから（タイトルとdescription（概要）を表示しなくなってから）、明らかにリンククリック数が減ってますね…
— 敷田憲司｜Kenji Shikida (@kshikida) October 24, 2023
OGP設定をsummary_large_imageからsummaryに変えておいたほうが良いかもね。
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カードでぐぐればすぐわかります。コピペでも一応いけるレベルです。
完成した投稿はこちらです。
電子書籍のおすすめサイト徹底比較(2018) 漫画や小説で安いのはどこ!? https://t.co/3lyUpUIOYO
— neru (@e_itbrain) 2018年11月26日
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」の方が昔からあるプラグインです。しかし、ダウンロード数は「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
参考になりましたらシェアしてくれると嬉しいです。
コメント