Cocoonで簡単にTwitterカードを設定する方法!!【SNSからのアクセスを増やす】

Cocoon

はじめに


naka(@naka_twilog)という名前でブログ書いてる高校生です。



Twitterカードを表示させる方法についての記事です。




・Twitterカードってそもそもなんなの?どういう効果があるの?

・ささっと設置方法が知りたい!

・他のサイトでも見たけどうまく表示されない…

という方に読んでもらえたらいいなぁと思っています。

・この記事について
実際に自分も設定に困ったのでいろいろなサイトからの情報収集をして書いています。要するに自分用の備忘録ですね。

Twitterカードとは?

↑この画像付きリンクのことです。

Twitterをスクロールしてたらよく見かけませんか?

Twitterのスクショは著作権的にアウトらしいので以降埋め込みを使用していきます

Twitterカードの設定方法

「Cocoon設定」から「OGP」を選択、「Twitterカードの有効化」にチェックを入れます。


はい、設定が終わりました!一瞬ですね…




カードタイプは「サマリー」と「大きな画像のサマリー」があります。


「大きな画像のサマリー」にチェックを入れることをおすすめします。理由は単純で、Twitterに投稿したときに画像が大きく表示されるからです。

トップページでのTwitterカードの設定方法

ついでに、ブログのトップページのTwitterカードも設定しておくといいと思います。


WordPress

管理画面の「cocoon設定」→「OGP」から設定することができます。


なかむら
なかむら

デフォルトのcocoon画像もかわいくていいですけどね。

上の設定で表示されない場合

Twitterに読み込まれていない

Card validator→https://cards-dev.twitter.com/validator



この公式サイトから自分のTwitterにログインして、ブログのURLを入れ、「Preview  card」をおすことで画像が読み込まれると思います。

Card validator

そもそも画像を設定できていない

Cocoonの投稿画面で「アイキャッチ画像」もしくは「SNS画像」を設定していなかったら表示されません。

設定したつもりのパターンです。

プラグインが邪魔している

naka
naka

僕が2日程いろいろと試した結果、これが原因でした…




・Twitterカードを表示させるためのプラグインを入れている

「All in one SEO」や「JM Twitter Cards」などを導入している場合表示されない場合があるそうです。

Cocoonには不要のプラグインみたいなので消しておくのがいいと思います。




・画像表示を速くするプラグインを入れている

「Jetpack」などのプラグインが入っている場合にも表示されないことがあるそうです。

一度無効化して調べてみるとこれが原因かわかると思います。

画像サイズが不適


「大きな画像のサマリー」の場合ですが、

・最小サイズ 300 × 157 ピクセル

・最大サイズ 4096 × 4096 ピクセル

・最大画像サイズ 5MB

・画像フォーマット JPG、PNG、WEBP、GIF


を満たしている必要があるそうです。

Twitterの規約
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image



OKな範囲が広いのでこれが原因の場合は少ないそうです。

まとめ

Twitterカードの表示方法、表示されない時の解決策についてまとめました。


1記事しか書いていなくてもTwitterを活用することでわずかにアクセスはされます。

センスある画像を表示させて、見た人が興味を持つような内容を書けたらいいなぁって思います。


・参考サイト
https://blog.apar.jp/web/9844/
https://forever-trip.com/twittercard

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