【Cocoon】ブログのトップページURLをTwitterに貼った時の表示画像の変更

こんにちは、2歳9か月の双子を育てるワーママのキャベツ(cabbage_ac)です。

ブログ初心者の私は、日々ブログ作成に四苦八苦…。
1つずつ学んだことを備忘録もかねて、細かく解説していきます。

今回はこちらです。

キャベツ
キャベツ

TwitterにブログのトップページURLを貼ったら

Cocoonの画像が出る!変更したい!

スポンサーリンク

1.TwitterにブログのトップURLを貼ったらCocoon画像が出る

ツイッターで、ブログのトップページのURLを入力し投稿すると、ツイート内のTwitterカードの画像がデフォルトではCocoonの画像になります。

twitterカードのCocoon画像

 Twitterカードとは

Twitterカードとは、ツイートに貼り付けられた記事へのリンクを魅力的に見せる機能のことです。

具体的にはツイートの中に「アイキャッチ画像」または「ホームイメージ」「記事のタイトル」などが表示されるようになります。

Twitterカード表示例

2.サイトのトップURLを入力したら出る画像は「ホームイメージ」という

ブログなどのサイトのトップページのURLを貼った時に出てくる画像のことを、
そのサイトの「ホームイメージ」と言います。

私はこの画像のことを「ホームイメージ」と呼ぶことが分からなかった為、ググってもなかなかお目当ての解決法にたどり着きませんでした・・。

ではそのホームイメージの変更方法を、順に説明します!

3.ホームイメージ変更手順

Cocoon設定 ⇒ ②OGP ⇒ ホームイメージ

「画像のアップロード」で好みの画像を選択 ⇒ ④「変更をまとめて保存」で完了!

キャベツ
キャベツ

「ホームイメージ」は「OGP」設定ページの1番下にあります!

Cocoonホームイメージの設定1
Cocoonホームイメージの設定2

4.まだ画像が反映されない場合は…?

上記の手順で、Twitterカードのホームイメージは変更されるはずなのですが、Twitterに投稿してみても変わってない!ということも度々あるようです。

こんなときは、あと2つ設定をやってみましょう!

  1. Cocoonのキャッシュを削除する
  2. Twitter公式サイト「Card Validator」でTwitterカードの情報を更新する

 1.Cocoonのキャッシュを削除する

Cocoon設定 ⇒ ②キャッシュ削除 ⇒ ③「全てのキャッシュの削除」で完了!

Cocoonのキャッシュ削除方法

 2.Twitter公式「Card Validator」でTwitterカードの情報を更新する

Twitterの開発者用公式サイト「Card validator」へ向かいます。
» Card validator(新しいタブが開きます)

①「Card URL」に自サイトのURLを入力 ⇒ ②「Preview card」をクリック

③「Card Preview」にきちんと表示されたら完了!です。

Card validator使用方法

5.おまけ ホームイメージに適切な画像サイズ

OGP画像のシミュレーターサイトには、以下の記載があります。

OGPに最適な画像

【2019年5月時点での推奨画像】
・一番目立たせたい物が真ん中に配置されている
・1200*630(比率 1:0.525)
・PNG画像

引用元:https://rakko.tools/tools/9/

こちらのサイト、OGP画像がどう表示されるかをデモページで確認出来ます

画像サイズの推奨は1200*630ですが、私はサイズ・比率ともに違う画像を使用しています。

こちらのサイトで見え方を確認し、イラスト・文字が切れないよう調整した結果、今のサイズになりました。

キャベツ
キャベツ

見え方は画像内の文字・デザインバランスによるから、

推奨サイズが絶対でもないよ

推奨サイズ画像を使用した場合は、このような見え方になりました。

OGP画像のシミュレーターサイトデモページ1

今の画像のデモはこちら。

OGP画像のシミュレーターサイトデモページ2

使われる画像によって適切サイズ・比率は異なりますので、試してみるのが一番です!

6.まとめ

ブログのトップページURLをTwitterに貼った時の表示画像【ホームイメージ】の変更は、

  1. 「Cocoon設定」から「OGP」タブで設定
  2. 「Cocoon設定」⇒「キャッシュ削除」
  3. 「Card Validator」サイトで「Card URL」自サイトURLを入力

で出来ます!

キャベツ
キャベツ

過去ツイの画像は、時間がたてば勝手に変更されるよ

これでまた、初心者ブロガー脱却の1歩を踏めました!(小さな1歩!)

少しずつ、自分のブログを育てて行きましょう!