ホームページに動画を埋め込む方法3選とSEO効果｜重くしない作り方

「動画を入れたいけど、ページが重くなるのが怖い」ということを恐れてなかなかホームページに動画掲載ができないなんて方はいませんか。

動画の扱い方ひとつでホームページの印象はがらりと変わります。うまく使えれば強力な武器になる一方、やり方を間違えるとページ速度を大きく落としてしまうこともあるのは事実です。

この記事では、ホームページへの動画埋め込み方法を3つご紹介しながら、SEOへの影響や表示速度を守るコツもあわせて解説します。

なぜ今、ホームページに動画を入れるべきなのか

訪問者がページに滞在する時間、いわゆる「滞在時間」は、SEO評価に影響する要素のひとつだと言われています。動画があるページは、テキストだけのページと比べて滞在時間が伸びやすい傾向があるようです。

Googleは動画コンテンツを好意的に評価するとも言われていますが、それ以上に大切なのは「ユーザーに価値を届けられるか」だと思います。動画マーケティングの観点でも、採用ページに社員インタビュー動画を置くだけで応募率が変わった、という事例は珍しくありません。採用動画の費用感は採用動画の制作費用と相場｜東京で失敗しない発注で解説しています。

数字だけを追うよりも、「この動画が誰かの判断を後押しできるか」を軸に考えると、自然とページ設計が変わってくるのではないでしょうか。

ホームページへの動画埋め込み方法3選

① YouTube埋め込み方法を使う（最もポピュラー）

YouTubeにアップロードした動画を、ホームページに貼り付ける方法です。YouTubeの動画ページにある「共有」→「埋め込む」から取得できるiframeコード（外部のコンテンツを枠ごと表示するHTML記述）をそのまま貼るだけなので、技術的な難易度は比較的低いと感じています。

メリットをまとめると、次のようになります。

動画ファイルをサーバーに置かないため、ホームページ自体が重くなりにくい
YouTubeの検索からも流入が見込め、動画SEO効果を二重に得られる可能性がある
スマートフォンでも自動的に最適化して表示される
無料で利用でき、メンテナンスコストがほぼかからない

一方で、YouTube側の広告が表示されることや、再生終了後に関連動画が出てくることは気になるポイントかもしれません。パラメータ（設定値）を追加することである程度制御できますので、実装時に調整するとよいでしょう。

② Vimeoを使って埋め込む

Vimeoは、動画共有サービスの中でも「品質重視」のプラットフォームです。YouTubeと同様にiframeで埋め込めますが、広告が表示されず、再生後の関連動画も非表示にできます。

コーポレートサイトや高級感を大切にしたいブランドサイトには、Vimeoの方が向いているかもしれません。ただし、一定以上の機能は有料プランが必要になります。費用対効果を考えながら選ぶのがよいと思います。

③ 動画ファイルを直接サーバーに置いて再生する

mp4などの動画ファイルをサーバーにアップロードし、HTMLのvideoタグ（ブラウザ上で動画を再生するための記述）で表示する方法です。外部サービスに依存しないため、デザインの自由度が高くなります。

ただし、この方法はホームページ表示速度対策をしっかり行わないと、ページがとても重くなるリスクがあります。具体的には、次のような対策が必要です。

動画ファイルを事前に圧縮し、できるだけ軽くする（目安：30秒以内の動画なら10MB以下）
autoplay・muted・playsinline属性（自動再生・無音・インライン再生の設定）を正しく指定する
preload属性を「none」または「metadata」に設定し、不要な読み込みを抑える

背景に動画を流すファーストビュー演出では特に表示速度への影響が大きく、実装時は慎重に扱うべきだと感じています。実際にセブンシーズピクチャーズのトップページでも、ヒーロー動画を「ミュート・ループ・preload無効」の組み合わせで実装し、表示速度と演出を両立させています。動画と一体になったサイトづくりはウェブサイト制作（映像×WEB）でご紹介しています。