お恥ずかしい事ながら、長いことTwitterに連携しているブログ記事の画像が表示されていない問題を抱えておりました。
その原因の確認方法と解消方法等をまとめてみたいと思います。
色々な方の記事等も参考にしておりますが、経験から推測している部分も多いのでご了承ください。
また、Jetpackのパブリサイズ共有の使い方等は本記事では扱いません。
Twitterに何らかの形でURLを入力しているがtwitter cardの画像が表示されないときのお話です。
見出し
そもそもどのような仕組みなのか
問題解決するうえでご認識頂いていた方がスムーズなので概要だけ拙い説明をさせていただきます。
「めんどくさい！」という方は、「原因を確認」までどうぞ。
あと、トラブルシューティングもご参考まで。
タグとtwitter
まず当サイトのトップページに以下のようなメタタグがあります。
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@hitowomusubu" />
･･･
<meta name=”twitter:image" content="https://hitowomusubu.com/images/1501206471045.png" />
twitterに投稿した際に、投稿したtweetにURLが含まれていると、twitterがURLをもとにサイトを訪れます。
その際に上記の「meta」で始まるメタタグの情報を収集し、twitter cardを作成します。
そのtwitter cardで使う画像は「name="twitter:image"」の「content」である「https://hitowomusubu.com/images/1501206471045.png」だと認識するわけです。
画像を認識するタイミング
twitterがサイトを訪れるタイミングで画像を認識します。
twitterに投稿する際に一度サイトを訪れてくれるわけですが、画像やタイトル等を変えたい場合は上記のメタタグを修正後、
「validator」
にて対象のURLを入力し「PreviewCard」すると、画像を認識してくれます。
原因と対策
Twitter Cardの確認
上記の「validator」で対象のURLをチェックしてください。
画像が表示され、ていればOKでしょう。
ここでうまくいった場合、この操作のみで解決する場合もあります。
メタタグの確認
メタタグがtweetしたURLのhtmlに含まれていない場合、twitterがサイトを訪れてもメタタグが無いのでtwitter cardを生成できません。
メタタグが正しく記載されていることを確認して下さい。
ソースの確認方法
Google Chromeであれば確認したいURLを開いて、右クリックからページのソースを表示を選択してください。
以下のようなソースコードが表示されます。
画像は
<meta name=”twitter:image" content="画像のURL"/>
になります。
メタタグが記載されていて、URLが正しいURLになっていることを確認してください。
なお、「twitter:card」「twitter:title」「twitter:description」は必須です。
<meta name=”"twitter:card" content="summary" />
<meta name="twitter:title" content="hoge" />
<meta name="twitter:description" content="hogehoge" />
メタタグの修正
ソースの確認で問題があった場合、twitter cardに必要なメタタグを加筆・修正する必要があります。
これは中々一概に修正方法を記述することが難しいのですが、
- 「All in one SEO」等のプラグインで設定する
- テーマで設定する
が一般的かと思います。
それぞれでtwitter cardのメタタグを設定する方法をご確認いただければと思います。
カスタム投稿を使われていて、作成したカスタム投稿にプラグインが効いていないなんてことは起こりやすいかもしれません。
修正後は「validator」でチェックしてください。
画像の仕様を確認
twitterが指定する画像と異なる場合、twitterがサイトを訪れても画像を取得できずtwitter cardを生成できません。
画像が正しく準備されていることを確認して下さい。
画像の仕様
- summary
- summary-large-image
縦横比1:1
144px×144px～4096px×4096px
5MBまで
JPG,PNG,WEBP,GIF
縦横比は2:1？
300px×157px～4096px×4096px
5MBまで
JPG,PNG,WEBP,GIF
画像の修正
仕様外の画像を用いていた場合は画像を修正してください。
修正後は「validator」でチェックしてください。
画像を閲覧することが可能であるか
表示されているからと言って、twitterが閲覧できるとは限りませんのでご注意ください。
- robots.txt
- .htaccess
等で画像のURLがdisallowやdenyされているとtwitterが画像を確認することができません。
wordpress等で頑張ってSEO対策されていたりすると画像が格納されている/wp-content/がrobots.txtでdisallowされていたりするかもしれません。
Search Consoleをお使いであれば、robots.txtテスターで対象の画像をチェックされることをお勧めします。
私はこれではまっていたのですが、robots.txtで画像が表示されない問題が起こりうることは知っていました。
今思えば当たり前なのですが、画像が見れない訳が無いという誤った思い込みに気が付くのに時間を要してしまいました。
閲覧権限の修正
必要なファイルを修正してください。
修正後は「validator」でチェックしてください。
それでも解決しない場合
時間が解決することもあるそうですが、私は体験していないので何ともわかりません。
twitterの巡回が何かしらキャッシュのようなものを持っていたりするんでしょうか？
終わりに
もし私と同じくtwitter cardの画像が表示されないという方がおられて、本記事で解決して頂けたら嬉しいです！
