Home > Webページデザイン

Webページに動画を貼り付ける

新規作成日 2016-06-01
最終更新日

SEOから見た動画コンテンツ

SEOについて、動画が重量であることは事実ですが、検索エンジンは、動画の内容を読み取ることはできません。

検索エンジンが動画を評価する際の評価基準は、タイトル、説明文、タグなどの動画に付随するテキスト情報と思われます。

アドビ・フラッシュによる動画は、モバイル端末で再生できない機種が存在するので、これから作成する場合は、避けたほうが無難かと思います。

videoタグによる動画の実装

videoタグは、動画フォーマットを文書内に埋め込むため、対応するWebブラウザでは、プラグインを使わずに動画を再生することができます。

videoタグの記述例

videoタグの記述例


<video src="example.mp4" width="640" height="360" autoplay loop></video>

複数の再生フォーマットのファイルを用意する場合の記述例

閲覧環境によって再生できるファイル形式に制限があるため、複数のsourceタグのsrc属性に複数のファイル形式を指定しておくことが推奨されます。 また、対応していない閲覧環境向けの、pタグで、代替テキストを記述しておきます。代替テキストのpタグは、sourceタグの後に記述スる必要があります。


<video poster="example.jpg" preload="metadata" width="640" height="360" controls>
    <source src="example.webm" type="video/webm">
    <source src="example.ogv" type="video/ogg">
    <source src="example.mp4" type="video/mp4">
    <p>代替テキスト:再生できませんでした。</p>
</video>

videoタグの属性

videoタグの属性
属性
src="" 動画ファイルの指定 URL 埋め込む動画のURL
poster="" 静止画 URL 動画の代わりとなる画像のURL
preload="" 先読みの目安 none 先読みを必要としない
metadata メタデーターだけを先読みする
auto 動画全体を先読みする
mediagroup="" グループ名 文字列 属するグループの名前
width="" 動画の幅 数値 ピクセル数
height="" 動画の高さ 数値 ピクセル数
autoplay 自動再生を行う (autoplay) 値は、省略可能
loop ループ再生を行う (loop) 値は、省略可能
muted 音声を出さない (muted) 値は省略可能
controls コントローラを表示する (controls) 値は省略可能

autoplay属性が指定してあると、preload属性は、無効となる。

YouTube動画をWebサイトに埋め込む

他に、YouTube動画をWebサイトに埋め込む方法があります。

xmlサイトマップ

動画ファイルは、xmlサイトマップに登録し、検索エンジンに反映されやすくしておきましょう。

参考書籍

現場のプロが教えるSEOの最新常識 (知らないと困るWebの新ルール)

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」