ツイートの埋め込みに元ソースへのリンクを設定するようにした

投稿

YouTube や Google マップなどの外部サービスを <iframe> で埋め込む際、 <a> 要素で元ソースへのリンクが設定されているとユーザーとしては嬉しいものです。例えばこんな感じで。

<figure>
  <iframe src="https://www.youtube.com/embed/{動画 ID}" title="YouTube video player"></iframe>
  <figcaption>
    <a href="https://www.youtube.com/watch?v={動画 ID}">{動画タイトル}</a>
  </figcaption>
</figure>

これの何が嬉しいかというと、まず単純に埋め込みの狭いエリアではなく画面全体を活用して大きく見たいケースに対して選択肢を与えられるというメリットがあります。

もう一つの理由として、埋め込んだサービスが終了してしまった場合、あるいは主にユーザー投稿型サービスにおいてコンテンツが削除された場合にも元ソースへたどり着けるようにすること、すなわち埋め込みが無効になった場合の出典に対する動線の確保という面が挙げられます。

例えば YouTube の場合、動画が削除されたり非公開設定にされてしまったりすることがありますが、そのような動画を埋め込んでいた際、ユーザーが再生ボタンを押すと非公開である旨のメッセージが表示されますが、その状態になると元動画のページを開くことができなくなります。右下の YouTube アイコン部分はリンクになっていますが、 YouTube トップページに遷移してしまうからです。

サムネイル画像
埋め込んだ YouTube 動画が非公開にされた様子。右下の YouTube アイコンのリンク先 URL は https://www.youtube.com/ である。オリジナル画像

これでは、削除された動画が誰がアップした何の作品だったのかというデータすら分からない状況でちょっと困ります。一方で、 <a> 要素でリンクされていれば、消された動画そのものは再生できないにしても、その URL を Google や Twitter で検索すれば動画のタイトルやアップロードしたアカウント、公開された日時などが分かることもあります。

とくに動画は無許可の転載がまかり通っている現状、アップロードされた日時とアカウントの情報は重要でしょう。メタデータさえあれば映像研究などに活用できる余地も残りますから、出典の URL を示すことは大事だと思います。そういうわけで、このブログでは外部サービスの埋め込みの際は基本的に <a> 要素で元ソースへのリンクを張るようにしています。

一方、ツイートの埋め込みは単純な <iframe> ではなく、コードとしてはこうなっています。

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">{ツイート本文} <a href="https://t.co/XXX">https://t.co/XXX</a></p>
  &mdash; {ユーザー名} <a href="https://twitter.com/{ユーザー ID}/status/{ツイート ID}">{投稿日時}</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを Web ページ内に埋め込むことで、 widgets.js によって <blockquote> が <iframe> に差し替わり、埋め込みツイートが表示されるようになります。

このコードが優れている点は埋め込むツイートの本文や元ソースのリンクが <blockquote> 内に HTML として書かれていることです。これはすなわち、以下に示すように何らかの理由で widgets.js のスクリプトが動作しなくても最低限のフォールバックが確保されていることを意味します。

  • スクリプト無効環境
  • フレーム無効環境
  • ドメインをまたいだ通信をブロックしている環境
  • 通信エラー等で widgets.js が正常に動かない場合

なので、ツイートの埋め込みに限っては <a> 要素でリンクを張る必要はない……と思っていました。

ところが盲点があり、 Safari のリーダーモードで閲覧するとツイートがまったく表示されないではありませんか。 Safari のリーダーモードはフレームの表示自体には対応しているので、どういった理由でツイートが表示されないのかその原因はよく分かりません。しかしリーダーモードを抜きにしても、理屈上「スクリプトが有効でフレームが無効」な環境ではツイートが表示されなくてもおかしくはありません。

やはり外部サービスの埋め込みでは、埋め込みコードの方式に関わらず <a> 要素によるリンクの設定が必要だと痛感し、このブログでもツイートの埋め込みにリンクを追加するように改修した次第です。