トラブルシューティングガイド

English | 日本語

このトラブルシューティングガイドは、カードの作成中に起こりやすい問題の特定と解決に役立つように作成したものです。

できるだけ実用的で、あらゆる問題に対応できるように工夫しました。記載された内容に誤りがある場合や、追加されるべき事項がある場合は、Twitterカードに関するフォーラムからお知らせください。

  1. Card Validator
    1. 検証を行うと、”exceeded 15.seconds to pink-floyd while waiting for a response for the request, including retries (if applicable)” (リクエストへの応答待機中、pink-floyd (クローラ) の実行時間が再試行時間も含めて15秒を超えました。) というメッセージが表示される
    2. 検証を行うと、”Failed to get a proxied URL for the image.” (画像のプロキシURLを取得できません。) というメッセージが表示される
    3. 検証を行うと、”Invalid Image. This image cannot be fetched.” (無効な画像。この画像は取得できません。) というメッセージが表示される
    4. Appカードの検証を行うと、”Caught Exception in App Proxy Service…” (アプリのプロキシサービスで例外が発生しました…) というメッセージが表示される
    5. Appカードの検証を行うと、”Invalid card type.” (無効なカードタイプ) というメッセージが表示される
    6. Card Validatorがウェブサイトのテスト環境またはステージング環境にアクセスできない
  2. カードの承認
    1. カードの承認を受けるには?
    2. カードが承認されなかった。考えられる原因は?
    3. カードを申請用に送信したが、その後の流れは?
  3. タイムライン上のカードの表示
    1. ツイートに画像/動画/サマリーテキストが表示されない
    2. ツイートに古いカードが表示される
  4. ツイートに表示されるカードの更新
    1. サイトのメタタグを更新したが、ツイートに古いカードが表示される。カードを更新する方法は?
    2. カードの情報は更新されたが画像が更新されない。画像を更新する方法は?
  5. Playerカードのデバッグ
    1. Playerカードのエクスペリエンスをテストする方法は?
    2. Playerカードにサマリー情報が表示される
    3. Playerカードで動画が正しく再生されない
    4. Playerカードがモバイルで正しく再生されない
    5. PlayerカードにSSL/混合コンテンツの問題が発生している。対応策は?
  6. Appカードのデバッグ

Card Validator

検証を行うと、”exceeded 15.seconds to pink-floyd while waiting for a response for the request, including retries (if applicable)” (リクエストへの応答待機中、pink-floyd (クローラ) の実行時間が再試行時間も含めて15秒を超えました。) というメッセージが表示される

表示例

image0

このエラーには、いくつかの原因が考えられます。

  • CMSサイトがウェブクローラをブロックするように設定されている。Wordpress、Bloggerなどのホスト型CMSプロバイダーを使用している場合、Twitterサーバーからのクローラのアクセスをブロックするように意図せず設定している可能性があります。「CMS統合ガイド」を参照し、お使いのCMSサイトへのウェブクローラのアクセスを有効にしてください。

  • ウェブサイト内の``robots.txt``によって、カードのメタデータへのアクセスがブロックされている。これを診断する方法については、こちらをクリックしてください。

  • Apacheの.htaccessファイルによってリクエストが拒否されている。.htaccessファイルを開き、以下のような記述がないかを探すことで確認できます。
    deny from 199.59.149.*
    

    .htaccessファイルから、拒否に関する指示を削除してください。
  • 使用されている画像が大きすぎるため、ウェブクローラがダウンロードできない。通常、Twitterのウェブクローラがダウンロードできる画像は2MBまでです。この問題が生じた場合は、画像のサイズを大幅に縮小してからもう一度試してみてください。

  • ネットワークのラグが原因で、サイトまたは画像の取得に遅れが生じている。サーバーが遠隔地にある場合やネットワークアクセスが不安定な場合などに、ウェブクローラがメタタグや画像をダウンロードできないことがあります。必要に応じてやり直してください。

  • お使いのウェブホストが、ウェブクローラのサイトへのアクセスをブロックしている。ホスト側でIPまたはASNUMによってTwitterからのアクセスをブロックしていないか、ホストプロバイダーに問い合わせてください。以下がTwitterのIPです。

    • 199.59.148.209
    • 199.59.148.210
    • 199.59.148.211
    • 199.16.156.124
    • 199.16.156.125
    • 199.16.156.126

    また、TwitterのASNUMはAS13414です。

