Xのカードが表示されない問題

HTML、CSSでサイト作成。X（旧Twitter）へのシェアボタンを作成しましたが、Xの投稿にカードが表示されず困りました・・・

↑こんな感じです

しっかりmetaタグを書いていましたが表示されず。

今回は私がやったことを紹介します。

困っている方は、是非一つずつやってみてください！

やったこと
まとめ

やったこと

簡単にやったことは

Card validator でのチェック
ファイルサイズの見直し
テストツールの使用
meta タグの見直し ☆

Card validator でのチェック

基本的なmetaタグの書き方を確認して問題ない場合、Xの方でのキャッシュ対策をします。

HTMLを更新してもX側でキャッシュが残っていることがあります。

Card validatorを使うことで、キャッシュがクリアされてHTMLや画像が更新されるような感じになります。

私はこれをやってもうまく反映されませんでしたが、これで解決する方もいると思うので、チェックしてみてください！

ファイルサイズの見直し

ファイルサイズ

ファイルサイズが大きすぎると表示されないようで、Xは5MBまでの画像をサポートしているようです。

画像の大きさ

大きさも、小さすぎると表示されないことがあるようです。

先ほど載せた画像は、サマリーカードと呼ばれるもので、metaタグに「summary」と入力している場合は、
　最小：幅144px × 高さ144px
　最大：幅4,096px × 高さ4,096px の 1：1

それより大きい大型カードは「summary_large_image」と入力し、
　推奨：1200x630px、アスペクト比1.91：1

これを参考に、サイズが大きかったり小さくないかを確認します。

私は summary_large_image で 1280 × 853 の画像でしたが表示されました！

また、JPEG、PNG、GIF しか対応していない（WEBPも可能と書いてあるものもありましたが、情報が不明確）ようなので、そこもチェックしましょう！

テストツールの使用

サイトのURLを入力すると、カードが実際に表示できているかをチェックすることができるサイトがあります。

OGP確認ツール | OGP and Twitter Card

このサイトでは、WebサイトのOGP（Open Graph Protocol）とTwitterカードを簡単に確認することが出来ます。

これを使用して確認してみるといいと思います。

私は、これで表示は確認できるのに変わりませんでした。

meta タグの見直し

ここが１番のポイントでした。

やることは

まず書き方が合っているかの確認
画像を絶対パスに！
URLを検索窓に入れて、画像がアップロードされているかチェック！（検証ツールからでもOK）
?v=1 のようなパラメータを画像のURLつけてみる
meta property=”og:image” しか書いていなかったが、Xのためのmetaタグ「meta name=”twitter:image”」も追加する
パラメータをシェアするリンクのURLにもつける

最終的な書き方

<meta property="og:title" content="タイトル">   
<meta property="og:type" content="website"> <!-- 下層ページはarticle -->
<meta property="og:description" content="説明文">
<meta property="og:url" content="https://URL.com?v=1"> <!-- パラメータ追加 -->
<meta property="og:site_name" content="サイト名">
<meta property="og:image" content="https://URL.png?v=2">　<!-- パラメータ追加 絶対パス！ -->
<meta name="twitter:image" content="https://URL.png?v=2">　<!-- パラメータ追加 絶対パス！ -->
<meta name="twitter:site" content="＠ユーザー名">
<meta name="twitter:card" content="summary_large_image"> <!-- か、summary -->
<meta name="twitter:title" content="記事タイトル">
<meta name="twitter:description" content="記事の説明">