最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 動画コンテンツのSEO対策とWEBページへ埋め込むタグの書き方

Web制作

動画コンテンツのSEO対策とWEBページへ埋め込むタグの書き方

皆さま、こんにちは。
今回は近年多く作られるようになってきた動画コンテンツをテーマにお届けします。

インタビューや商品紹介、マニュアルなど、テキストでWEBサイトにアップすると同時に、動画も作成して公開することが増えてきました。動画は情報量が多いため訪問者が短時間でも内容を理解しやすく、印象にも残りやすいとされ、動画活用が進んでいます。

そこでこの記事の中では、動画コンテンツをWEBページで公開するためのHTMLタグの書き方をご紹介します。Googleが推奨する、SEO対策としても効果的な書き方に対応したタグです。

また、WordPressでWEBサイトを構築されているのであれば、HTMLタグを書かなくてもWordPress内にある機能でSEO対策に適した埋め込みができます。WordPressは様々な機能が整っていて便利です。ただ、動画の埋め込みについては単にアップするだけでなく知っておいたほうがよい小技がありますので、そちらも合わせてご紹介します。

今回の記事の内容は以下の通りです。

  1. YouTube共有のメリットデメリット
  2. WEBサイトにアップする動画の拡張子と変換
  3. 公開前の準備（容量、サムネイル）
  4. 埋め込みタグの書き方
  5. WordPressでの埋め込みとサムネイルの設定
  6. 動画サイトマップの作り方

１．YouTube共有のメリットデメリット

動画コンテンツを公開するとき、多くの方が最初に思い浮かべるのはYouTubeだと思います。YouTubeではアップロード後に各動画の共有URLが発行されるため、WEBページにコピペすればそれだけで動画コンテンツをWEBサイトで公開することができます。

参考：https://www.welcomekyushu.jp/movie/?mode=detail&id=148

ご自身でYouTubeチャンネルを開設し、チャンネルに動画データをアップロードします。各動画の共有URLをWEBサイト内の公開したい場所へコピペすれば、上記のようにYouTubeから動画が読み込まれます。

これはストリーミングと呼ばれる形式で、データはYouTube上にあり、WEBサイトからYouTubeへ読み込みに行って再生されます。1本が長い動画でもサーバー容量を気にすることなくアップでき、手軽なことがメリットです。

SEO対策としてはGoogleはYouTubeなどのポータルサイトで公開された動画も、各WEBサイトに埋め込まれる動画も同じように扱うとのことで違いはありません。

参考：https://developers.google.com/search/docs/appearance/video?hl=ja#help-google-find

以下のようなデメリットがあります。

  1. YouTubeチャンネルを作成し、管理しなければならない
  2. 動画視聴後に関連動画が出るためYouTubeへ流出してしまう可能性がある
  3. YouTubeのアイコンやチャンネルアイコンなどが表示される
  4. YouTubeに障害等が発生すると動画が見られなくなる

もう少し2の項目について補足すると、視聴後に関連動画が一覧となって出てくる仕様を指しています。関連動画は以下のように表示されますが、それぞれがYouTubeへリンクしており、クリックするとWEBサイトから流出してしまいます。これが想定しておかなければならないデメリットの大きなポイントかなと思います。

とはいえYouTube経由で手軽に公開できるメリットも大きいため、以下のような方にはYouTubeでの公開をおすすめします。

  • YouTubeチャンネルを作成、管理することができる
  • 公開する動画の本数が多い
  • 1本の動画が長い（数分以上）
  • YouTube上でも動画を視聴してもらいたい

それではここから、YouTube経由ではなくWEBサイトへ直接動画をアップしたい方へ向けて公開準備〜タグの書き方までご紹介します。

2．WEBサイトにアップする動画の拡張子と変換

動画の代表的な拡張子には.mp4、.avi、.movなどがあります。ブラウザやプレイヤーによって開けるファイル形式が異なります。

これから動画を公開するのであればファイル形式はmp4がおすすめです。後でご紹介する埋め込み用のタグでもmp4は対応していますが、.aviや.movは対応していません。

ただ、iPhoneの初期設定のままカメラで動画を撮影すると、.movのデータができます。そのためアップロード前にはmp4へ変換が必要です。変換は動画編集ソフト等でも行えますし、ブラウザ上で変換できる無料ツールもあります。

【変換ツール（例）】https://convertio.co/ja/mov-mp4/

mp4ファイルができたら、動画公開へ向けて準備を行います。

3．公開前の準備（容量、サムネイル）

動画容量の確認と、サムネイル作成を行います。
動画の容量が大きいとWEBページの表示速度が遅くなり、表示される前に離脱されてしまったり、Googleなどからの評価が下がってしまったりします。

■動画容量の目安と圧縮
mp4形式で1分＝30MB程度が目安とされています。
それ以上である場合は圧縮機能を使って、画質を下げるなど調整して容量を小さくしておきましょう。パソコンに入っているデフォルトのプレイヤーや動画編集ソフトでも書き出し時の設定で圧縮できます。