Card Validatorのエラーメッセージは今後改善する予定です。更新までしばらくお待ちください。

検証を行うと、”Failed to get a proxied URL for the image.” (画像のプロキシURLを取得できません。) というメッセージが表示される

表示例

image1

最も一般的な原因は、twitter:imageタグで指定した画像に外部からアクセスできない場合です。これは、ステージングネットワークや内部ネットワークでテストを行った場合によく起こります。解決するには、パブリックインターネットから画像にアクセスできることを確認してください。

Card Validatorからプライベートネットワークにアクセスできるようにするには、こちらをクリックしてオプションをご覧ください。

検証を行うと、”Invalid Image. This image cannot be fetched.” (無効な画像。この画像は取得できません。) というメッセージが表示される

表示例

image2

このエラーには、いくつかの原因が考えられます。

  • 画像のサイズが推奨サイズよりも小さい。特に、Productカードの画像のサイズは160×160ピクセル以上にすることをおすすめします。
  • ネットワークのラグが原因で、画像の取得に遅れが生じている。サーバーが遠隔地にある場合やネットワークアクセスが不安定な場合などに、ウェブクローラがメタタグや画像をダウンロードできないことがあります。必要に応じてやり直してください。

Card Validatorのエラーメッセージは今後改善する予定です。更新までしばらくお待ちください。

Appカードの検証を行うと、”Caught Exception in App Proxy Service…” (アプリのプロキシサービスで例外が発生しました…) というメッセージが表示される

表示例

image3

最も一般的な原因は、twitter:app:id.*タグで指定したIDに “id” のプレフィックスが付いている場合です。プレフィックスを削除して (IDが整数の値だけになります)、Card Validatorに再度送信してみてください。

Appカードの検証を行うと、”Invalid card type.” (無効なカードタイプ) というメッセージが表示される

表示例

image4

最も一般的な原因は、ページ内にコンテンツタイプのメタ情報が指定されていない場合です。この要素の例を以下に示します。

<meta content="text/html; charset=UTF-8" name="Content-Type" />

Card Validatorがウェブサイトのテスト環境またはステージング環境にアクセスできない

テスト環境やステージング環境へのアクセスは、多くの場合制限されています。そのため、Card Validatorはこれらのサーバーにアクセスしてカードタグを読み取ることができません。

以下は、他の開発者が役に立ったと紹介している解決方法の例です。

  • 外部からアクセス可能な別のポートからウェブサーバーを実行

  • テスト環境またはステージング環境へのポート固有のリクエストをルーティングするようにファイアウォールを設定

  • ``robots.txt``ファイルを使用して、Twitterのアクセスを許可するようにウェブサーバーを構成。TwitterではTwitterbot (Twitterbot/1.0などのバージョンがあります) のユーザーエージェントを使用して、robots.txtファイルに例外を作成できます。
    User-agent: Twitterbot
    Disallow:
    

カードの承認

カードの承認を受けるには?

Twitterでは、申請されるカードがTwitterプラットフォームの公開ガイドラインに沿っているかを確認します。迅速な対応を心がけていますが、このプロセスには時間がかかる場合があります。

このプロセスをできるだけ迅速かつスムーズに進めるために、以下の点を確認してください。

  • ウェブページに適切なカードのマークアップが追加されており、外部からそのページにアクセスできる
  • Card Validatorでサイトのテストを行った
  • [Request Approval] ボタンをクリックして申請するカードを送信した
  • Playerカードを送信する場合は、twitter:player のURLがブラウザで開かれ正しく再生される

上記の内容に加え、このページに記載されている問題をよくお読みいただくことで、迅速に承認を受けることができます。

カードが承認されなかった。考えられる原因は?

カードの申請が拒否された場合は、ドキュメントをもう一度よくお読みいただき、Card Validatorを使用してテストを行った後で再送信してください。

特に、最もガイドラインが多いPlayerカードについては、Playerカードの「すべきこと」と「してはならないこと」のセクションをよくお読みください。

