Twitterカードの導入方法を解説！

設定ができたらCard Validatorでチェック

Card Validatorという公式ページからTwitterカードが「うまく設定できているか」と「どんな表示になるか」をチェックすることができます。

Card Validator

Twitter公式のサービスです。
使い方は簡単で①記事のURLを入力し、②［Preview card］をクリックするだけ。

すると「この記事をツイートするとこんな風に表示されるよ」とカードのプレビューが表示されます。

自動反映には少し時間がかかる

その記事がはじめてTwitter上で拡散されたときには、ややカードが表示されるまでに時間がかかることがあります（ちゃんと設定ができていれば、しばらくすると表示されるようになります）。もしいち早く表示させたいときにはCard ValidatorでURLを入力してプレビューすれば、すぐに反映されます。

カード情報を更新する

カード情報（画像やタイトル）はTwitter全体で保存されます。そのため、記事公開後に内容を変えても、カードにはなかなか反映されません。いち早く反映させたい場合には、さきほど同様にCard ValidatorでURLを入力します。これにより内容が更新されます。

Twitterカードが表示されないときの対処法

Card Validatorでチェックしてみましょう。もしかすると反映に時間がかかっているだけかもしれないので。
もし「No metatags found」などと表示されるのであれば、必要なタグが記入されていないのが原因です。
もし「No metatags found」などと表示されるのであれば、必要なタグが記入されていないのが原因です。
次にコードをチェック
次に実際にheadタグ内の設定コードを1つずつ見ていきましょう。

Chromeであれば、上のメニューの［表示］［開発/管理］［ソースを表示］からページのコードを確認できます。

必要なタグは書かれているか

さきほど解説した①〜⑥のタグが全て見当たるかチェックしましょう。どれかが欠けていると表示されません。

ディスクリプションは記入されているか

ディスクリプション（og:description）やタイトル（og:title）が空欄になっていると、Twitterカードは表示されません。もし、ツイート後に気づいた場合には、記事のメタディスクリプションを記入した後に、こちらの手順で更新を反映させるようにしましょう。

画像は1MB以下になっているか

指定する画像容量は1MB以下にする必要があります。また、逆に画像が小さすぎると表示されないことがあるようです。

Twitterの設定は問題ないか

Twitterの［設定とプライバシー］［プライバシーとセキュリティ］の中の「ツイートする画像/動画を不適切な内容を含むものとして設定する」にチェックが入っていると、ツイートした記事のカードの画像までうまく表示されないことがあるようです。

チェックが入っていた場合には、外した上で保存し、再ツイートしてみましょう。