twitterカードの設定まとめです。
GoogleスプレットシートやWPのプラグインから過去ツイートをしようとしたとき、この設定が必要になりました。
現在は主にGoogleスプレットシートメインで運用しています。
ワードプレスのテーマによる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カードでぐぐればすぐわかります。コピペでも一応いけるレベルです。
完成した投稿はこちらです。
電子書籍のおすすめサイト徹底比較(2018) 漫画や小説で安いのはどこ!? https://t.co/3lyUpUIOYO
— neru (@e_itbrain) 2018年11月26日
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」の方が昔からあるプラグインです。しかし、ダウンロード数は「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
参考になりましたらシェアしてくれると嬉しいです。
ポケットwifiレンタルwifiおすすめ!国内wimax期間別(短期長期)比較、無制限で安いのは!? https://t.co/AJQPpSbveB
— neru (@e_itbrain) 2018年11月29日
2018年revive old postsと不動産 Tweet Old Postの使い方(過去記事を画像付きtwitterに投稿する) https://t.co/EhKU9aV5Cz
— neru (@e_itbrain) 2018年11月29日
コメント