スマホで見つける、もっと可愛い私

【Twitterカード】使い方や表示されないときの対処法

【Twitterカード】使い方や表示されないときの対処法

Card Validatorでカードが表示されるか確認

TwitterカードのHTMLタグをサイトに埋め込んだら、次に「Card Validator」でカードが正常に表示されるか確認してみましょう。

Card Validator

では、「Card Validator」でカードが正常に表示されるか確認する時の操作手順を詳しく見ていきましょう。

まず、Twitterにログインした状態で「Card Validator」にアクセスします。そしたら、「Card URL」のテキストボックスにHTMLタグを埋め込んだ記事のURLを入力しましょう。

記事のURLを入力

URLを入力したら、「Preview Card」をクリックして下さい。

「Preview Card」をクリック

Twitterカードの設定が正しければ、右横のサンプルツイートに設定したTwitterカードが表示されます。

Twitterカードが表示

逆に、Twitterカードの設定が正しくない場合、「Unable to render Card preview」と表示されます。

サイトのURLをツイートしてみる

「Card Validator」でカードが正常に表示されることを確認したら、実際にTwitterにログインしてサイトのURLをツイートしてみて下さい。

「Card Validator」で確認した時と同じようにTwitterでもカードが表示されたら、全ての設定は完了です。

これからはTwitterカードを活用して、自分のブログやホームページを宣伝してみて下さいね。

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

上記の方法でちゃんと設定したのに、Twitterカードが表示されない場合は、以下の4つの対処法を試してみて下さい。

  • HTMLタグの入力ミスがないか確認
  • Jetpackの設定を見直す
  • Twitterの設定を見直す

では、以上の4つの対処法をそれぞれ詳しく見ていきましょう。

HTMLタグの入力ミスがないか確認

Twitterカードが正常に表示されない時は、まずサイトに埋め込んだHTMLタグに入力ミスがないか確認してみましょう。

当然のことですが、HTMLのタグが間違っていれば、ツイート上にTwitterカードは表示されません。

確認ポイント!

  • 必要なタグが抜け落ちていないか
  • タグの綴りが間違っていないか
  • 半角で入力すべき部分を全角で入力していないか
  • ユーザーネームの前に@を入れるのを忘れていないか
  • タイトルや概要などが空欄になっていないか

正しく入力したつもりでも実は間違っている…というのは結構あるので、HTMLタグをよく確認してみて下さい。

Jetpackの設定を見直す

「Jetpack」とは、ワードプレスが提供しているプラグインの詰め合わせのようなものです。

ワードプレスにこれをインストールしておくと、アクセス解析やコメント機能、セキュリティ向上機能などの30種類以上の便利な拡張機能が使えるようになります。

Jetpackの拡張機能のひとつに「Enable site accelerator」という画像の表示速度がアップする機能があります。

この設定をオンにしているのが原因でTwitterカードが表示されない場合があります。

そのため、その設定をオフに切り替えてから、Twitterカードが表示されるか確認してみましょう。

Twitterの設定を見直す

Twitterに「ツイートする画像/動画をセンシティブな内容を含むものとして設定する」という設定があります。この設定がオンになっていると、Twitterカードのアイキャッチ画像が不適切なものだと判断され、正常に表示されないことがあります。

そのため、Twitterカードのアイキャッチ画像が正常に表示されない場合は、その設定がオンになっていないか確認してみましょう。

確認方法を説明します。

アプリを開いたら、画面左上のプロフィールアイコンをタップします。

プロフィールアイコンをタップ

「設定とプライバシー」をタップしましょう。

「設定とプライバシー」をタップ

設定画面を開いたら、「プライバシーとセキュリティ」をタップして下さい。

「プライバシーとセキュリティ」をタップ

「ツイートする画像/動画をセンシティブな内容を含むものとして設定する」がオンになっていたら、右横のトグルスイッチをタップしてオフに切り替えます。

「ツイートする画像/動画をセンシティブな内容を含むものとして設定する」をオフ

そしたら、Twitterカードの画像が正常に表示されるか確認してみましょう。


この記事に関するキーワード