アイキャッチ

Twitterのリンクカードってありますよね?
ページのURLをツイートに含めたときに自動で生成されて表示される"アレ"です。ブロガーさんもお馴染みの機能だと思いますが、

今日解決すること

「ブログのページ内容を更新したあとの変更内容(アイキャッチ画像・タイトルなど)がリンクカード反映されない」現象

わたしもその現象に困っていたのですが、変更した内容をリンクカードに手動で反映させる対処法を見つけたので今日はそれを紹介していきます!

Twitterリンクカードの「アイキャッチ画像」「タイトル」の変更が反映されないときの対処法

まずTwitterリンクカードがなんなのか?まだピンときていない人のために。

Twitterリンクカードとは

TwitterでページのURLを含んでツイートする際に、その貼り付けされたページ(記事やサイトページなど)のアイキャッチ画像やタイトルが自動生成されてカード表示されるリンクのこと

リンク先のページが魅力的見えるよう、Twitter社がデフォルトで提供しているサービスです。特別なソフトや備えは必要なく、ツイート作成画面にページURLを入力するだけで誰でもすぐに作成できます☝
Twitterリンクカード

では次章は本題の対処法についてです。

リンクカードの更新にはTiwtter公式の「card validator」を使う

軽く状況を説明しとく

とある自ブログのページAをリンクカードで投稿
ページAの本元サムネイル画像がうっかり未設定だったのに気づく(凡ミス)
 ページAのサムネイルを設定後に再度ツイートしようとリンクカードを生成すると変更前の状態から更新されていない

こんな感じでうまく画像が表示されていません・・・
Twitterリンクカードの画像が表示されない

なんだ…キャッシュのせいか→Twitterのキャッシュを削除する→直らない→「はい?笑」

キャッシュ削除では解決しないということは自分側の問題じゃないことがわかりました。

それじゃあ、Twitter側の問題か!
そこでTwitter公式のリンクカード更新ツール「card validator」を見つけました。

「card validator」での更新方法

Twitter公式提供のディベロッパーツール「card validator」を使っていきます

まずここにアクセスすると、こんなページに飛びます
Twitter cardvalidatorのイメージ

「Card URL」の欄にリンクに使用する(更新したい)ページのURLを入力して「Preview card」をクリックURLを入力

しばらく読み込み画面が続いたあと、以下のようなリンクカードの更新完了を知らせる画面に切り替わったらCard validatorでの作業は完了
リンクカードの更新完了

Twitterに戻ってリンクカードが更新されているか確認をしましょう

まず1度ブラウザ上の更新ボタンを押してページの更新をしてから、ツイート入力欄にURLを入れてみると…リンクカードの情報が更新されていることが確認できます(アイキャッチ画像が反映されている!)
再度リンクカード生成

あとはツイート内容を入力し投稿するだけでOK☝
こんな感じでリンクカードの情報が変更後の内容になって投稿されました
Twitterリンクカードの更新完了

これで解決です!

Twitterリンクカードが完成した様子

のブラウザ更新を忘れているとたまに反映されない場合があるのでそのひと手間を忘れないように注意しましょう!

それでも反映されていない場合は、Card validator側の反映タイムラグということもあるので少し時間をおいてから確認してみてくださいね。

そもそもカードが表示されないときは?(URLが認識されないなど)

もうひとつ、紹介するのが、「ツイート入力欄にURLを入れてもなぜか認識されずリンクカード自体がそもそも表示されない…」というときの対処方法です。

リンクカード表示されない

リンクカード用URLを認識させる方法

何回かURLを貼りなおしてみる
ハッシュタグを使っているひとはハッシュタグより下の最末尾に張り付けてみるなど、URLの設置個所を変えて何度か試してみましょう
リンクの貼りなおし

ブラウザ更新をしてページを再読み込みしてみる
ページに不具合が生じている場合があるので再読み込みをしてページをリフレッシュしてみましょう
ブラウザ更新

Twitterのキャッシュを削除してみる
Chromeを使っている人は、ページ上でマウス右クリック+検証(I)をクリックしてディベロッパーツールを開いた状態で更新マークにカーソルをあてると「キャッシュ削除」の機能が表示されます(その他ブラウザでのキャッシュ削除方法はこちら
キャッシュの削除

以上の3つの方法を試してみてそれでも解決されなかった場合は、貼り付けしているURLの一部が切れている・欠損しているなどのイージーミスやURLに問題がないか確認してみてくださいね。


以上、今日は「Twitterリンクカードに情報の変更が反映されないときの対処法」と「リンクカードが生成されないときの対処法」を紹介してきました。

同じ現象が起きたときはぜひ試してみてくださいね!