PR

サイトにVideoタグを入れる方法

Videoタグの設置例試してみませんか?

WEBサイトを運営している皆さんは自サイトにVideoタグを設置して動画を公開されていますか?

設置したいけど、具体的にどうやって設置したらいいかわからないという方も多いと思いますので、私が初めてVideoタグを設置した際の方法を紹介しようと思います。

スポンサードサーチ

とりあえずVideoタグを設置してみよう

HTML5のVideoタグ設置後に重要となるgoogle検索の動画検索にインデックスされるために必要なschema.orgのVideoObjectの記載に方法について解説します。あくまでも個人実践のためインデックスの確約はできませんので、ご了承ください。

Videoタグ設置サンプル

schema.orgのVideoObjectを考慮した最低限のvideoタグのコードは以下。

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <meta itemprop="name" content="(タイトル)">
  <meta itemprop="thumbnailUrl" content="(動画のサムネイル)">
  <meta itemprop="contentURL" content="(動画ファイル名)">
  <meta itemprop="uploadDate" content="(アップロード日)">
  <meta itemprop="description" content="(動画の説明)">
  <video controls poster="(動画のサムネイル)" >
    <source src="(動画ファイル名)">
  </video>
</div>

これで、動画サイトマップを送信しなくても、動画にクローラーが巡回してくれる筈です。後はgoogle様にインデックスしてもらうのを祈るだけです。

HTMLやVideoタグについて勉強したい

schema.orgの公式サイトはこちら

VideoObjectに関する詳細を詳しく知りたい方は以下からどうぞ!(英語サイトです)

VideoObject - Schema.org Type
Schema.org Type: VideoObject - A video file.

HTMLやVideoタグを学ぶ際の参考書

 

タイトルとURLをコピーしました