この記事は、
「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」をクリック。
設定した画像が表示されていればオッケーです!
④過去のツイートの画像は時間が経てば変わります!
私の場合、設定から1時間ほどでCocoonデフォルト画像から新しい画像へと変わっていました!
まだ変わってない、という方はもうしばらく待ってみてくださいね。
\関連記事/
>>雑記ブログを1年運用したら、どれだけ収益が出たのかまとめ!
この記事は、 「雑記ブログを始めたいけど、どれくらいで稼げるようになる?」 「雑記ブログをやってるけど、このまま続けてい…
※現在当ブログで使用しているテーマは「THE THOR」です。
⑤というわけで
ブログのURLをツイートした時に表示される画像を設定するには、
・Cocoon設定のOGPタブで設定する
・Cocoonのキャッシュを削除する
でオッケーということでした。
\現在使ってるWPテーマ/
<こちらもおすすめ!>
>>雑記ブログを1年運用したら、どれだけ収益が出たのかまとめ!
この記事は、 「雑記ブログを始めたいけど、どれくらいで稼げるようになる?」 「雑記ブログをやってるけど、このまま続けてい…
>>THE THOR|崩れた記事を2つの修正でなんとかしよう!
この記事は、 「THE THORを買うか悩んでる…記事ってどんな風に崩れるの?」 「THE THORを導入したけど、記事…
私は④の過去ツイの画像が表示されない=設定できていないと勘違いをしていて、うーんうーんと悩んでしまい、なかなかテストツイートが出来ませんでした…笑
変更がうまくいっているかは「Card validator」で確認ができますので、ぜひ使ってみてくださいね!