TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

Twitterカードに画像が表示されない!

こんにちは、ディレクターのKです。

2019年は年号と一緒に12月の祝日も変わるんですかね?
だいたい年末は忙しいので助かるといえば助かるのですが・・・

さて、最近お仕事でtwitterカードがうまく表示できないことがありました。
その時の原因と解決方法を書きたいと思います。

表示や設定方法はいろんなところで解説されているので割愛しますが、原因はパスの書き方でした。
下記のイメージのように現在の設定では、カード用の画像が表示させていません。

Twitterカード

そのときのog:imageの設定は↓のように相対パスで記述しています。

<meta property="og:image" content="/img/xxx.png">

しかし、ファイルの参照をさせるときは絶対パスで記述しないとTwitter側で参照できないようです。
参考:公式FAQ

そこで下記のようにtwitterカードに設定したい画像のパスを↓のように絶対パスに直しました。

<meta property="og:image" content="https://xxx.com/img/xxx.png"><

するとうまく表示されました。

twitterカード表示成功例

Twitterに限ったことじゃないですが、ウェブサイトのシェアする際に画像がうまく表示されないときは
og:imageのパスの記述を見直してみてください。
 
そういえばコーポレートの方できてないな・・・