※もし高画質のまま容量が大きく、複数の動画を見せたい場合は、YouTube経由を検討してください。

■サムネイル（＝キャッチ画像）の作成
動画の縦横比と同じサイズで画像を作成します。
これがSEO対策となってきますので、必ず作りましょう！デザイナーに発注せずとも、Canvaなど無料ツールとデザインテンプレートで簡単に作成したものでもOKです。

参考：https://www.canva.com/

4．埋め込みタグの書き方

動画、サムネイルの準備ができたら、サーバーにアップロードします。
WordPressで構築されたWEBサイトであれば記事に画像を埋め込むときと同じく【メディアを追加】からアップロード可能です。

アップロード終了後、WEBページの動画を埋め込みたい部分に以下↓のHTMLタグを記載します。

<video controls poster=”サムネイルの画像URL”>
  <source src=”動画ファイルのURL” type=”video/mp4″>
<p>このブラウザはvideoタグをサポートしていません。</p>
</video>

タグの中に文章が入っているのは、ブラウザに対応していないなどで動画が読み込まれなかった場合に備えたものです。文章は適宜変えることが可能です。

videoタグで書かれているとGoogleも動画コンテンツだと認識し、動画検索に掲載してくれます。

■サムネイルも必須
Googleの動画検索結果に表示させたい場合は、サムネイルサムネイルの作成、アップロード、タグ内からの指定が必要です。画像をアップロードし、その画像へのURLをタグ内に含めてください。

https://developers.google.com/search/docs/appearance/video?hl=ja#supported-video-encodings

5．WordPressでの埋め込みとサムネイルの設定

WordPressにある機能を使えば、HTMLタグをご自身で書く必要はありません。
以下の順番で、動画の記事内への埋め込みとサムネイルの指定を行ってください。

①メディアライブラリから動画を選択

②埋め込んだ画像の編集画面へ移行する

③【ポスター画像を選択】する

ポスター画面＝サムネイルです。HTMLタグでもサムネイルはposterタグで表示しました。

この選択が終われば、真っ黒↑の画面の上にサムネイル画像が重なり、YouTubeのような見た目になります。訪問者様もどんな動画が再生できるか事前に把握できます。

動画を編集した後にサムネイル画像を作るのは大変ですが、私も動画だけだとGoogleの動画検索に載らなかったのは確認済みなので、この一手間が重要なようです。動画編集を外部委託する場合は、サムネイル画像の作成もセットで依頼することをおすすめします。

6．動画サイトマップの作り方

Googleに提供する動画サイトマップですが、2024年3月末の段階でWordPressのプラグインで有効なもの（無料でメンテナンスがしっかりなされているもの）がなく、XML形式のファイルをご自身で作成する必要があります。

■動画サイトマップ作成に必要な情報

  • 動画ファイルがあるページのURL
  • サムネイル画像のURL
  • タイトル
  • 動画の概要
  • 動画ファイルのURL

上記の情報を以下のタグ内に盛り込んでコードを仕上げます。

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:video=”http://www.google.com/schemas/sitemap-video/1.1″>
<url>
<loc>動画ファイルがあるページのURL</loc>
<video:video>
<video:thumbnail_loc>サムネイル画像のURL</video:thumbnail_loc>
<video:title>動画タイトル</video:title>
<video:description>動画の説明</video:description>
<video:content_loc>動画ファイルのURL</video:content_loc>
</video:video>
</url>
<!– 次の動画の情報 –>
</urlset>

このタグの書き方は非常に機械的なのでChatGPTでもうまく作成できました。

■ChatGPTに以下をコピペ
※【】内はダミーですので適宜置き換えてください。

Googleの動画サイトマップを以下の情報で作成してください。
動画のURLは【https://AAA.com/BBB.html】です。
サムネイル画像のURLは【https://AAA.com/BBB.jpg】です。
タイトルは【AAAABBBB】です。
動画の概要は【熊本県A温泉のPRムービー】です。
動画ファイルのURLは【https://AAA.com/BBB.mp4】です。

以下のようなコードができますので、これをコピーすることで動画サイトマップを完成させることもできます。これならコードがわからないアルバイトさんにも作業をお願いすることが可能ですね。

作成したコードはGoogleが推奨する形式に乗っ取って保存し、サーバーにアップロード。その後、GoogleSearchConsoleに登録が必要です。この作業が難しいと思われたら、制作会社さんやコーディング担当者にご相談ください。

まとめ

WEBサイト上の動きには、お客様を誘導する役割やスムーズにWEB上で情報を見つけていただくという役割もあります。何を目立たせるか、どのような配置にするかなど考えることはたくさんあり、大変な作業ではありますが、コーディング指示が上手く出せると、皆さまのイメージ通りのWEBサイトが迅速に仕上がります。

コーディング作業が順調に進むよう、くまWEBではこれからも情報発信してまいりますので引き続きよろしくお願いいたします。