X のツイート内でスライドをめくる Player Card を自サイトで試したら、普通のリンクカードになった

未分類

X のツイート内でスライドをめくる Player Card を自サイトで試したら、普通のリンクカードになった

X(旧 Twitter)のタイムラインで、SlideShare のリンクを含む投稿を見かけた。ツイートの中にスライドが埋め込まれていて、‹ 2 / 133 › の矢印でその場でページを送れる。外のサイトに飛ばずにスライドを読めるので、同じことを自分のサイト(log.eurekapu.com)でもやりたくなった。

結論から書くと、メタタグを同じ形で出しても、X は埋め込みにせず普通のリンクカードで表示した。以下、仕組みの確認、作ったもの、結果の順に残す。

仕組みは Player Card という iframe の埋め込み

SlideShare のスライドページを、X のクローラーと同じ名乗り(User-Agent Twitterbot/1.0)で取得すると、次のメタタグが返ってくる(2026-09-23 に実測)。

<meta name="twitter:card"          content="player">
<meta name="twitter:player"        content="https://www.slideshare.net/slideshow/embed_code/key/y2wg0bRAnNephJ">
<meta name="twitter:player:width"  content="597">
<meta name="twitter:player:height" content="486">
<meta name="twitter:image"         content="https://cdn.slidesharecdn.com/...thumbnail.jpg">

X はツイートに含まれる URL を読みに行き、twitter:cardplayer なら、普通のリンクカードの代わりに埋め込み枠を作る。枠の中には twitter:player の URL が、指定されたサイズの iframe で読み込まれる。ページ送りの矢印も、全画面ボタンも、X の部品ではなく SlideShare の埋め込み用ビューアだ。X は枠を用意しているだけである。

YouTube の動画や Spotify の曲がタイムライン上で再生できるのも、同じ Player Card の仕組みである。

作ったもの

Nuxt のページを2枚作った。

ページ役割
/blog/player-card-testX に貼る URL。Player Card のメタタグを出す
/embed/player-card-testX が iframe で読み込む埋め込み専用ページ。5枚のスライドとページ送りのバー

埋め込み専用ページは、サイトのヘッダーやフローティングボタンを出さず、画面いっぱいにスライドと操作バーだけを置いた。X が枠を作ったときに見えるはずの画面はこうなる(640×400 で表示)。

埋め込み専用ページを640×400で表示した画面。「仕組みは iframe」という見出しのスライドと、下に「log.eurekapu.com で見る」リンク、前後の矢印、2 / 5 のページ番号、全画面ボタンが並ぶ

X に貼るページには、SlideShare と同じ形のメタタグを出した。本番で配信されている実物は次のとおり。

<meta name="twitter:card"          content="player">
<meta name="twitter:player"        content="https://log.eurekapu.com/embed/player-card-test">
<meta name="twitter:player:width"  content="640">
<meta name="twitter:player:height" content="400">
<meta name="twitter:image"         content="https://log.eurekapu.com/og/pages/general/player-card-test.png?...">

Nuxt では useHead でこの5つを出している。配信された HTML に twitter:card が1つだけ(player)であることも確かめた。

結果: 埋め込みにはならず、小さなリンクカードになった

本番に出したあと、URL を X に投稿した。表示はこうなった。

X に投稿した結果。ツイートの下に、左側が汎用のアイコン、右側に log.eurekapu.com とタイトルと説明文が並ぶ小さなリンクカードが表示され、スライドの埋め込みは出ていない
  • スライドの埋め込み枠は出ず、左に四角いサムネイル、右にタイトルと説明文が並ぶ小さなリンクカードになった
  • タイトル(twitter:title)と説明文(twitter:description)は読まれている。つまり X のクローラーはページに来ていて、メタタグも読んでいる
  • サムネイルは twitter:image の画像ではなく、汎用のアイコンだった。この画像の URL は本番で HTTP 200・PNG を返すことを確認している。X がなぜ画像を使わなかったのかは分かっていない

なぜ埋め込みにならなかったのか

X は、Player Card をどのドメインにも開放しているわけではない。私の理解では、以前は Card Validator からドメインごとに申請し、承認されたドメインだけが Player Card として表示されていた。その Card Validator は2022年ごろに廃止されている。いまは新しいドメインが承認を受ける道筋が、ほぼ無いと思われる。SlideShare や YouTube は、その許可を持っている側だ。

今回の結果は、「メタタグは読まれたが、許可が無いので Player Card として扱われなかった」と考えると筋が通る。ただし、X の公式な説明で確かめたわけではなく、推測である。

もう1つ、切り分けていない要因がある。twitter:player に書いた /embed/player-card-test は、本番では末尾にスラッシュを付けた /embed/player-card-test/ へ 308 でリダイレクトされる。X がリダイレクトを嫌う可能性はゼロではない。とはいえ、ドメインの許可が無いなら、URL を直しても結果は変わらないはずだ。

自分のスライドをツイート内でめくらせたいなら

自サイトのメタタグだけでは実現できなかった。ツイート内でページ送りさせたいなら、スライドを SlideShare のような許可済みのサービスに上げて、そのリンクを投稿するのが現実的な方法である。

自サイトに置いたスライドは、X ではリンクカードとして表示される。読者にはクリックして テストページ に来てもらうことになる。テストページには同じ埋め込み画面を iframe で置いてあるので、そこでページ送りを試せる。

#X#Twitter#Twitter Card#OGP#Nuxt