![Cocoon(コクーン)でTwitterカードの作り方@設定とポイントを図解](https://www.imakarablog.com/wp-content/uploads/2020/08/08ab5c8d32067e22f1998bdd9ce5f2e0-1024x576.jpg)
Cocoon(コクーン)ユーザーはTwitterカードが超簡単に作れる!!
![](https://www.imakarablog.com/wp-content/uploads/2020/07/C0FEA6B6-BD94-4E51-9773-A24852C43380-150x150.png)
せっかく良記事を公開したのに、上位表示されないから読んでもらえない・・・
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/1091401F-2080-4B5E-9E64-A974F698F6C1-150x150.png)
Twitterで公開するという手があるよ!
![](https://www.imakarablog.com/wp-content/uploads/2020/07/9259314D-6D63-45E5-AC7A-164EE9A743AD-150x150.png)
そっか!Twitterならフォロワーさんに見てもらえるかも!?
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/56827C87-1920-4539-90E4-C1A09B39DB4D-150x150.jpg)
今回は、Twitterで記事をオススメするときに、少しでも目に留まりやすく、クリックしてもらいやすくなるように、Twitterカードの作り方を紹介します!
Cocoon(コクーン)ユーザーから見るTwitterカードとは
![Cocoon(コクーン)ユーザーから見るTwitterカードとは](https://www.imakarablog.com/wp-content/uploads/2020/08/2535fa44d8b66b5870b28bfc3a3a00cf.jpg)
Twitterカードとは、画像付きの記事へのリンクのことです。
Twitterカードは、メディアへのアクセス数を伸ばし、認知度を高める効果が期待できます。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/AF639BE5-CDF4-4DCC-894F-D4C9BD4D55EB-150x150.jpg)
・ただリンクテキストが張ってあるツイート
よりも、
・目を引く画像付きのツイート
のほうがイイ!!
CocoonユーザーにとってのTwitterカードは2種類
![CocoonユーザーにとってのTwitterカードは2種類](https://www.imakarablog.com/wp-content/uploads/2020/08/4a8679149b9ce37713172655db5363d4-1024x576.jpg)
サマリーカード
サマリーカード(summary)は、小型のアイキャッチ画像+記事のタイトルと説明文を表示できるカードです。
[サマリーカードで設定できる画像の規定]
最小サイズ | 最大サイズ | 容量上限 |
幅144×高さ144 | 幅4096×高さ4096 | 5MB |
大きな画像のサマリー
大きな画像のサマリーカード(summary_large_image)は、大型のアイキャッチ画像+記事のタイトルと説明文を表示できるカードです。
[大きな画像のサマリーカードで設定できる画像の規定]
最小サイズ | 最大サイズ | 容量上限 |
幅300×高さ157 | 幅4096×高さ4096 | 5MB |
設定した画像サイズが規定のサイズを超えている場合、自動でセンターからトリミングされます。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/0C8DC407-7BF8-4B5F-BD7A-63B8E15B181C-150x150.jpeg)
トリミングについては下でポイントや対策を書きます!
Cocoon(コクーン)でTwitterカードの設定をしよう
![Cocoon(コクーン)でTwitterカードの設定をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/ca3935397243504c0d0689e951313a7d-1024x576.jpg)
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/8B992D95-6814-421D-AE19-F6226BD24C3B-150x150.png)
Cocoonの設定はとても簡単です!
![](https://www.imakarablog.com/wp-content/uploads/2020/07/9259314D-6D63-45E5-AC7A-164EE9A743AD-150x150.png)
Cocoonユーザーでよかった!
コクーン設定/OGPタブの設定
![Cocoon(コクーン)でTwitterカードの設定をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/27d2f594974cf41cd3a78a3b0ce7ab31-1.jpg)
ワードプレス画面左側メニューから、Cocoon設定をクリックします。
![Cocoon(コクーン)でTwitterカードの設定をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/b744cc0ebabc3afcaefdcf86ca7099b9-1024x188.jpg)
Cocoon設定画面上部メニューから、OGPタブをクリックします。
![Cocoon(コクーン)でTwitterカードの設定をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/ff4e1526f2ba697f6d4b8464c0946220.jpg)
OGP設定画面「OGPタグの挿入」にチェックが入っていることを確認します。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/1091401F-2080-4B5E-9E64-A974F698F6C1-150x150.png)
チェックが外れている場合はチェックしましょう!
![Cocoon(コクーン)でTwitterカードの設定をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/eb2a1390efcc40f2d02ab806008d0c0e.jpg)
OGP設定画面「Twitterカードタグの挿入」にチェックが入っていることを確認します。
Twitterカードタイプを「サマリー」/「大きな画像のサマリー」のどちらかを選択します。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/0C8DC407-7BF8-4B5F-BD7A-63B8E15B181C-150x150.jpeg)
筆者は「大きな画像のサマリー」を選択しました!
![Cocoon(コクーン)でTwitterカードの設定をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/5026aadab75b01ca9fbb3308ccd6aa05.jpg)
最後に変更をまとめて保存ボタンを押します。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/1091401F-2080-4B5E-9E64-A974F698F6C1-150x150.png)
変更をまとめて保存ボタンはページ最下部にもあります!
以上で設定は完了です。
OGPとはなにかを勉強したい方がいると思いますので、リンク張っておきます。
Twitterカードのツイートの準備をしよう
![Twitterカードのツイートの準備をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/966a3494ee1bae11cb03f5181fceb5e1-1024x576.jpg)
アイキャッチ画像をTwitterカードにするときは
Cocoonでは、記事をTwitterカードでアップする場合、デフォルトでアイキャッチ画像が選択される仕様になっています。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/1091401F-2080-4B5E-9E64-A974F698F6C1-150x150.png)
なにも設定しなくてもアイキャッチ画像が選択されます!
アイキャッチ画像以外をTwitterカードにするときは
記事作成画面の右側メニューで、文書タブを選択します。
![Twitterカードのツイートの準備をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/7e1c5af2e8348564bfb1758874da06d3.jpg)
下にスクロールしていくとSNS画像の欄があるので、選択ボタンから、画像を選択します。
![Twitterカードのツイートの準備をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/8dcc92653312143320f19f6c69ec9bea.jpg)
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/8B992D95-6814-421D-AE19-F6226BD24C3B-150x150.png)
以上!
ブログのホームをTwitterカードにするときは
Cocoon設定から、
![Twitterカードのツイートの準備をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/27d2f594974cf41cd3a78a3b0ce7ab31-1.jpg)
OGPタブを選択します。」
![Twitterカードのツイートの準備をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/b744cc0ebabc3afcaefdcf86ca7099b9-1024x188.jpg)
下の方に、ホームイメージ欄があるので、ここで画像を選択します。
![Twitterカードのツイートの準備をしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/9af37d1fe8ab379e7b8cd3886d91fb7f.jpg)
最後に変更をまとめて保存すれば完了です。
![](https://www.imakarablog.com/wp-content/uploads/2020/07/9259314D-6D63-45E5-AC7A-164EE9A743AD-150x150.png)
これもカンタン♪
Cocoon公式サイトにもホームイメージを変更する方法が掲載されています。
Twitterカードをテストしよう
![Twitterカードのツイートをテストしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/35112ea7dbb1d47aa7f3f5e99fc2f1fe-1024x576.jpg)
Card validatorでテスト
Card validatorというテストサイトにアクセスします。
![Twitterカードのツイートをテストしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/14b572e1db081f1f0a7fd02978009be9.jpg)
Card URLの入力欄に、記事のURLをコピペし、「Preview card」ボタンをクリックします。
![Twitterカードのツイートをテストしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/8c375656021b11971e5c774fd47d0345.jpg)
Card Previewにプレビューが表示されれば正常です。
画像がプレビュー表示されない時はキャッシュクリア
うまく画像がプレビューされない場合は、キャッシュクリアをすることで解決するかもしれません。
![Twitterカードのツイートをテストしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/35f6478e07618d59f3ae36d448e37883.jpg)
Cocoon設定のキャッシュ削除をクリックします。
![Twitterカードのツイートをテストしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/3ed14295384970531164649b6d483e72.png)
キャッシュ削除画面で、ブログカードキャッシュの削除ボタンをクリックし、キャッシュクリアします。
自動トリミングが許容範囲内かチェックする
画像サイズが規定より大きい場合、自動で画像がセンターからトリミングされます。
![Twitterカードのツイートをテストしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/8b6d908ef8f07d0487ceea41872da0b2.jpg)
テストした結果見栄えが悪いときは、トリミングされることを前提とした画像を作成すると良いです。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/0C8DC407-7BF8-4B5F-BD7A-63B8E15B181C-150x150.jpeg)
トリミングの仕様は以下の表の通りです!
【カードの種類】 | 【自動トリミングの比率】 |
サマリーカードの画像 | 幅1 : 高さ1 |
大型サマリーカードの画像 | 幅2 : 高さ1 |
Twitterカード用の画像を新たに作成した場合も、念のため再テストしましょう。
Cocoon(コクーン)でTwitterカードをツイートしよう
![Cocoon(コクーン)でTwitterカードをツイートしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/a720ae92254467bf55aa1de384c439fe-1024x576.jpg)
ツイートの手順
![Cocoon(コクーン)でTwitterカードをツイートしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/b210cb61736d0491d741702199cdf1bf-1.jpg)
Cocoon設定でTwitterアカウントの紐付けが完了している場合、記事を投稿した後、Twitterシェアボタンをクリックします。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/56827C87-1920-4539-90E4-C1A09B39DB4D-150x150.jpg)
Card validatorでテストがうまくいった方は、Twitterアカウントとの紐付けが完了しています!
![Cocoon(コクーン)でTwitterカードをツイートしよう](https://www.imakarablog.com/wp-content/uploads/2020/08/fe182dfa5c300eec49dece5334084628.jpg)
すると自動でTwitterのサイトに飛ぶので、ツイートするボタンをクリックしてツイートします。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/8B992D95-6814-421D-AE19-F6226BD24C3B-150x150.png)
ツイート完了です!おめでとうございます!
Cocoon(コクーン)でTwitterカードの作り方 まとめ
![Cocoon(コクーン)でTwitterカードの作り方 まとめ](https://www.imakarablog.com/wp-content/uploads/2020/08/4782f1f4016e6f17f5e684f2b7b76fdc-1024x576.jpg)
Twitterカードを魅力的に作ることによって、あなたの記事のSNSでの拡散力を高めることができます。
Cocoonユーザーにとってはとても少ない手間で作成できてしまいますので、良質な記事を公開した時には必ずシェアしましょう。
![ag](https://www.imakarablog.com/wp-content/uploads/2020/07/0FAA3565-6DCE-44F5-B2A3-964973A305EF-150x150.png)
記事は読まれてこそ価値があるー!!