Cocoon(コクーン)でTwitterカードの作り方@設定とポイントを図解

Cocoon(コクーン)でTwitterカードの作り方@設定とポイントを図解
スポンサーリンク

Cocoon(コクーン)ユーザーはTwitterカードが超簡単に作れる!!

せっかく良記事を公開したのに、上位表示されないから読んでもらえない・・・

ag
ag

Twitterで公開するという手があるよ!

そっか!Twitterならフォロワーさんに見てもらえるかも!?

ag
ag

今回は、Twitterで記事をオススメするときに、少しでも目に留まりやすく、クリックしてもらいやすくなるように、Twitterカードの作り方を紹介します!

Cocoon(コクーン)ユーザーから見るTwitterカードとは

Cocoon(コクーン)ユーザーから見るTwitterカードとは

Twitterカードとは、画像付きの記事へのリンクのことです。

Twitterカードは、メディアへのアクセス数を伸ばし、認知度を高める効果が期待できます。

ag
ag

・ただリンクテキストが張ってあるツイート

よりも、

・目を引く画像付きのツイート

のほうがイイ!!

CocoonユーザーにとってのTwitterカードは2種類

CocoonユーザーにとってのTwitterカードは2種類
サマリーカード

サマリーカード(summary)は、小型のアイキャッチ画像+記事のタイトルと説明文を表示できるカードです。

[サマリーカードで設定できる画像の規定]

最小サイズ最大サイズ容量上限
幅144×高さ144幅4096×高さ40965MB
大きな画像のサマリー

大きな画像のサマリーカード(summary_large_image)は、大型のアイキャッチ画像+記事のタイトルと説明文を表示できるカードです。

[大きな画像のサマリーカードで設定できる画像の規定]

最小サイズ最大サイズ容量上限
幅300×高さ157幅4096×高さ40965MB

設定した画像サイズが規定のサイズを超えている場合、自動でセンターからトリミングされます。

ag
ag

トリミングについては下でポイントや対策を書きます!

Cocoon(コクーン)でTwitterカードの設定をしよう

Cocoon(コクーン)でTwitterカードの設定をしよう
ag
ag

Cocoonの設定はとても簡単です!

Cocoonユーザーでよかった!

コクーン設定/OGPタブの設定

Cocoon(コクーン)でTwitterカードの設定をしよう

ワードプレス画面左側メニューから、Cocoon設定をクリックします。

Cocoon(コクーン)でTwitterカードの設定をしよう

Cocoon設定画面上部メニューから、OGPタブをクリックします。

Cocoon(コクーン)でTwitterカードの設定をしよう

OGP設定画面「OGPタグの挿入」にチェックが入っていることを確認します。

ag
ag

チェックが外れている場合はチェックしましょう!

Cocoon(コクーン)でTwitterカードの設定をしよう

OGP設定画面「Twitterカードタグの挿入」にチェックが入っていることを確認します。

Twitterカードタイプを「サマリー」/「大きな画像のサマリー」のどちらかを選択します。

ag
ag

筆者は「大きな画像のサマリー」を選択しました!

Cocoon(コクーン)でTwitterカードの設定をしよう

最後に変更をまとめて保存ボタンを押します。

ag
ag

変更をまとめて保存ボタンはページ最下部にもあります!

以上で設定は完了です。

OGPとはなにかを勉強したい方がいると思いますので、リンク張っておきます。

Twitterカードのツイートの準備をしよう

Twitterカードのツイートの準備をしよう

アイキャッチ画像をTwitterカードにするときは

Cocoonでは、記事をTwitterカードでアップする場合、デフォルトでアイキャッチ画像が選択される仕様になっています。

ag
ag

なにも設定しなくてもアイキャッチ画像が選択されます!

アイキャッチ画像以外をTwitterカードにするときは

記事作成画面の右側メニューで、文書タブを選択します。

Twitterカードのツイートの準備をしよう

下にスクロールしていくとSNS画像の欄があるので、選択ボタンから、画像を選択します。

Twitterカードのツイートの準備をしよう
ag
ag

以上!

ブログのホームをTwitterカードにするときは

Cocoon設定から、

Twitterカードのツイートの準備をしよう

OGPタブを選択します。」

Twitterカードのツイートの準備をしよう

下の方に、ホームイメージ欄があるので、ここで画像を選択します。

Twitterカードのツイートの準備をしよう

最後に変更をまとめて保存すれば完了です。

これもカンタン♪

Cocoon公式サイトにもホームイメージを変更する方法が掲載されています。

Twitterカードをテストしよう

Twitterカードのツイートをテストしよう

Card validatorでテスト

Card validatorというテストサイトにアクセスします。

Twitterカードのツイートをテストしよう

Card URLの入力欄に、記事のURLをコピペし、「Preview card」ボタンをクリックします。

Twitterカードのツイートをテストしよう

Card Previewにプレビューが表示されれば正常です。

画像がプレビュー表示されない時はキャッシュクリア

うまく画像がプレビューされない場合は、キャッシュクリアをすることで解決するかもしれません。

Twitterカードのツイートをテストしよう

Cocoon設定のキャッシュ削除をクリックします。

Twitterカードのツイートをテストしよう

キャッシュ削除画面で、ブログカードキャッシュの削除ボタンをクリックし、キャッシュクリアします。

自動トリミングが許容範囲内かチェックする

画像サイズが規定より大きい場合、自動で画像がセンターからトリミングされます。

Twitterカードのツイートをテストしよう

テストした結果見栄えが悪いときは、トリミングされることを前提とした画像を作成すると良いです。

ag
ag

トリミングの仕様は以下の表の通りです!

【カードの種類】【自動トリミングの比率】
サマリーカードの画像幅1 : 高さ1
大型サマリーカードの画像幅2 : 高さ1
カード種別のトリミング比率

Twitterカード用の画像を新たに作成した場合も、念のため再テストしましょう。

Cocoon(コクーン)でTwitterカードをツイートしよう

Cocoon(コクーン)でTwitterカードをツイートしよう

ツイートの手順

Cocoon(コクーン)でTwitterカードをツイートしよう

Cocoon設定でTwitterアカウントの紐付けが完了している場合、記事を投稿した後、Twitterシェアボタンをクリックします。

ag
ag

Card validatorでテストがうまくいった方は、Twitterアカウントとの紐付けが完了しています!

Cocoon(コクーン)でTwitterカードをツイートしよう

すると自動でTwitterのサイトに飛ぶので、ツイートするボタンをクリックしてツイートします。

ag
ag

ツイート完了です!おめでとうございます!

Cocoon(コクーン)でTwitterカードの作り方 まとめ

Cocoon(コクーン)でTwitterカードの作り方 まとめ

Twitterカードを魅力的に作ることによって、あなたの記事のSNSでの拡散力を高めることができます。

Cocoonユーザーにとってはとても少ない手間で作成できてしまいますので、良質な記事を公開した時には必ずシェアしましょう。

ag
ag

記事は読まれてこそ価値があるー!!

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