「動画をWebサイトに埋め込みたいけれど、HTMLのvideoタグってどう書くの？」
そんな初心者の疑問に応えるべく、本記事ではvideoタグの基本構文からSEOを意識した実践的な使い方まで丁寧に解説します。
さらに、schema.orgのVideoObjectを使ってGoogleに動画を正しく認識させ、検索結果に動画を表示させるテクニックも紹介。
これを読めば、あなたの動画コンテンツがより多くのユーザーに届くようになります！
はじめに：HTMLで動画を埋め込むには？
あなたのWebサイトに動画を埋め込んで、情報をより直感的に伝えたいと思ったことはありませんか？
そんなときに使えるのが、HTML5で導入された<video>タグです。
このタグを使えば、YouTubeの埋め込みに頼らず、自分のサーバーから直接動画を配信できます。
しかし、単に動画を表示するだけでなく、SEO（検索エンジン最適化）の観点でも工夫が必要です。
特に重要なのが、Googleに動画コンテンツを正しく認識させるための構造化データ（schema.orgのVideoObject）の記述です。
本記事では、videoタグの基本から、SEOを意識した設置方法まで、初心者にもわかりやすく解説していきます。
スポンサードサーチ
Videoタグの基本構文と使い方
Videoタグの基本構造
<video>タグは、HTML5で導入された動画再生用のタグです。
最低限、<video>と<source>を使うことで、動画をWebページ上に表示・再生できます。
<video controls>
<source src="sample.mp4" type="video/mp4">
お使いのブラウザはvideoタグに対応していません。
</video>
controls属性をつけると、再生・停止ボタンなどのUIが表示されます。
controls / autoplay / loopなど主要属性
- controls：再生コントロールを表示
- autoplay：ページ読み込み時に自動再生
- loop：動画をループ再生
- muted：音声をミュート
- poster：再生前に表示するサムネイル画像
videoタグで使用できるファイル形式
videoタグは複数の動画フォーマットに対応していますが、特に以下3つが代表的です：
- MP4（.mp4）：ほぼすべてのブラウザでサポートされており推奨
- WebM（.webm）：ファイルサイズが軽く、特にChromeとの相性が良い
- Ogg（.ogv）：Firefoxなど一部ブラウザ向け
実践：Videoタグの設置方法
最もシンプルなvideoタグ
まずは最小構成のvideoタグから始めてみましょう。
以下のコードをHTMLに貼り付けるだけで、自サイトに動画が埋め込まれます。
<video controls>
<source src="movie.mp4" type="video/mp4">
お使いのブラウザはvideoタグに対応していません。
</video>
複数ソース対応のタグ例
ブラウザによって対応する動画形式が異なるため、複数ソースを指定するとより多くのユーザーに対応できます。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
お使いのブラウザはvideoタグに対応していません。
</video>
posterでサムネイル画像を設定
poster属性を使えば、動画の読み込み前にサムネイル画像を表示できます。
視覚的にも訴求力が高まり、クリック率の向上が期待できます。
<video controls poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
スポンサードサーチ
SEO対策：schema.orgのVideoObjectを使う
schema.orgとは？初心者向け解説
schema.orgは、GoogleやBingなどの検索エンジンがWebページの情報を正確に理解できるようにするための「構造化データ」の共通ルールです。
動画に関してはVideoObjectというタイプを使うことで、動画のタイトルやサムネイル、再生URLなどを検索エンジンに伝えることができます。
VideoObjectを使う理由
動画をただ設置するだけでは、Googleが内容を正しく認識できません。
構造化マークアップにより、動画が検索結果にサムネイル付きで表示されるなど、視認性とクリック率が向上します。
SEOに強い構造化マークアップの例
以下は、VideoObjectを活用した基本的なvideoタグの例です。itemprop属性で情報を明示します。
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="サンプル動画タイトル">
<meta itemprop="thumbnailUrl" content="thumbnail.jpg">
<meta itemprop="contentURL" content="movie.mp4">
<meta itemprop="uploadDate" content="2025-01-01">
<meta itemprop="description" content="この動画はHTMLのvideoタグとSEOについて解説しています。">
<video controls poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
</div>
インデックス対策：Googleに動画を認識させるには
動画にクローラーが来る条件
Googleのクローラーが動画を正しく認識するためには、ページに埋め込まれた動画がクローラブルである必要があります。
具体的には、動画がJavaScriptで動的に読み込まれていないことや、構造化データが正確に記述されていることが重要です。
サイトマップは必要？
動画の情報を明示するために、動画サイトマップを作成し、Google Search Consoleで送信するのが理想的です。
ただし、schema.orgのVideoObjectを適切に記述していれば、サイトマップがなくてもインデックスされることがあります。
動画が検索結果に表示されるまでの流れ
- ページにvideoタグを設置
- VideoObjectで構造化マークアップを追加
- Googleがクローリングし、情報をインデックス
- 検索結果に動画サムネイル付きで表示される
ただし、インデックスの可否はGoogleの判断に依存するため、すぐに結果が反映されないこともあります。
スポンサードサーチ
参考情報・学習リソース
schema.org公式サイト
構造化データの記述ルールについて詳しく知りたい方は、schema.orgの公式サイトが参考になります。
おすすめの書籍・学習リンク
HTMLやvideoタグについて基礎からしっかり学びたい方には、以下の書籍がおすすめです。
- ゼロから覚えるHTML（初心者向けに丁寧な解説）
- 初心者からちゃんとしたプロになる（HTML・CSS・SEOの総合理解）
まとめ：HTMLのvideoタグで動画を魅せる
<video>タグを使えば、Webページに直接動画を埋め込むことができ、ユーザー体験を豊かにすることができます。
加えて、schema.orgのVideoObjectで構造化データを適切に記述すれば、Googleに正しく動画コンテンツが認識され、検索結果での視認性やクリック率の向上にもつながります。
この記事を参考に、ぜひあなたのサイトにもvideoタグを活用して、情報発信力とSEO効果の両方を高めてみてください。
HTMLのvideoタグは、視覚的に情報を伝える強力な手段です。
正しく記述し、構造化データでSEOを補完すれば、Googleの検索結果にも反映されやすくなります。
ユーザーに価値のある動画を提供しながら、検索流入も同時に狙えるこの技術、ぜひあなたのWebサイトでも活用してみてください。
