Twitterカードの設定(ワードプレス/確認/表示されないなど)

WordPress

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

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

【Twitter bot】予約投稿ツールの作り方!無料でGoogleスプレッドシート(Excel)からツイートする方法!｜neru
【重要】ロングセラーとなった当noteですが、Twitterを買収し、テスラ のCEOでも有名なイーロン・マスクさんがTwitterのAPIを有料化すると発表しました。 影響は地震速報、診断アプリ、質問箱、ゲーム、WordPressのプラグインそして、予約投稿アプリなどのAPIを使っているすべてのアプリに及びます。こ...
note.com
【使い方/設定】revive old postsと不動産 tweet old post【twitterの画像複数枚ツール】
画像つきでwordpressのプラグインで過去ツイートする方法をまとめます。twitter apiの申請、取得、審査などの詳細も網羅しました。(追記)現在は反応率が悪いrevive old postsではなく。反応率がよいGoogleスプレ...
ebookbrain.net

現在は主にGoogleスプレットシートメインで運用しています。

PR記事:新TwitterAPI v2に対応!?Twitter予約投稿ツール比較

ワードプレスのテーマによるTwitterカードの対応の有無(画像つきでシェアしたい)

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

simplicityとCocoon(コクーン)はtwittterカードに対応しています。

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カードでぐぐればすぐわかります。コピペでも一応いけるレベルです。

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

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

(追記)wordpressのテーマをCocoonに乗り換えました。

大きな画像に変える場合は下記の通りです。

Cocoon 設定 > Cocoon 設定> OGP > Twitterカードタイプ > 大きな画像のサマリー（summary_large_image）

スポンサーリンク

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 Preview!
ja.wordpress.org
JM Twitter Cards
WordPress を Twitter cardsと簡単に連携。すべてのカードタイプを提供。
ja.wordpress.org

「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

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

コメント