【Cocoon】TwitterにブログURLを貼った時に画像(カード)表示をさせよう【初心者】

この記事は、

「TwitterにブログのURLを貼った時、自分の設定した画像を表示したい!」

「OGPの設定をしたのに、TwitterカードがCocoonの画像から変わらない!」

そんな方に向けて書いています。

①はじめに

こんにちは、がおです!

本日のお題はこれ!

「ブログのURL(埋め込みURL)をツイートした時に表示される画像を設定してみた話」です!

今日何気なくツイートしたこれ…

めっちゃ画像がコクーーーーーーン!!!!笑

 
 
がお
自分の好きな画像が表示されるように設定したい!

と思い立ちまして、やってみました!

設定自体はワードプレスの「Cocoon設定」からできましたし、キャッシュの削除もすぐにできました!

 
がお
過去のツイートも時間が経てば新しい画像に反映されましたよ!

以下詳しい手順をまとめましたので、どなたかの参考になると嬉しいです!

 

※現在当ブログで使用しているテーマは「THE THOR」です。

 

②Cocoonでツイッターカードを設定する手順

1.Cocoon設定→OGPタブを選択

 

2.Twitterカード設定をする

・Twitterカードの有効化をします。

「Twitterカードタグの挿入」にチェックを入れます。

・Twitterカードタイプを選びます。

タイプは2種類で、正方形の画像で表示される「サマリー」縦横比約2:1の画像で表示される「大きな画像のサマリー」があります。

私は大きなサイズの画像を表示させたいので「大きな画像のサマリー」を選びました。

 

3.ホームイメージを設定する

「選択」ボタンをクリックして、設定したい画像を選択します。

今回私はCANVAで作成したアイキャッチを用意しました。

CANVAいじるの楽しくてあっという間に時間過ぎちゃう…

 

4.「変更をまとめて保存」する。

一番下の「変更をまとめて保存」をクリックします。

ConoHa WINGをお使いの方で「閲覧できません」のエラーが表示されてしまう方は、以下の記事の「ConoHa WINGのファイアウォールを一時的にオフ!」①~③を参考にしてみてください。

>>【ConoHa WING】閲覧できませんと表示された時の対処法

 

変更をまとめて保存できたあとには、ファイアウォールを元に戻すことを忘れずに!

 

5.変更が反映されない?Cocoonのキャッシュ削除をお忘れなく!

「Cocoonの設定」→「キャッシュ削除」→「全てのキャッシュを削除」します。

これで全ての設定は完了です!

 

③どんな風に表示されるか「Card validator」でチェック!

設定がうまくいっているかどうか「Card validator」というサイトでチェックすることができます。

自分のブログのURLを入力して「Preview card」をクリック。

設定した画像が表示されていればオッケーです!

 

④過去のツイートの画像は時間が経てば変わります!

 
がお
過去にURLを貼ったツイートの画像が変更されていない…うまく設定できてないの??

私の場合、設定から1時間ほどでCocoonデフォルト画像から新しい画像へと変わっていました!

まだ変わってない、という方はもうしばらく待ってみてくださいね。

 

\関連記事/

>>雑記ブログを1年運用したら、どれだけ収益が出たのかまとめ!

かいじゅうのほらあな!

この記事は、 「雑記ブログを始めたいけど、どれくらいで稼げるようになる?」 「雑記ブログをやってるけど、このまま続けてい…

 

※現在当ブログで使用しているテーマは「THE THOR」です。

 

⑤というわけで

ブログのURLをツイートした時に表示される画像を設定するには、

・Cocoon設定のOGPタブで設定する

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

でオッケーということでした。

 

\現在使ってるWPテーマ/

 

<こちらもおすすめ!>

>>雑記ブログを1年運用したら、どれだけ収益が出たのかまとめ!

かいじゅうのほらあな!

この記事は、 「雑記ブログを始めたいけど、どれくらいで稼げるようになる?」 「雑記ブログをやってるけど、このまま続けてい…


>>THE THOR|崩れた記事を2つの修正でなんとかしよう!

かいじゅうのほらあな!

この記事は、 「THE THORを買うか悩んでる…記事ってどんな風に崩れるの?」 「THE THORを導入したけど、記事…


私は④の過去ツイの画像が表示されない=設定できていないと勘違いをしていて、うーんうーんと悩んでしまい、なかなかテストツイートが出来ませんでした…笑

変更がうまくいっているかは「Card validator」で確認ができますので、ぜひ使ってみてくださいね!

 

 
がお
最後まで読んでいただいて有難うございました!

 

\よかったら1ポチおねがいします!/
ブログランキング・にほんブログ村へ
/ランキング参加中!\