この記事は、
「TwitterにブログのURLを貼った時、自分の設定した画像を表示したい！」
「OGPの設定をしたのに、TwitterカードがCocoonの画像から変わらない！」
そんな方に向けて書いています。
①はじめに
こんにちは、がおです！
本日のお題はこれ！
「ブログのURL(埋め込みURL)をツイートした時に表示される画像を設定してみた話」です！
今日何気なくツイートしたこれ…
めっちゃ画像がコクーーーーーーン！！！！笑
と思い立ちまして、やってみました！
おはようございます☁
— がお🦕🎸🍻🍛 (@gaoblogao) November 22, 2020
寝過ぎた〜😪ってついった開いたら、今日はゆっくり起床さんが多いみたいで「そっか🙃」って二度寝しそうになっています💤(危険)
昨日はトップページにシュンシュンするやつつけたし、今日も何かいじりたいのう🤔#ブログ初心者 #初心者ブロガー #三連休https://t.co/uJXgaM4mT2
設定自体はワードプレスの「Cocoon設定」からできましたし、キャッシュの削除もすぐにできました！
以下詳しい手順をまとめましたので、どなたかの参考になると嬉しいです！
②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」をクリック。
設定した画像が表示されていればオッケーです！
④過去のツイートの画像は時間が経てば変わります！
私の場合、設定から1時間ほどでCocoonデフォルト画像から新しい画像へと変わっていました！
まだ変わってない、という方はもうしばらく待ってみてくださいね。
⑤というわけで
ブログのURLをツイートした時に表示される画像を設定するには、
・Cocoon設定のOGPタブで設定する
・Cocoonのキャッシュを削除する
でオッケーということでした。
＜こちらもおすすめ！＞
＞＞Android｜Twitterのフリートに動くスタンプが登場！ この記事は、 「TwitterのFleet(フリート)機能で、動くスタンプを押す方法を知りたい！」 「iPhoneでは動…
私は④の過去ツイの画像が表示されない＝設定できていないと勘違いをしていて、うーんうーんと悩んでしまい、なかなかテストツイートが出来ませんでした…笑
変更がうまくいっているかは「Card validator」で確認ができますので、ぜひ使ってみてくださいね！
＼よかったら1ポチおねがいします！／
／ランキング参加中！＼