この記事は、
「TwitterにブログのURLを貼った時、自分の設定した画像を表示したい！」
「OGPの設定をしたのに、TwitterカードがCocoonの画像から変わらない！」
そんな方に向けて書いています。
①はじめに
こんにちは、がおです！
本日のお題はこれ！
「ブログのURL(埋め込みURL)をツイートした時に表示される画像を設定してみた話」です！
今日何気なくツイートしたこれ…
「めっちゃ画像がコクーーーーーーン！！！！笑」
「自分の好きな画像が表示されるように設定したい！」
と思い立ちまして、やってみました！
設定自体はワードプレスの「Cocoon設定」からできましたし、キャッシュの削除もすぐにできました！
過去のツイートも時間が経てば新しい画像に反映されましたよ！
以下詳しい手順をまとめましたので、どなたかの参考になると嬉しいです！
②Cocoonでツイッターカードを設定する手順
1.Cocoon設定→OGPタブを選択
2.Twitterカード設定をする
・Twitterカードの有効化をします。
「Twitterカードタグの挿入」にチェックを入れます。
・Twitterカードタイプを選びます。
タイプは2種類で、正方形の画像で表示される「サマリー」と縦横比約2:1の画像で表示される「大きな画像のサマリー」があります。
私は大きなサイズの画像を表示させたいので「大きな画像のサマリー」を選びました。
3.ホームイメージを設定する
「選択」ボタンをクリックして、設定したい画像を選択します。
今回私はCANVAで作成したアイキャッチを用意しました。
CANVAいじるの楽しくてあっという間に時間過ぎちゃう…
4.「変更をまとめて保存」する。
一番下の「変更をまとめて保存」をクリックします。
ConoHa WINGをお使いの方で「閲覧できません」のエラーが表示されてしまう方は、以下の記事の「ConoHa WINGのファイアウォールを一時的にオフ！」①～③を参考にしてみてください。
変更をまとめて保存できたあとには、ファイアウォールを元に戻すことを忘れずに！
5.変更が反映されない？Cocoonのキャッシュ削除をお忘れなく！
「Cocoonの設定」→「キャッシュ削除」→「全てのキャッシュを削除」します。
これで全ての設定は完了です！
③どんな風に表示されるか「Card validator」でチェック！
設定がうまくいっているかどうか「Card validator」というサイトでチェックすることができます。
自分のブログのURLを入力して「Preview card」をクリック。
設定した画像が表示されていればオッケーです！
④過去のツイートの画像は時間が経てば変わります！
「過去にURLを貼ったツイートの画像が変更されていない…うまく設定できてないの？？？」
私の場合、設定から1時間ほどでCocoonデフォルト画像から新しい画像へと変わっていました！
まだ変わってない、という方はもうしばらく待ってみてくださいね。
⑤というわけで
ブログのURLをツイートした時に表示される画像を設定するには、
・Cocoon設定のOGPタブで設定する
・Cocoonのキャッシュを削除する
でオッケーということでした。
＜こちらもおすすめ！＞
私は④の過去ツイの画像が表示されない＝設定できていないと勘違いをしていて、うーんうーんと悩んでしまい、なかなかテストツイートが出来ませんでした…笑
変更がうまくいっているかは「Card validator」で確認ができますので、ぜひ使ってみてくださいね！
最後まで読んでいただいて有難うございました！
もしよろしければ、最近飼い始めたひよこちゃんをポチっとしてもらえると嬉しいです！
それでは！
＼よかったら1ポチおねがいします！／
／ランキング参加中！＼