上記のページに記載されていない問題については、以下をご覧ください。

カードを申請用に送信したが、その後の流れは?

Twitterチームがカードを確認して、3週間以内にご連絡します。問題が発生してテストを完了できない場合は、Twitterカードに関するフォーラムからお知らせください。

タイムライン上のカードの表示

ツイートに画像/動画/サマリーテキストが表示されない

これには、いくつかの原因が考えられます。以下は、考えられる原因とトラブルシューティングの方法です。

  • カードがまだ承認されていない。Card ValidatorでURLを実行し、[Request Approval] ボタンをクリックして承認プロセスを開始してください。
  • ウェブサイト内の``robots.txt``によって、カードのメタデータへのアクセスがブロックされている。これを診断する方法については、こちらをクリックしてください。
  • 動画の形式がサポートされていない。動画をデバッグする手順については、こちらをクリックしてください。

ツイートに古いカードが表示される

ドメインが承認されると、Twitterのウェブクローラによって、タグ内のメタ情報がほぼ毎週再インデックスされます。

カードのテストやイテレーションを行う場合は、最新の内容によるテストが役立つことがあります。こちらの手順を実行すると、最新の内容でカードを表示できます。

ツイートに表示されるカードの更新

サイトのメタタグを更新したが、ツイートに古いカードが表示される。カードを更新する方法は?

Twitterのウェブクローラは、ページ内のカードタグ情報をほぼ毎週再インデックスします。

カードのテストやイテレーションを行う場合は、タイムラインでの最新の内容によるテストが役立つことがあります。次の方法を使用すると、ページに指定されているカードの最新の内容でキャッシュを更新できます。

  1. カードのメタデータをページに追加
  2. そのページのURLをツイート
  3. ブラウザを再読み込みしてカードのコンテンツをタイムラインに表示
  4. ページ上のカードのメタデータを変更
  5. 同じURLをbit.lyから実行
  6. 新しいbit.ly URLをツイート
  7. ブラウザを再読み込みして最新の内容を表示

また、複数のbit.ly URLを作成して繰り返しテストすることもできます。たとえば、URLの最後にダミーのパラメータを追加したり (http://www.test.com/?x=test1)、独自のハッシュを追加したり (http://www.test.com/#test1) すると、通常、ページのコンテンツには影響しませんが、xの値ごとに固有のbit.ly URLが生成されます。

カードの情報は更新されたが画像が更新されない。画像を更新する方法は?

カード内で参照される画像についても、URLに基づいてキャッシュされます。そのため、上記のカードを更新する方法を実施しても画像が更新されないことがよくあります。

この問題を回避するには、画像のURLの最後にパラメータを追加することで、Twitterbotがその画像を固有のURLとして扱い、画像を再取得するようになります。

<meta name="twitter:image:src" content="http://example.com/myimage.jpg?4362984378" />


Playerカードのデバッグ

Playerカードのエクスペリエンスをテストする方法は?

Twitterのウェブエクスペリエンスに関しては、幅広い動画形式の再生にブラウザの機能を利用します。そのため、(Twitterのタイムラインでテストを行う前に) ブラウザで動画のストリームを直接再生できるかどうかをテストすることが重要です。

通常、twitter:playerタグとtwitter:player:streamの両方に、ブラウザで直接再生できるURLを指定する必要があります。両方で再生できない場合は、一般的なブラウザで幅広くサポートされている別の動画形式の使用を検討することをおすすめします)。

動画のコンテンツをブラウザで直接テストするには、Google Chromeで次の手順をお試しください。

  1. ブラウザウィンドウを開く
  2. Twitterカードのタグを含むURLをアドレスバーに入力
  3. ページのソースを表示 (ツールバーにある [Google Chromeの設定] アイコンをクリックし、[その他のツール] ->[ソースを表示] と選択)
  4. twitter:playerタグとtwitter:player:streamタグで指定されているURLを探してコピー
  5. コピーしたURLをブラウザのアドレスバーに貼り付け

Playerカードにサマリー情報が表示される

最も一般的な原因は、カードがまだ承認されていない場合です。

Card ValidatorでURLを実行し、[Request Approval] ボタンをクリックして承認プロセスを開始してください。

image5

