ゲーム化!tomo_manaのブログ

ゲーム化!tomo-manaのブログ

Unityでゲームを作る方法について紹介しています

ブログのアイキャッチを変更してもTwitter側のアイキャッチ画像が変わらない場合の対処方法(Twitter - Card Validator)

ブログのアイキャッチを変更してもTwitter側のアイキャッチ画像が変わらない場合の対処方法(備忘)


以下の記事を参考にさせて頂きました。
mtzml.hatenablog.com


アイキャッチの指定を間違えたままツイートしてしまった場合、はてな側のアイキャッチを変更しても、ツイート済の投稿のアイキャッチが変わらない問題でしばらく困っていましたが、Twitter側のアイキャッチを読み直す方法があったのですね。とても参考になりました。


結論から言うと、Twitter側の仕様のようで、ブログからTwitterアイキャッチを持ってくるプロトコル周りに課題があるようです。Twitterが提供するCard validatorという機能で解決できるようです。

Twitter の Card validator という機能提供サイトへ行きます。
https://cards-dev.twitter.com/validator

Card Validator上での操作

f:id:tomo_mana:20220106094401p:plain
Vard Validator - Twitter

URL入力

投稿したブログの記事(公開済)のURL を URL入力欄に入れます。

f:id:tomo_mana:20220105213101p:plain
Card Validator - URL入力

ここで入力するURLは、公開されたブログ記事のURLです。
(ツイート自体のURLではない。またブログ編集用のURLでもない)


URLを入力後、下にある Preview card ボタンを押します。

確認

アイキャッチが正常に読み込まれた場合、画面右側の Card previewアイキャッチが表示されます。

f:id:tomo_mana:20220106002422p:plain
Card Preview

確認:こっちは はてなリンク埋め込み
tomo-mana.hatenablog.com


確認:こっちは 過去の Twitter 投稿記事(スクリーンショット

f:id:tomo_mana:20220106002949p:plain
Twitterでも表示確認


以下、実際にアイキャッチを更新してみた時に感じたこと。

●1回でうまく更新されないことがありました。あまり何回も Preview をかけるのもネットワークトラフィックを無駄に増やしてしまって良くないかなと思いながら、いろいろ試していると、2回目の更新でうまくいくことが多かったような印象です。これはトラフィックや通信環境次第かもしれません。

●また、何回実施しても正しくアイキャッチが出ないことがありましたが、他の URL で Preview を実施した後、Twitter で表示を確認したら、うまく表示されるようになっていた、ということもありました。これもトラフィックの問題かもしれないので、すぐに更新されない場合は、少し時間をおいて試してみても良いのかもと思いました。

エラー

Card Preview 欄の下に、ログを表示する部分があります。正常にアイキャッチが読みだせなかったり、想定しないページ構成だった場合に、エラーが表示されます。


ログインが必要
※以下の例では、そもそも公開ブログのURLでなく Twitter のURL にアクセスしようとしているのでNG

f:id:tomo_mana:20220106001416p:plain
エラー(ログインが必要)


アイキャッチ関連情報が無い(投稿済みTwitter記事を指定してしまった場合など)

f:id:tomo_mana:20220105213539p:plain
エラー(ツイート自体のURLを指定した場合)


(以上)