ツイッターカードが
表示されない原因と対処法
WEBページのリンクをTweetするとき、画像つきで表示できるツイッターカード。
ただのURLの羅列より、ずっと興味を引きますよね。
でも、いざ導入したはいいけど、なんでか表示されない、なんてことも。
ここでは、SNS連携ボタンを作った時つまづいた、ツイッターカードが表示されない原因と対処法をまとめてみました。
OGPタグが正しく設定されていない
ツイッターカードを表示するには、HTMLファイルのhead部分に、SNS用のメタタグを設定する必要があります。
twitterカード専用のタグの他に、SNS全体に対応したOGPタグという書き方もあります。
ここでは、OGPタグを使用している例で見ていきます。
ツイッターカードを表示する場合は、OGPタグの他にツイッターカードのタイプを指定するタグが必要です。
画像小さめのツイッターカードなら、「<meta name="twitter:card" content="summary">」
画像大きめのツイッターカードなら、「<meta name="twitter:card" content="summary_large_image">」
と指定します。
他にもアプリ用、動画再生用のカードも用意されていますが、ウェブページの紹介では上記2つから選ぶのが一般的です。
<meta name="twitter:card" content="summary">
<meta property="og:url" content="ウェブページのURL">
<meta property="og:title" content="ウェブページのタイトル">
<meta property="og:description" content="ウェブページの概要">
<meta property="og:image" content="https://sample.com/img/sns.png">
「og:image」のパス、ファイル名が間違っている
OGPのタグはばっちり！という時でも、一度確認したいのがファイルURLです。
「og:image」で指定した画像ファイルのパスや、ファイル名が間違っていないか、一度確認してみましょう。
自分で書いているだけに、ファイル名を勘違いしていると意外と気づきにくいです。
タグもパスもちゃんと出来てるけどな～、という場合は、別の原因が考えられます。
twitter側のキャッシュ
ツイッターカードが表示されない原因で一番多い原因は、たぶん、これじゃないでしょうか。
一度ツイッターカードがない状態でツイートされた記事は、そのキャッシュがツイッター側に保存されてしまい、以降もツイッターカードが表示されない事があります。
最初の表示テストでOGPタグなどにミスがあって修正した場合などに、それでもツイッターカード出ない、という時は、これが原因の事が多いかと思います。
記事のタイトルを変えた場合などに、ツイッターカードでの反映が遅れるのも、このキャッシュが残っているからです。
ツイッター側のキャッシュをクリアできれば、最新の状態に更新できます。
公式で用意されている対処法はこちら。
Twiter公式の 検証ページで、キャッシュを最新の状態に更新する方法です。
表示を確認したいページのURLを入力して「プレビューカード」ボタンを押すと、ツイッターカードの確認ができます。
ただし、画像を変えても、画像ファイルの名前が旧画像と同じだと、更新できない場合もあるようです。
この場合は、「og:image」で指定している画像URLの末尾に「?1234567890」などのパラメータを追加すると、新しい画像としてツイッターが認識してくれる事もあるようです。「？」以降の数字は適当でOKとのこと。
これでも解決しない時は、ツイッター側のキャッシュが更新されるのを待つしかありません。
通常、1週間ほどで更新されるようです。
ここまでは、一般的なツイッターが表示されない時の原因を見てきました。
一方、サイトページにSNS連携ボタンを設置している場合で、Tweetボタンを押してもツイッターカードが表示されない時は、別の原因も考えられます。
ページURLとサイト名が繋がっている
Tweetボタンを作るときは、「aタグ」でページのURLを指定しますよね。
ここで、「href」で指定するページURL先頭にサイト名などの英文字がくっつくと、「https://」が認識されず、リンクURLにならない事があります。
リンクにならないと、ツイッターカードも表示されません。
たとえばこちら。
×「href="https://twitter.com/intent/tweet?text=記事のタイトル｜sitetitlehttps://ドメイン.com/sample.html"」
○「href="https://twitter.com/intent/tweet?text=記事のタイトル｜sitetitle https://ドメイン.com/sample.html"」
記事のタイトルは日本語だと思いますが、そのあとにサイトタイトルなどを入れている場合は要注意。
サイトタイトルが英字の場合、「https://」との間に半角スペースがないと、リンクURLとして認識されません。
「https://」の先頭には、半角スペースを入れておくと安心です。
ハッシュタグを空にするとツイッターカードが表示されない
Tweetボタンでは、「href」でページURLの他に、ハッシュタグを指定する事ができます。
「href="https://twitter.com/intent/tweet?text=記事タイトル https://sample.com/sample.html&hashtags=ハッシュタグ"」
「&hashtags=」のあとに書いたテキストが、ツイッターカードではハッシュタグとして表示されます。
ですが、このハッシュタグ指定を書いたうえで、ハッシュタグになるテキストを入れないと、ツイッターカードになりません。
この場合、ハッシュタグテキストを入れるか、ハッシュタグ指定のタグを削除すれば、ツイッターカードが表示されます。
×「href="https://twitter.com/intent/tweet?text=記事タイトル https://sample.com/sample.html&hashtags="」
○「href="https://twitter.com/intent/tweet?text=記事タイトル https://sample.com/sample.html&hashtags=ハッシュタグにしたいテキスト"」
○「href="https://twitter.com/intent/tweet?text=記事タイトル https://sample.com/sample.html"」
ハッシュタグの指定タグを使うときは、テキストを入力しておきましょう。
ツイッターカードの表示確認はテストページで
通常、ツイッターカードが表示されるまでには、少し時間がかかります。
すぐに確認したい場合は、 twitter公式の検証ページで確認してみましょう。
ツイッターカードの確認で、キャッシュに振り回されたくない！という場合は、本番ページをコピーした別のテストページなどで、表示を確認をするのもオススメです。
