こんにちは、２歳９か月の双子を育てるワーママのキャベツ（cabbage_ac）です。
ブログ初心者の私は、日々ブログ作成に四苦八苦…。
１つずつ学んだことを備忘録もかねて、細かく解説していきます。
今回はこちらです。
TwitterにブログのトップページURLを貼ったら
Cocoonの画像が出る！変更したい！
１．TwitterにブログのトップURLを貼ったらCocoon画像が出る
ツイッターで、ブログのトップページのURLを入力し投稿すると、ツイート内のTwitterカードの画像がデフォルトではCocoonの画像になります。
Twitterカードとは
Twitterカードとは、ツイートに貼り付けられた記事へのリンクを魅力的に見せる機能のことです。
具体的にはツイートの中に「アイキャッチ画像」または「ホームイメージ」や「記事のタイトル」などが表示されるようになります。
２．サイトのトップURLを入力したら出る画像は「ホームイメージ」という
ブログなどのサイトのトップページのURLを貼った時に出てくる画像のことを、
そのサイトの「ホームイメージ」と言います。
私はこの画像のことを「ホームイメージ」と呼ぶことが分からなかった為、ググってもなかなかお目当ての解決法にたどり着きませんでした・・。
ではそのホームイメージの変更方法を、順に説明します！
３．ホームイメージ変更手順
①Cocoon設定 ⇒ ②OGP ⇒ ホームイメージ
③「画像のアップロード」で好みの画像を選択 ⇒ ④「変更をまとめて保存」で完了！
「ホームイメージ」は「OGP」設定ページの１番下にあります！
４．まだ画像が反映されない場合は…？
上記の手順で、Twitterカードのホームイメージは変更されるはずなのですが、Twitterに投稿してみても変わってない！ということも度々あるようです。
こんなときは、あと２つ設定をやってみましょう！
- Cocoonのキャッシュを削除する
- Twitter公式サイト「Card Validator」でTwitterカードの情報を更新する
１．Cocoonのキャッシュを削除する
①Cocoon設定 ⇒ ②キャッシュ削除 ⇒ ③「全てのキャッシュの削除」で完了！
２．Twitter公式「Card Validator」でTwitterカードの情報を更新する
Twitterの開発者用公式サイト「Card validator」へ向かいます。
» Card validator（新しいタブが開きます）
①「Card URL」に自サイトのURLを入力 ⇒ ②「Preview card」をクリック
③「Card Preview」にきちんと表示されたら完了！です。
５．おまけ ホームイメージに適切な画像サイズ
OGP画像のシミュレーターサイトには、以下の記載があります。
OGPに最適な画像
【2019年5月時点での推奨画像】
引用元：https://rakko.tools/tools/9/
・一番目立たせたい物が真ん中に配置されている
・1200*630（比率 1:0.525）
・PNG画像
こちらのサイト、OGP画像がどう表示されるかをデモページで確認出来ます。
画像サイズの推奨は1200*630ですが、私はサイズ・比率ともに違う画像を使用しています。
こちらのサイトで見え方を確認し、イラスト・文字が切れないよう調整した結果、今のサイズになりました。
見え方は画像内の文字・デザインバランスによるから、
推奨サイズが絶対でもないよ
推奨サイズ画像を使用した場合は、このような見え方になりました。
今の画像のデモはこちら。
使われる画像によって適切サイズ・比率は異なりますので、試してみるのが一番です！
６．まとめ
ブログのトップページURLをTwitterに貼った時の表示画像【ホームイメージ】の変更は、
- 「Cocoon設定」から「OGP」タブで設定
- 「Cocoon設定」⇒「キャッシュ削除」
- 「Card Validator」サイトで「Card URL」自サイトURLを入力
で出来ます！
過去ツイの画像は、時間がたてば勝手に変更されるよ
これでまた、初心者ブロガー脱却の１歩を踏めました！（小さな１歩！）
少しずつ、自分のブログを育てて行きましょう！