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

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なかむら

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

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

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

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

naka

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

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

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

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

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

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

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

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

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

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

・最大画像サイズ　5MB

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

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

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

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

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

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