Twitterカードで開発をする際によく遭遇する問題を特定して解決する手助けのために、このトラブルシューティングガイドを作成しました。
このガイドはできるだけ便利に、多くの問題を網羅できるように努めております。 何らかの誤りがあったり、追加したほうが良いと思うことがあれば、Twitter カードディスカッションから我々に報告をお願いします。
そのエラーはおそらく以下のような表示でしょう:
これには考えられる原因がいくつがあります。:
robots.txt
で、我々があなたのカードメタデータを取得するのをブロックしている。
このケースについて切り分けるには、ここをクリックしてください。
deny from 199.59.149.*.htaccessから該当するdeny 指定を削除してください。
また、 Twitterの ASNUM は AS13414です。
それと、我々はCard validatorのエラーメッセージの改善を日々続けているので、より詳細なメッセージに更新されるまでお待ちください。
そのエラーはおそらく以下のような表示でしょう:
最もよくある原因は、twitter:image
タグで指定した画像がウェブ上で一般にアクセスできないというものです。
これはステージング環境のネットワークや内部にのみ公開されたネットワークでよく発生します。
解決するには、公開のインターネットから画像にアクセスできるようにしてください。
プライベートネットワークをCard Validatorにアクセスできるようにしたい場合は、ここをクリックしていくつかのオプションを参照してください。
そのエラーはおそらく以下のような表示でしょう:
これには考えられる原因がいくつがあります。:
それと、我々はCard validatorのエラーメッセージの改善を日々続けているので、より詳細なメッセージに更新されるまでお待ちください。
そのエラーはおそらく以下のような表示でしょう:
最もよくある原因は、twitter:app:id.*
タグに指定されたIDの頭に“id”を付けていることです。
頭のidを削除して(数字だけにして)、Card Validatorを再実行してください。
そのエラーはおそらく以下のような表示でしょう:
最もよくある原因は、ページにcontent-type META指定がないことです。以下のようにしてください
<meta content="text/html; charset=UTF-8" name="Content-Type" />
多く開発者は、自分のテスト環境/ステージング環境はアクセスを制限して実行しています。 結果として、我々のCard Validatorがこれらのサーバーにアクセスできず、カードタグが読み取れません。
以下に他の開発者と役立ったと言っている解決方法をいくつか記載します:
robots.txt
ファイルを設定して、Twitter のアクセスを許可する。
Twitter はUser-AgentとしてTwitterbot (Twitterbot/1.0のようなバージョン情報付きで)を使用しています。
このUser-Agent値を使用して、robots.txt
内で除外設定を記述できます。
User-agent: Twitterbot Disallow:
我々は、各プレイヤーカードの実装が我々のプラットフォームの公開ガイドラインに合致しているかをレビューします。 我々は迅速な対応に努めていますが、この承認プロセスは予想以上に時間がかかる場合もあります。
この承認プロセスをできるだけスムーズに素早く行うためにも、以下の確認にご協力お願いします。:
twitter:player
URL が開け、正しく再生できること。
上記をしていただければ (合わせてこのページの内容を読んでいただければ) 、あなたの承認をできるだけ素早く行われることにつながります。
あなたのプレイヤーカードが拒否された場合、再度この文書を読み、プレイヤーカードをCard Validatorでテストし、そして再申請してください。
プレイヤーカードには重要なガイドラインがあり、プレイヤーカードですべきこと、すべきでないことの項目で読むことができます。
そこで説明されていない他の問題については、以降の記事を読み進めてください。
我々はあなたのプレイヤーカードをレビューし、三週間以内に返信します。 問題が発生してテストができない場合は、 Twitter カードディスカッションで報告してください。
これには考えられる原因がいくつがあります。トラブルシューティングのための提案と方法をいくつか記載します:
robots.txt
で、我々があなたのカードメタデータを取得するのをブロックしている。
このケースについて切り分けるには、ここをクリックしてください。
開発者のメタタグから生成されたTwitter カードは、ツイートが(ウェブの)タイムライン上で展開された場合か、(ウェブか携帯からタイムラインの日付をクリックして)ツイートの個別のパーマネントリンクが閲覧された場合にのみ表示されます。
Twitterに投稿された画像、広告形式、Twitterの動作実験、といった特定の条件では、タイムライン上にカードが表示されることがあります。
メディア(写真や動画やカード)をタイムライン上に表示したい場合は、以下オプションのうちどれか一つの使用を検討してください:
あなたのドメインとホワイトリストに登録されると、我々のウェブクローラーはだいたい一週間周期であなたのタグのメタ情報を再インデックス化します。
If you’re testing and/or iterating on your Cards, it is sometimes helpful to test updates. カードの更新を表示するには、この手順に従ってください。
我々のウェブクローラーはだいたい一週間周期であなたのページのカードタグ情報を再インデックス化します。
If you’re testing and/or iterating on your Cards, it is sometimes helpful to test updates on your timeline. 以下の手順に沿って、ページに設定してあるカードのキャッシュ情報を最も新しい状態にリフレッシュできます。
Additionally, you can create multiple bit.ly URLs to allow for repeat testing.
例えば、URLの最後にダミーパラメータ(http://www.test.com/?x=test1
)やユニークハッシュ(http://www.test.com/#test1
)を付けても通常はページのコンテンツに影響はありませんが、bit.ly ではxの値に応じてユニークなURLが生成されます。
カード内で参照されている画像はURLに基づいてキャッシュされています。そのため、しばしば上記のカードをリフレッシュする技術を使用しても画像が更新されない事態が発生します。
この問題に対処するには、画像URLの末尾にパラメータを設定することで、Twitterbot はその画像を固有のURLとして扱って画像を再取得します。
例えば:
<meta name="twitter:image" content="http://example.com/myimage.jpg?4362984378" />
ウェブ環境の場合、動画形式を再生できるかどうかはユーザーが使っているブラウザに依存します。 ですから、あなたが使う予定の動画形式がブラウザ上で直接再生できるかテストすることが(Twitterタイムライン上でテストするよりも)重要です。
通常は、 twitter:player
タグと twitter:player:stream
タグにはブラウザで直接再生できる形式を設定しなければなりません。
(設定した形式がブラウザで再生できない場合は、一般的なブラウザで広く採用されている動画形式への変更を検討してください)
動画コンテンツを直接テストするには、Google Chromeの場合は以下の手順をやってみてください:
twitter:player
タグや twitter:player:stream
タグ、もしくはその両方で指定されているURLを探してコピーします。
最もよくある原因は、あなたがまだホワイトリストに承認されていないことです。
Card ValidatorであなたのサンプルURLを実行し、Request Approvalボタンをクリックしてホワイトリスト登録の処理を開始してください。
承認後、URL を再試行して、プレイヤーカードが表示されて正しく再生されることを確認してください。
これには考えられる原因がいくつがあります。トラブルシューティングのための提案と方法をいくつか記載します:
twitter:player
needs to be a simplified web page with only the player on it. Having a full website will show only part of your site in the Player Card IFRAME.
twitter:player:height
タグとtwitter:player:width
タグを含めるようにしてください。
Twitterでは、全てのコンテンツがウェブと携帯のプラットフォームで等しく動作するよう努めています。
その目的のために、我々は二つのタグ — twitter:player
と twitter:player:stream
— を作成しました。
これらのタグは動画フォーマットと実装において若干の違いがあります。
携帯動画どのように動作するかを理解するには、 プレイヤーカードのページにある携帯の項目 を参照してください。
Twitterにおける混在コンテンツとSSLセキュリティ関連のポリシーは、あなたのユーザーの安全性とセキュリティを守るために規定されています。 (さらに、 Firefox やその他ブラウザのリリース計画では、混在コンテンツを排除してコンテンツを一切表示させないようになる予定です。)
このポリシーについて簡単におさらいします:
すべきでないこと: 音声や動画の読み込み中、または再生中にアクティブ混在コンテンツのブラウザ警告を発生させる
そのために、以下にアクティブ混在コンテンツ/SSL問題の切り分け方法のサンプルを記載します。プレイヤーカードが以下のように展開されている場合:
ブラウザのアドレスバーは“secure” な状態(左の図)か、もしくはアクティブ混在コンテンツの“insecure” な状態state (右の図)になります。
良い状態 | 良くない状態 |
|
以下は Google Chrome 上で再現するための手順です。
参考までに、HTTPS エラーが発生した時にDeveloper Tools -> Network タブでは以下の画面が表示されます。
多くの場合、動画コンテンツプロバイダー (BrightCove, Ooyala, など)を利用することでこうした問題を解決できます。 コンテンツをどのように設定するかについては、まずはプロバイダーに尋ねてください。
アプリカードやアプリのディープリンクでは、ツイートした際にしばしばカードの描写に失敗して表示されることがあります。 ここにいくつかの考えられる原因とその解決方法を記載します。