最近、「がとらぼ」の中の人はウェブの構造化データにハマッている。(JSON-LDね)
ウェブの記事の本文を明示するArticle構造化データやパンくずリストのBreadcrumbList構造化データ、製品情報を明示するProduct構造化データは既にWordPressのテンプレートやカタログシステム含め「完全自動化」で実装した。
で、「がとらぼ」の中の人がどちらかというと苦手としている動画についても数が多くはないもののウェブサイトに貼っているのでこれの構造化データにも着手したいと考えた。が、数が少ないとはいえ片手の指を折り曲げて数えられる程度というわけではないので全て手動で作成するというのは面倒そう。そこで「半自動化」にしたいと思った。
「がとらぼ」の中の人は大昔に作成した動画を除いてはほぼYouTubeにアップロードして、そのYouTube動画をブログ等に貼っているので動画というのはほぼYouTube。ウェブサイトに貼る他人の動画をも(ほぼ?)全てYouTubeのものなので基本的にはYouTubeの動画のメタ情報取得して構造化データに変換するツールを作れば良さそう。Google公式のYouTube Data APIが提供されているのでYouTube動画のページURLか動画IDからとても簡単に動画情報を取得できる。あとはその情報を加工してVideoObject構造化データ(動画構造化データ)を作成するだけ。この部分だけスクリプトでやらせれば良いかなと。
これは非常に簡単ということもあって自分でもびっくりするほどサクッとできた。
そしたら、なんか調子に乗ってしまいウェブ用ツールに改造。数個のオプションも追加して1週間ほどで公開の運びとなりました。
2022年8月25日時点では、YouTubeの場合は動画URLは動画ファイルURL(実体)ではなくウェブページへの組み込み用のURLを使うのが適切という理解なので動画ファイルURLを示す「contentUrl」は「使わない」、ヴェブページにYouTubeの動画を組み込む際に使用する https://www.youtube.com/embed/XXXXXXXXXXX?feature=oembed 形式のURLを「embedUrl」で示すようにしている。「がとらぼ」の中の人は「これで正しいよね？」と思っているが、イマイチ確信には至っていない。もしも「いやそれ違うよ」とか「より適切なのはこうよ」というのがあればご教示ください。
公開場所: 悪いインターネット YouTube動画構造化データ作成支援
例によっていつものように「悪いインターネット」に置いています。
YouTube Data APIの使用制限が厳しくて1日に利用できる回数がかなり少ないです。そこで、このウェブツールは1IPアドレスから24時間で20回までの制限とさせていただきます。「悪いインターネット」はアクセスが少ないとはいえ1日「数人」が数回ずつ使用するだけで制限を迎える計算です。
使えないよということであったら恐らくYouTube Data APIの使用制限なのでゴメンナサイ。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "ダイソーの300円USBスピーカーでコンクリートスピーカーを作る",
"description": "「ダイソーの300円USBスピーカーでコンクリートスピーカーを作る」https://gato.intaa.net/archives/24736 の関連動画です。\nダイソーの300円スピーカーを片側約2.4kg(両側約5kg)のモルタルで作ったエンクロージャに埋め込みました。パッシブラジエーターを入れたので空気室は狭め(片側200ml)で完全密閉。\n硬くしっかりした箱鳴りの無いスピーカーに仕上げました。\nこの動画は音の変化を聴き比べようという試みでしたが、マイクがおもちゃなので動画ではあまり違いがよく判らず。(耳で直接聴くと大違い)\n一応、比較用に似たようなスピーカーを搭載したロジクールのZ120BWも。ただし、耳分量でこんなもんだろうと音量を決めたら小さかったみたい。\nコンクリートスピーカーのアンプは改造前と同じダイソースピーカー内蔵の低音が出ないアンプで、音量設定も改造前と同じですが音量がだいぶ大きくなった様に聞こえます。これはパッシブラジエーターのよるものと思われます。中高音はキビキビ、悪く言えば硬い感じ。低音は僅かに改善するも基本的には出ていない。元のペラペラエンクロージャで変な音が鳴っていたのがなくなってしっかり鳴るようになったので総合的には大改善。後日、アンプを変えて試す予定。プラス一回り大きなスピーカーも作成予定。",
"thumbnailUrl": [
"https://i.ytimg.com/vi/Q2zcPxCn3vg/default.jpg",
"https://i.ytimg.com/vi/Q2zcPxCn3vg/mqdefault.jpg",
"https://i.ytimg.com/vi/Q2zcPxCn3vg/hqdefault.jpg",
"https://i.ytimg.com/vi/Q2zcPxCn3vg/sddefault.jpg",
"https://i.ytimg.com/vi/Q2zcPxCn3vg/maxresdefault.jpg"
],
"uploadDate": "2020-05-22T14:34:14Z",
"duration": "PT2M46S",
"embedUrl": "https://www.youtube.com/embed/Q2zcPxCn3vg?feature=oembed"
}
</script>
人が読みやすいようにJSONエンコード無し、整形あり、「/」をエスケープしないという3つのオプションをオンだとこんな感じ。こちらの方が良いというならこれをウェブサイトに貼っても問題ないみたい。少なくともGoogleさんのリッチリザルト テストはこれでも通る。
<script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"VideoObject","name":"\u30c0\u30a4\u30bd\u30fc\u306e300\u5186USB\u30b9\u30d4\u30fc\u30ab\u30fc\u3067\u30b3\u30f3\u30af\u30ea\u30fc\u30c8\u30b9\u30d4\u30fc\u30ab\u30fc\u3092\u4f5c\u308b","description":"\u300c\u30c0\u30a4\u30bd\u30fc\u306e300\u5186USB\u30b9\u30d4\u30fc\u30ab\u30fc\u3067\u30b3\u30f3\u30af\u30ea\u30fc\u30c8\u30b9\u30d4\u30fc\u30ab\u30fc\u3092\u4f5c\u308b\u300dhttps:\/\/gato.intaa.net\/archives\/24736\u3000\u306e\u95a2\u9023\u52d5\u753b\u3067\u3059\u3002\n\u30c0\u30a4\u30bd\u30fc\u306e300\u5186\u30b9\u30d4\u30fc\u30ab\u30fc\u3092\u7247\u5074\u7d042.4kg(\u4e21\u5074\u7d045kg)\u306e\u30e2\u30eb\u30bf\u30eb\u3067\u4f5c\u3063\u305f\u30a8\u30f3\u30af\u30ed\u30fc\u30b8\u30e3\u306b\u57cb\u3081\u8fbc\u307f\u307e\u3057\u305f\u3002\u30d1\u30c3\u30b7\u30d6\u30e9\u30b8\u30a8\u30fc\u30bf\u30fc\u3092\u5165\u308c\u305f\u306e\u3067\u7a7a\u6c17\u5ba4\u306f\u72ed\u3081(\u7247\u5074200ml)\u3067\u5b8c\u5168\u5bc6\u9589\u3002\n\u786c\u304f\u3057\u3063\u304b\u308a\u3057\u305f\u7bb1\u9cf4\u308a\u306e\u7121\u3044\u30b9\u30d4\u30fc\u30ab\u30fc\u306b\u4ed5\u4e0a\u3052\u307e\u3057\u305f\u3002\n\u3053\u306e\u52d5\u753b\u306f\u97f3\u306e\u5909\u5316\u3092\u8074\u304d\u6bd4\u3079\u3088\u3046\u3068\u3044\u3046\u8a66\u307f\u3067\u3057\u305f\u304c\u3001\u30de\u30a4\u30af\u304c\u304a\u3082\u3061\u3083\u306a\u306e\u3067\u52d5\u753b\u3067\u306f\u3042\u307e\u308a\u9055\u3044\u304c\u3088\u304f\u5224\u3089\u305a\u3002(\u8033\u3067\u76f4\u63a5\u8074\u304f\u3068\u5927\u9055\u3044)\n\u4e00\u5fdc\u3001\u6bd4\u8f03\u7528\u306b\u4f3c\u305f\u3088\u3046\u306a\u30b9\u30d4\u30fc\u30ab\u30fc\u3092\u642d\u8f09\u3057\u305f\u30ed\u30b8\u30af\u30fc\u30eb\u306eZ120BW\u3082\u3002\u305f\u3060\u3057\u3001\u8033\u5206\u91cf\u3067\u3053\u3093\u306a\u3082\u3093\u3060\u308d\u3046\u3068\u97f3\u91cf\u3092\u6c7a\u3081\u305f\u3089\u5c0f\u3055\u304b\u3063\u305f\u307f\u305f\u3044\u3002\n\u30b3\u30f3\u30af\u30ea\u30fc\u30c8\u30b9\u30d4\u30fc\u30ab\u30fc\u306e\u30a2\u30f3\u30d7\u306f\u6539\u9020\u524d\u3068\u540c\u3058\u30c0\u30a4\u30bd\u30fc\u30b9\u30d4\u30fc\u30ab\u30fc\u5185\u8535\u306e\u4f4e\u97f3\u304c\u51fa\u306a\u3044\u30a2\u30f3\u30d7\u3067\u3001\u97f3\u91cf\u8a2d\u5b9a\u3082\u6539\u9020\u524d\u3068\u540c\u3058\u3067\u3059\u304c\u97f3\u91cf\u304c\u3060\u3044\u3076\u5927\u304d\u304f\u306a\u3063\u305f\u69d8\u306b\u805e\u3053\u3048\u307e\u3059\u3002\u3053\u308c\u306f\u30d1\u30c3\u30b7\u30d6\u30e9\u30b8\u30a8\u30fc\u30bf\u30fc\u306e\u3088\u308b\u3082\u306e\u3068\u601d\u308f\u308c\u307e\u3059\u3002\u4e2d\u9ad8\u97f3\u306f\u30ad\u30d3\u30ad\u30d3\u3001\u60aa\u304f\u8a00\u3048\u3070\u786c\u3044\u611f\u3058\u3002\u4f4e\u97f3\u306f\u50c5\u304b\u306b\u6539\u5584\u3059\u308b\u3082\u57fa\u672c\u7684\u306b\u306f\u51fa\u3066\u3044\u306a\u3044\u3002\u5143\u306e\u30da\u30e9\u30da\u30e9\u30a8\u30f3\u30af\u30ed\u30fc\u30b8\u30e3\u3067\u5909\u306a\u97f3\u304c\u9cf4\u3063\u3066\u3044\u305f\u306e\u304c\u306a\u304f\u306a\u3063\u3066\u3057\u3063\u304b\u308a\u9cf4\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u3067\u7dcf\u5408\u7684\u306b\u306f\u5927\u6539\u5584\u3002\u5f8c\u65e5\u3001\u30a2\u30f3\u30d7\u3092\u5909\u3048\u3066\u8a66\u3059\u4e88\u5b9a\u3002\u30d7\u30e9\u30b9\u4e00\u56de\u308a\u5927\u304d\u306a\u30b9\u30d4\u30fc\u30ab\u30fc\u3082\u4f5c\u6210\u4e88\u5b9a\u3002","thumbnailUrl":["https:\/\/i.ytimg.com\/vi\/Q2zcPxCn3vg\/default.jpg","https:\/\/i.ytimg.com\/vi\/Q2zcPxCn3vg\/mqdefault.jpg","https:\/\/i.ytimg.com\/vi\/Q2zcPxCn3vg\/hqdefault.jpg","https:\/\/i.ytimg.com\/vi\/Q2zcPxCn3vg\/sddefault.jpg","https:\/\/i.ytimg.com\/vi\/Q2zcPxCn3vg\/maxresdefault.jpg"],"uploadDate":"2020-05-22T14:34:14Z","duration":"PT2M46S","embedUrl":"https:\/\/www.youtube.com\/embed\/Q2zcPxCn3vg?feature=oembed"}</script>
オプション(3つ):オフで出力した。数行に見えるけど、実際は1行。日本語は \uXXXX みたいな文字コードに変換されてるので理解できないものになってるけどウェブサイトに貼るのはこんな感じ。
