![](https://gadget-madoguchi.com/wp-content/uploads/2021/10/neko-namida3.png)
TwitterにサイトURLを投稿したら左図みたいにcocoonが表示されたよ。
右図みたいにヘッダーロゴ出したい…
![Twitterカード](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon1.jpg)
![Twitterカード](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon1.jpg)
![](https://gadget-madoguchi.com/wp-content/uploads/2021/11/icon-nomal2-e1637947798121.jpg)
![](https://gadget-madoguchi.com/wp-content/uploads/2021/11/icon-nomal2-e1637947798121.jpg)
![](https://gadget-madoguchi.com/wp-content/uploads/2021/11/icon-nomal2-e1637947798121.jpg)
cocoonデフォルト設定のままになってますね!
サクッと修正してしまいましょう。
- Twitterからのサイト流入がほしい
- Twitterで綺麗にサイト紹介したい
一度設定してしまえば今後さわる必要はなくなるので、手順を追いながら一緒に設定してみましょう。5分程度で終わります。
TwitterでサイトURLを入力すると自動で出てくるリンクをTwitterカードといいます。
![TwitterURL自動変換](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card13-1.jpg)
![TwitterURL自動変換](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card13-1.jpg)
記事URLを投稿した際、Twitterカード画像が正方形なってしまう。
長方形に変え綺麗なアイキャッチ画像をさせたい方はこちらの記事が参考になります。
≫Twitterカードの画像サイズを正方形から長方形に変える方法
![Twitterカードの変化](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card1.jpg)
![Twitterカードの変化](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card1.jpg)
Twitterカード変更手順
cocoonバージョン
WordPressダッシュボード
cocoon設定
↓
OGP
![cocoonダッシュボード](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-2.png)
![cocoonダッシュボード](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-2.png)
下にスクロールし画像のアップロード
選択
![OGP設定](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-3.png)
![OGP設定](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-3.png)
ヘッダーロゴを選び
↓
画像を選択
![画像選択画面](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-4.png)
![画像選択画面](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-4.png)
画像を確認
↓
設定をまとめて保存
![OGP設定](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-5.png)
![OGP設定](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-5.png)
Card validatorというTwitter公式ツールを使います。
Card URL入力欄
トップページURLを入力
↓
プレビューカード
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-6.png)
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-6.png)
ヘッダーロゴのTwitterカードが出現したことを確認する。
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-7.png)
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-7.png)
SWELLバージョン
- 既に「SEO SIMPLE PACK 」を導入されている場合はSTEP2のOGP設定から進めてください。
WordPressダッシュボード左列
プラグイン
↓
新規追加
![ダッシュボード](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card4.png)
![ダッシュボード](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card4.png)
「SEO SIMPLE PACK 」とキーワード検索
SEO SIMPLE PACK
↓
今すぐインストール
↓
有効化
(右図は既にインストール済み)
![プラグインインストール](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card5.png)
![プラグインインストール](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card5.png)
ダッシュボード左側
SEO PACK
↓
OGP設定
![SEO設定](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card6.png)
![SEO設定](https://gadget-madoguchi.com/wp-content/uploads/2021/05/twitter-card6.png)
基本設定タブ
画像を選択
![OGP設定](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-8.png)
![OGP設定](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-8.png)
ヘッダーロゴを選択
↓
選択
![画像選択画面](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-9.png)
![画像選択画面](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-9.png)
Card validatorというTwitter公式ツールを使います。
Card URL入力欄
トップページURLを入力
↓
プレビューカード
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-11.png)
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-11.png)
ヘッダーロゴのTwitterカードが出現したことを確認する。
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-12.png)
![カードバリデータ](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon-12.png)
実際にTwitterを確認してみる
- Twitterアプリの再起動
- 5分程時間を空けて確認する
- ヘッダーロゴ画像サイズの確認
- ヘッダーロゴ画像データ容量の確認
望ましい画像データサイズは以下の通りです。サイズアウトすると中央からトリミングされます。
- 最小サイズ:幅300×高さ157 ピクセル
- 最大サイズ:幅4096×高さ4096 ピクセル
- 画像容量:5MB以下
- 画像形式:JPG 、 PNG 、 WEBP 、GIF
※Facebookの推奨サイズは 1200×630px となっています。
画像データの容量は読み込み時間を早くする為にも1MB以下が望ましいです。
画像の拡張子がpngであればjpgに変換、かつ圧縮することで100KB程度のサイズまで減らすことができます。ブラウザ上で手軽に画像の変換や圧縮が可能なサイトがありますのでお使いください。
まとめ
いかがでしたでしょうか。ブログ初心者のTwitter投稿でcocoon表示(左)をよく見かけます。
![Twitterカード](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon1.jpg)
![Twitterカード](https://gadget-madoguchi.com/wp-content/uploads/2021/06/twitter-cocoon1.jpg)
早めに設定して大きいサイズのTwitterカード(右)表示しましょう。
- Twitterからのサイト流入
- Twitterで綺麗なサイト紹介
ができます。
cocoonもSWELLもOGP設定を行う事で改善できました。
最後まで読んで頂きありがとうございます。