今日はフェニックスのクリークカイラさんからだ。「ビデオコンテンツなどはSERPs上にリッチスニペットが自動的に生成されることがあります。例えば、Youtubeビデオをembededしてページに掲載している場合、Youtubeの動画スニペットだけでなく、掲載しているページもSERPs上にリッチに表示できるようにするには、schema.orgで定義されているvideoアトリビュートをembedしたYoutube動画にも追加した方がいいのでしょうか?もしくはYoutube自体が構造化されたデータとして対応しているので重複するような対策はしない方がよろしいですか?」
matt:はい、長い質問ありがとうございます。でも答えはVeryショートです。「YES!、ページ上の動画、たとばYoutubeなどでも、schema.orgで定義されているvideo属性は指定してください。」次ページにWhy?(なぜ?)について簡単に述べますね。
matt:Youtubeにもvideo属性のマークアップを進める理由は、schema.orgにせよ何にせよ、構造化データとしてマークアップしてもらうことでクローラーがクロールするページ上で何が起こっているのか解釈するのに役立つからです。
matt:さらに付け足すとしたら、javascriptやCSSなどについてもコメント文やマークアップでクローラーが分かるように知らせて欲しいです。なぜなら、どこからどこが、本文なのか、ソースコードを解説した文章なのかクロール時に判別する際のリソースが節約できますし。。。(この部分は意訳させていただきました。)
matt:特にビデオの再生ページなどは、embedされたJISコードや再生機能などを再現するJavascriptなどもインラインで書かれていることも多いと思いますが、video属性をマークアップしてもらうとやっぱり助かりますね。
はい、では今日の答えを繰り返しますね。「Youtubeをembedな形で掲載するケースでもschema.orgなどで定義されているvideo属性は是非マークアップしてください!
ネズミ小僧:データの構造化については、数年前からホットではありますが、ここ最近、セマンティックウェブな文脈から構造化のためのマークアップはみなさん対応するべきか(工数をかけて大規模サイトなど対応するか)迷っている方も多いのではないでしょうか?
Hummingbirdなどの改変もあり、ロングテールなデータベースサイトであっても、商品のスペック、仕様、販売元メーカー企業概要アトリビュートなどさまざまなアトリビュートがschema.orgには仕様として公開されていますので、マークアップした方がクロール後にインデックスされる際に、「何が掲載されているか?」を解釈する際に有利だということですね。
当然対話型の検索文脈を鑑みると、今後SERPs上で構造化データをリッチスニペットとして表示などされることを期待するのであれば、例えばナレッジグラフのようにですが..、ページ上に掲載する内容を構造化できるようマークアップしておいたほうがいいですよということですね。
今回は、ページにembedな形で貼り付けたYoutubeでさえも、”VideoObject"としてアトリビュートをマークアップしましょう!とおっしゃっているのですから対応は必須なのでしょうね。
schema.orgでvideoと検索するとVideoObjectのアトリビュート一覧がでます。
Thing > CreativeWork > MediaObject > VideoObject というカテゴリですね。
ちなみに、VideoObjectのマークアップ例は以下です。embedした場合は、thumbnailUrl(A thumbnail image relevant to the Thing.)などはいらないように思いますがこれを対応するとなると制作側はけっこうな手間となりそうですね。
<div itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
<h2>動画: <span itemprop="name">タイトル</span></h2>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
<meta itemprop="contentURL" content="https://www.example.com/video123.flv" />
<meta itemprop="embedURL" content="https://www.example.com/videoplayer.swf?video=123" />
<meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
<meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
<object ...> <param ...><embed type="application/x-shockwave-flash" ...> </object>
<span itemprop="description">動画の説明</span> </div>
Videoオブジェクトのマークアップ方法は、Webmasterヘルプページのこちらを参照ください。それからマークアップがちゃんとできているかは「構造化データテストツール」でも確認が可能です。