oEmbed に対応してみた
目次
OGP という用語は比較的多くの人に知られていると思いますが、oEmbed という用語の知名度はそこまで高くないものと思われます。私自身、WordPress の記事中に他の記事を埋め込む事が出来るのは知っていましたが、oEmbed という単語自体は知りませんでした。
「あなたの感想ですよね」と言われかねないので、一応 Google Trends でも調べてみました。
私が想像していたよりは oEmbed の検索ボリュームは多かったですが、OGP に比べて多くても半分程度という事が分かりました。
oEmbed とは
概要
あるウェブページで外部サイトの「ウェブページ」（YouTube 動画や Instagram 投稿なども含む）の内容を埋め込む為の共通規格です。埋め込む側を consumer （コンシューマー、消費側）、YouTube 等の埋め込まれる側を provider（プロバイダー、データ提供側）と呼びます。
WordPress を良く使っている方であれば説明不要かと思いますが、WordPress の投稿画面で oEmbed に対応しているサイトの URL を貼ると、自動的にサムネイル画像なり動画プレイヤーが展開されます。
実際の使用例
WordPress は consumer としても provider としても oEmbed に対応しているのですが、このエンジニアブログは、WordPress で作成されたサイトを静的ページとして出力しているので、そもそも oEmbed に対応しているのかが不明です。とりあえず、仕事の合間に途中まで見ていた YouTube 動画を貼ってみます。私が好きなギタリストのインタビュー動画です。
↑が上手く動作しない場合も考え、もう1つ実際の使用例を挙げておきます。会社ブログ「もばらぶん」は WordPress をそのまま使っているのですが、昨日書いた以下の記事では oEmbed を使った埋め込みを使っています。
MCP で業務効率化: Backlog の issue から、要対応のものだけを抜き出して Slack 通知する – もばらぶん
スクリーンショットは以下の通りです。
技術的な仕組みの説明
仕様
仕様自体は簡素なもので、以下のページに記載があります。
実際の流れ
先ほどの YouTube 動画（provider）を例に取ります。
先ほどの動画ページには以下のタグがあります。
<link rel="alternate" type="application/json+oembed" href="https://www.youtube.com/oembed?format=json&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjaSediKTh6k" title="Steve Morse on closing the Deep Purple chapter and new instrumental album, Triangulation | Interview">
その URL https://www.youtube.com/oembed?format=json&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjaSediKTh6k を開くと、以下の JSON が返ってきます。（若干整形しています。）
{
"title": "Steve Morse on closing the Deep Purple chapter and new instrumental album, Triangulation | Interview",
"author_name": "Guitar Interactive Magazine",
"author_url": "https://www.youtube.com/@GuitarInteractive",
"type": "video",
"height": 113,
"width": 200,
"version": "1.0",
"provider_name": "YouTube",
"provider_url": "https://www.youtube.com/",
"thumbnail_height": 360,
"thumbnail_width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/jaSediKTh6k/hqdefault.jpg",
"html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/jaSediKTh6k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen title=\"Steve Morse on closing the Deep Purple chapter and new instrumental album, Triangulation | Interview\"></iframe>"
}
html プロパティーに <iframe> タグがありますが、この iframe が実際に WordPress （consumer 側）のページに埋め込まれます。
YouTube の場合は直接この URL https://www.youtube.com/embed/jaSediKTh6k?feature=oembed にブラウザでアクセスしても動画は表示されないようですが、以上が大まかな流れです。
type には4種類ある
先ほどの仕様の 2.3.4 に photo, video, link, rich の4つの種類が定義されています。YouTube であれば video です。
自分で oEmbed の provider を実装する場合、type には link 以外を選びましょう。link の場合は、WordPRess 上で単なるリンクとして表示されて、期待するような見栄えになりません。
実装の流れ
対象のページに <link rel="alternate" type="application/json+oembed" ... /> タグを入れる
タグを入れる">
oEmbed に対応したいページの <head> の中に、 <link rel="alternate" type="application/json+oembed" ... /> を入れます。
href に、次項で作成する JSON を返すエンドポイントの URL を指定します。
type は application/json+oembed だけでなくapplication/xml+oembed もあります。片方だけでも良いと思いますが、大した手間でもないので両方対応しておくと良いと思います。
JSON を返すエンドポイントを作成
必要な情報を JSON 形式で返すエンドポイントを作成します。YouTube の場合、https://www.youtube.com/oembed であり、以下のようにアクセスされます。
https://www.youtube.com/oembed?format=json&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D<動画ID>
JSON の中の html で <iframe src="次項で作成する埋め込み用ページ URL" ...></iframe> というような HTML を指定します。
実際の埋め込みコンテンツを返すページを作成
ここで実際に画像、HTML、動画プレイヤーなどを描画します。 YouTube の場合は、以下の URL がそれに該当します。
https://www.youtube.com/embed/<動画 ID>?feature=oembed
デバッグ
ツール
iframely のデバッガーが oEmbed も含めた様々な形式に対応していて便利でした。
Iframely URL Debugger – Open Graph, Twitter Cards, oEmbed
キャッシュ
WordPress など多くの consumer では oEmbed の結果をキャッシュします。provider 側を更新してもすぐにそれが反映されずに、更新前の状態がしばらく続くことがあります。キャッシュのクリアの方法などは consumer 側のマニュアル等を参照してください。
実際の結果
今開発している Bloque の以下のページで oEmbed を実装しました。
- トップページ: https://bloque.run/
- ユーザー公開ページ: https://bloque.run/to/<ユーザー名>
- 公開 Hub ページ: https://bloque.run/to/<ユーザー名>/hub/<Hub ID>
type は rich です。
まとめ
ウェブページを oEmbed provider として機能するように対応しておくと、そのページを oEmbed に対応した他のサイト（oEmbed consumer）で紹介してくれた場合に、単純なリンクだけではなく画像・動画などを表示する事ができますので、見栄えも良くなり、そのサイトからの流入が増える事が期待されます。
oEmbed に対応した主な consumer としては
- WordPress
- Medium
- Notion
- Slack
などがあります。ただ、OGP を優先するものも多いようなので、実務上は OGP と oEmbed の両方に対応しておくのが良いかと思います。
コメントを残す