X のリンクカードが表示されない原因と、画像を出すための直し方
X に URL を貼ったのに、画像もタイトルも出ず、URL の文字列だけが表示される。この状態では、投稿が目立たず、クリックされにくくなります。原因の多くは、リンク先のページに設定された情報、X のクローラーによる読み取り、画像の仕様、キャッシュのいずれかにあります。
この記事では、リンクカードの仕組み、表示されない主な原因、OGP タグの確認方法、キャッシュの更新方法、短縮 URL を使って表示を整える方法を順に説明します。自分のサイトでも、他人のサイトを紹介するときでも、同じ手順で切り分けられます。
リンクカードとは
リンクカードは、投稿に含まれる URL のページ情報を、画像、タイトル、説明の形で表示する仕組みです。投稿の中でリンクが目立ち、クリックされやすくなります。
表示される情報は、リンク先のページの HTML に書かれた meta タグから取得されます。X は、Twitterbot というクローラーでページを読み取り、次のような情報を使います。
| 表示される要素 | 参照されるタグ(優先順) |
|---|---|
| タイトル | twitter:title、なければ og:title |
| 説明 | twitter:description、なければ og:description |
| 画像 | twitter:image、なければ og:image |
| カードの種類 | twitter:card |
カードの種類には、小さな画像が左に出る summary と、大きな画像が上に出る summary_large_image があります。大きな画像で見せたいときは、<meta name="twitter:card" content="summary_large_image"> を指定します。OGP の全体像は OGP 画像 の記事で説明しています。
表示されない主な原因
症状ごとに、考えられる原因を整理します。
| 症状 | 主な原因 |
|---|---|
| カード自体が出ない | meta タグがない、クローラーがページを読めない |
| タイトルだけ出て画像が出ない | 画像の URL が誤り、画像が大きすぎる、画像の形式が合わない |
| 古い画像やタイトルが出る | X 側のキャッシュが残っている |
| 画像が切れて表示される | 画像の縦横比が合っていない |
| 特定のサイトだけ出ない | ログイン必須、アクセス制限、robots.txt による拒否 |
クローラーがページを読めない
X のクローラーがアクセスできないと、情報を取得できません。次のような設定がないかを確認します。
robots.txtでTwitterbotを拒否している- ログインが必要なページになっている
- セキュリティ設定(WAF やボット対策)が、クローラーのアクセスを遮断している
- ページの表示が非常に遅く、読み取りがタイムアウトする
- 証明書の期限が切れている、http と https が混在している
画像の仕様が合っていない
X の公式資料では、summary_large_image カードの画像は、縦横比 2:1、最小 300×157 ピクセル、最大 4096×4096 ピクセル、ファイルサイズ 5MB 以下が目安とされています。推奨のサイズとして 1200×628 ピクセル前後がよく使われます。条件を満たさない画像は、小さなカードに切り替わったり、表示されなかったりします。
また、画像の URL が相対パス(/images/og.png)になっていたり、http:// のままだったりすると、読み込めないことがあります。絶対 URL の https://example.com/images/og.png の形で指定してください。
OGP タグを確認する
自分のページに、必要なタグが正しく入っているかを確認します。
最小限の例は次のとおりです。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="https://example.com/images/og.png" />
<meta name="twitter:card" content="summary_large_image" />
確認の手順は次のとおりです。
- ブラウザでページを開き、ソースの表示で
<head>内の meta タグを探す - 上の 4 種類が入っているかを確認する
- 画像の URL をブラウザに直接入力して、画像が表示されるかを確認する
- ページの
robots.txtで、Twitterbot が拒否されていないかを確認する
タグの有無を調べるチェック用のツールもあります。OGP の確認 の記事で、使えるツールと見方を紹介しています。
ソースを見るときの注意点として、JavaScript で後からタグを書き換えるサイトでは、クローラーが最初の HTML だけを読むため、書き換え後の内容が反映されません。meta タグは、サーバーから返される HTML に最初から含めてください。
キャッシュを更新する方法
タグを直しても、X が以前の情報を保持している間は、古いカードが表示されます。X はカードの情報を一定期間保持しており、一般に 1 週間ほど残ることがあるとされています。
更新を促す主な方法は次のとおりです。
- URL の末尾に、新しいクエリパラメーターを付ける。たとえば
https://example.com/pageをhttps://example.com/page?v=2にすると、X は別の URL として扱うため、新しく情報を取得する - 画像のファイル名を変える。画像の URL が変われば、新しい画像として読み込まれる
- 公式のカード検証ツールが提供されている場合は、それを使う。ただし、提供状況は変わっているため、現在の状況は X の開発者向けドキュメントで確認する
クエリパラメーターを付ける方法は、手軽で確実です。ただし、毎回 URL を変えることになるため、アクセス解析で同じページとして集計するには工夫が要ります。また、一度投稿したツイートのカードは、後から更新されない場合があります。直した後に、新しく投稿し直すと確認しやすくなります。
OGP を変更したのに反映されない場合の全般的な対処は、反映されない の記事も参考になります。
短縮 URL で表示を整える
リンク先のページを自分で編集できない場合、たとえば他社のサイトや、記事を紹介したいだけの場合は、自分でタグを直せません。この場合に便利なのが、短縮 URL 側で共有時の見え方を設定する方法です。
Boostlink では、短縮 URL に共有時のタイトル、説明、画像(OGP)を設定できます。X のクローラーが短縮 URL にアクセスしたとき、設定した情報が読み取られ、リンクカードとして表示されます。リンク先のページが変わらなくても、見え方を整えられます。
この方法には、次の利点があります。
- 他社のサイトのリンクでも、画像やタイトルを自分で決められる
- 投稿ごとに画像を差し替えて、反応を比べられる
- 画像を変えたいとき、リンク先のサイトを編集せずに済む
注意点もあります。設定した画像や説明は、リンク先の内容と合っている必要があります。内容と全く関係ない画像や文言でクリックを誘うのは、利用者を誤認させる行為で、X の規約に反する可能性があります。リンク先の内容を正しく表す表示にしてください。
短縮 URL の見え方の確認と調整後は、新しい投稿で実際にカードが出るかを確かめます。投稿の書き方については、X のリンク の記事も参考にしてください。
まとめ
リンクカードが表示されない原因は、meta タグの不足、クローラーのアクセス拒否、画像の仕様違反、キャッシュの残りのいずれかであることがほとんどです。まず twitter:card、og:title、og:description、og:image の 4 つのタグが、サーバーが返す HTML に入っているかを確認します。画像は 2:1 の絶対 URL で指定し、直した後は新しい URL を使って確かめます。自分でページを編集できない場合は、短縮 URL 側で共有時の表示を整える方法があります。
Boostlink は、短縮 URL ごとに共有時のタイトル、説明、画像を変更でき、月額 1,000円のスタンダードプランから使えます。リンクカードの見え方を整えたい方に向いています。
また、運用実績のある X アカウントを引き継いで発信を始めたい場合は、Boostshop でアカウントの購入や M&A の相談ができます。購入前には、各プラットフォームの利用規約を確認してください。