はじめに
naka(@naka_twilog)という名前でブログ書いてる高校生です。
Twitterカードを表示させる方法についての記事です。
・Twitterカードってそもそもなんなの？どういう効果があるの？
・ささっと設置方法が知りたい！
・他のサイトでも見たけどうまく表示されない…
という方に読んでもらえたらいいなぁと思っています。
・この記事について
実際に自分も設定に困ったのでいろいろなサイトからの情報収集をして書いています。要するに自分用の備忘録ですね。
Twitterカードとは？
↑この画像付きリンクのことです。
Twitterをスクロールしてたらよく見かけませんか？
Twitterのスクショは著作権的にアウトらしいので以降埋め込みを使用していきます
Twitterカードの設定方法
「Cocoon設定」から「OGP」を選択、「Twitterカードの有効化」にチェックを入れます。
はい、設定が終わりました！一瞬ですね…
カードタイプは「サマリー」と「大きな画像のサマリー」があります。
「大きな画像のサマリー」にチェックを入れることをおすすめします。理由は単純で、Twitterに投稿したときに画像が大きく表示されるからです。
トップページでのTwitterカードの設定方法
ついでに、ブログのトップページのTwitterカードも設定しておくといいと思います。
管理画面の「cocoon設定」→「OGP」から設定することができます。
デフォルトのcocoon画像もかわいくていいですけどね。
上の設定で表示されない場合
Twitterに読み込まれていない
Card validator→https://cards-dev.twitter.com/validator
この公式サイトから自分のTwitterにログインして、ブログのURLを入れ、「Preview card」をおすことで画像が読み込まれると思います。
そもそも画像を設定できていない
Cocoonの投稿画面で「アイキャッチ画像」もしくは「SNS画像」を設定していなかったら表示されません。
設定したつもりのパターンです。
プラグインが邪魔している
僕が2日程いろいろと試した結果、これが原因でした…
・Twitterカードを表示させるためのプラグインを入れている
「All in one SEO」や「JM Twitter Cards」などを導入している場合表示されない場合があるそうです。
Cocoonには不要のプラグインみたいなので消しておくのがいいと思います。
・画像表示を速くするプラグインを入れている
「Jetpack」などのプラグインが入っている場合にも表示されないことがあるそうです。
一度無効化して調べてみるとこれが原因かわかると思います。
画像サイズが不適
「大きな画像のサマリー」の場合ですが、
・最小サイズ 300 × 157 ピクセル
・最大サイズ 4096 × 4096 ピクセル
・最大画像サイズ 5MB
・画像フォーマット JPG、PNG、WEBP、GIF
を満たしている必要があるそうです。
OKな範囲が広いのでこれが原因の場合は少ないそうです。
まとめ
Twitterカードの表示方法、表示されない時の解決策についてまとめました。
1記事しか書いていなくてもTwitterを活用することでわずかにアクセスはされます。
センスある画像を表示させて、見た人が興味を持つような内容を書けたらいいなぁって思います。
・参考サイト
https://blog.apar.jp/web/9844/
https://forever-trip.com/twittercard