MB-Support

パソコン初心者のサポートページ

Card Validator:Twitter ツイートにYouTubeのURLを含めてもサムネイル(カード)が表示されない場合の対処法

 ツイートにWEBサイトのURLを含めると、Twitter cardに対応したWEBサイトの場合、サムネイル、タイトル、概要、URL(アドレス)を含めた特殊な表示に変更されます。YouTubeビデオのURLを貼り付けると、やはりカードが表示され、クリックするとプレイヤーが表示されビデオを再生できます(ビデオ投稿者が許可している場合に限る)。今回はYouTubeビデオのURLを貼り付けてツイートしても、テキストリンクのURLが表示される状態になりました。これを強制的にTwitterカード表示に変更します。


Twitterのツイートに WEBサイトのアドレスを入力すると、サムネイル、タイトル、概要、URL(アドレス)に変換されて表示されます。それはクリックすると入力されたURLに移動するリンクとなっており、これをTwitterではCARD(カード)と呼んでいます。YouTubeの動画ページのURLは以下。

https://www.youtube.com/watch?v=kU2ihK5GVkw
https://youtu.be/kU2ihK5GVkw

上は YouTube の通常のアドレス、下は 2009 年 12 月 21 日に導入された短縮アドレス「youtu.be」で、いずれも「kU2ihK5GVkw」が各ビデオのユニークIDとなります。これらの URL をツイートに入力すると、サムネイル、動画のタイトル、概要、YouTubeのアドレスであることを知らせる「youtube.com」が含まれたカードが表示され、それをクリックするとミニプレイヤーが表示され、YouTubeに移動することなく YouTube ビデオを再生できます。

しかし、私が投稿した YouTube アドレスが含まれるツイートは、19 時間経過してもカードが表示されず、URL のテキストリンクが表示されるだけです。クリックすれば YouTube ビデオのページに移動できますが、ツイート上で気軽に再生できません。

YouTube アドレスが含まれるツイートで、URLがテキストリンクで表示される状態。

通常、投稿したときは URL がテキストリンク状態でも、1分くらい経過して画面を更新すれば、カードが表示されます。しかし、今回のツイートは 19 時間経過しても URL のテキストリンクのままでした。

タイミング的なものかと思いますが、これを強制的に表示させるには、Twitter のカード機能を WEBサイトに対応させた時に使った「Card Validator」にアクセスします。Card Validator (カードバリデーター)とは、コードが有効かどうか確認するプログラムです。Twitter にログオンする必要があるので、普段 Twitter に閲覧するブラウザでアクセスすれば良いでしょう。

Card Validator - Twitter Developer
https://cards-dev.twitter.com/validator

これは Twitter Developer の「カードのトラブル シューティング ガイド」に記載されているプログラムです。WEBサイトでテストしていた時、サムネイルを変更した際、瞬時に反映させるためにお世話になりました。Card Validator(カードバリデーター)を開いたら、「Enter the URL of the page with the meta tags to validate(検証したいMetaデータを含むページURLを入力してください)」とあるフォームに、ツイートに入力した YouTube のアドレスを貼り付けます。「Preview Card」ボタンをクリックします。

今回、カードが表示されないツイートに貼り付けた YouTube の URL は、短縮アドレスではないので、YouTube をブラウザで開いてアドレス フォームに表示された URL をコピーして貼り付けてます。「https://www.youtube.com/watch?v=kU2ihK5GVkw」

一瞬、あるいは数秒でカードが生成されます(通信環境による)。以上で作業が完了しました。ここでカードが表示されない場合は、URL が間違っているか、そのページが Twitter のカード機能に対応していません。

「Card Validator」を閉じて、問題のツイートを表示すると、YouTube ビデオの URL が Twitterカードに変更されたのを確認できます。

ツイートに入力されたYouTube ビデオのURがCardに置き換えられている状態

これをクリックすると、Twitter で YouTube ビデオを再生できます(投稿者が許可している場合)。

Twitter CardからYouTubeを再生する様子

ここからはカードを読み込ませる作業と関係はありませんが、「Card Validator」でカードを生成した際に表示されたLogが以下です。指定したURLにメタデータを探しに行きます。

Card Validator Log

指定した YouTube のアドレスに Twitter でカードを表示するための Meta タグが記述されています。これを読み込んでカードを生成しています。 これらのタグが記載されていないWEBページは、ツイートに URL を貼り付けてもカード表示できません(たぶん)。

なぜカードが表示されなかったのか? 誕生日のサプライズビデオとして日付が変わった0:00に公開する「スケージュール」をYouTubeで設定していました。さらにTwitterのツイート作成で「予約設定」により、誕生日に日付が切り替わった0:01にツイートを公開する設定にしました。YouTube に投稿したビデオが公開されるタイミングより 1秒遅らせて、そのビデオの URL が含まれるツイートを公開するようにしたわけです。おそらく、ツイートを予約した時点で URL へメタデータを探しに行ったものの、ビデオが非公開だったため、カードが生成されないまま予約表示されたと思われます。既にビデオが公開されている場合は、ツイートの予約設定を使っても正常にカードが表示されると思われます。


過去に公開した関連ページ

Twitter:概要を表示させる方法 Twitter Cards & Open Graph protocol

参考にしたWEBサイト

カードの利用開始 | Docs | Twitter

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




戻る 一覧表示 次へ


ベイカー街 221B 間取り

ベイカー街の地図

グラナダTV版ホームズの冒険テレビシリーズに登場する『BAKER STREET』のセットは、1890 年代を想定してマンチェスターのキャッスルフィールドに建設されました。郵便局、家具店、果物屋、ワイン店、仕立屋、本屋、宝石店、床屋、不動産屋、葬儀屋などが作られ、突き当たりのリージェント・パークは、立地的に高い建物が映り込むのを防ぐ苦肉の策です。最初のラフスケッチからセット完成まで、1982 年の 1 月から 5 月とあります。いくつかのセットは屋内も作られており、221B、床屋、本屋、家具屋、煙草屋は、室内での撮影もあります。

ベイカーストリートの地図:グラナダTV『シャーロック・ホームズの冒険

Copyright © 2019 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人のご挨拶プライバシーポリシー著作権/免責事項