承認後、URLにもう一度アクセスしてPlayerカードが正しく表示および再生されることを確認します。

Playerカードで動画が正しく再生されない

これには、いくつかの原因が考えられます。以下は、考えられる原因とトラブルシューティングの方法です。

  • 指定されたURLが、iframeに対応するページではなく完全なウェブサイトにリンクされている。twitter:playerの値は、プレーヤーだけが存在する簡略化されたウェブページである必要があります。完全なウェブサイトを指定すると、Playerカードのiframeにはサイトの一部しか表示されません。
  • Playerカードのサイズが指定されていない。カードタグにtwitter:player:heightタグとtwitter:player:widthタグを必ず含めてください。
  • 動画の形式がサポートされていない。動画をデバッグする手順については、こちらをクリックしてください。

Playerカードがモバイルで正しく再生されない

Twitterでは、すべてのコンテンツがウェブプラットフォームとモバイルプラットフォームで同じように機能するように努めています。

これを可能にするために、twitter:playertwitter:player:streamという2つのタグを作成しました。これらは動画形式と実装方法が若干異なります。

Playerカードページのモバイルセクションをご覧いただき、モバイルで動画を再生する方法を理解してください。

PlayerカードにSSL/混合コンテンツの問題が発生している。対応策は?

混合コンテンツとSSLセキュリティに関するTwitterのポリシーは、オーディエンスの安全とセキュリティを保護するためのものです。(さらに、Firefoxおよびその他のブラウザの今後のリリースではこの動作が廃止され、コンテンツがまったく表示されなくなる予定です。)

以下は、ポリシーの抜粋です。

音声または動画のロードや再生時に、ブラウザに混合コンテンツの警告が表示されないようにしてください。

以下に、混合コンテンツ/SSLの問題を診断する方法を示します。Playerカードを展開すると次のようになります。

image6

ブラウザのアドレスバーで、”安全な” 状態 (左) か、混合コンテンツが存在する “安全でない” 状態 (右) かを判断できます。

安全 安全でない
image10
image11
image12

以下は、Google Chromeで再現する手順です。

ブラウザウィンドウを開き、混合コンテンツが存在するツイートのTwitter URLを入力 ブラウザのアドレスバーに “鍵” のアイコンが表示され、安全なブラウジング環境であることを確認 ツールバーにある [Google Chromeの設定] アイコンをクリックし、[その他のツール] ->[デベロッパーツール] と選択 下部のペインで [Network] タブをクリック ツイートの下にある [画像/動画をさらに表示] リンクをクリックしてTwitterカードを表示 鍵のアイコンがそのまま表示されていれば、安全なブラウジング環境が維持されている 鍵のアイコンが開いた鍵のアイコンに変わる場合、安全な環境は維持されているが混合コンテンツが存在する 鍵のアイコンの上に赤い ‘X’ が表示される場合、混合コンテンツ/SSLの問題が存在する。この状態のPlayerカードは承認されません。

  1. [Network] ペインで、エラーアイコン (image13) をクリックしてスクリプトロードエラーを表示
  2. [Network] ペインで、警告アイコンとメッセージXXXが表示されたスクリプトまたはコンテンツを探す
  3. これらのスクリプトはカードのセキュリティに違反しているため、HTTPSへの変更が必要

以下は、[デベロッパーツール] ->[Network] タブに表示されるHTTPSエラーの例です。

image14

多くの場合、動画コンテンツのプロバイダー (BrightCoveやOoyalaなど) に問い合わせることでこれらの問題を解決できます。コンテンツを再構成する方法については、まずプロバイダーにお問い合わせください。

Appカードのデバッグ

Appカードやアプリのディープリンクコードは、ツイート内で正しく表示されないことがよくあります。以下に、考えられる原因と解決方法をいくつか紹介します。

  • カードのURLがCard Validatorで検証されていない。こちらでカードのテストと検証を行ってください。
  • Apple App Storeにアップロードされた画像が2MBを超えている。この場合、Card Validatorでカードが正しく検証されません。検証が行われても、今度はツイート内でカードが作成されません。小さいサイズの画像をAppleにアップロードする必要があります (App Storeにアプリを再送信して承認を受ける必要があるかもしれません)。