【2021年】WordPressブログにYouTube動画を綺麗に埋め込む方法
※本ページにはプロモーションが含まれている場合があります。
・ブログにYouTube動画を埋め込みたい
・サイズの調整や再生時間など細かな設定もしたい
・レスポンシブ対応させたい
・自分のエディタでの埋め込み方を知りたい
本記事の内容
- WordPressにYouTubeを埋め込む3つの方法
- YouTubeを埋め込む際のオプションとテクニック
- レスポンシブでYoutubeを埋め込む方法
- YouTubeの埋め込みに便利な4つのプラグイン
- ブログにYouTubeを埋め込むSEO効果
YouTube動画を入れることで読者にとってもSEOでもより良い記事になります。本記事を読むことで、簡単で効率的に、さらにSEOにも良い埋め込み方がわかります。
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
WordPressにYouTubeを埋め込む3つの方法
WordPressにYouTube動画を埋め込むには主に3つの方法があります。
3つの方法それぞれの、クラシックエディタと新エディタ(Gutenberg)の両方での操作方法を解説します。
YouTubeの貼り付けは3つの方法のどれでも可能ですが、それぞれできることが少し異なるので、ご自身の目的に合わせた方法をご利用ください。
3つの方法は以下になります。
YouTubeを埋め込む3つの方法
▼特徴
・最も簡単な方法
・動画の表示サイズを調整できない
▼特徴
・動画の表示サイズの調整が可能
▼特徴
・動画の表示サイズの調整が可能
・他にもいくつかのオプションの設定が可能
それぞれ順に解説していきます。
WordPressにYoutubeを埋め込む方法①URLを貼る方法
まずは最も簡単な方法である、URLで埋め込む方法です。
簡単である一方で、動画の表示サイズなどの細かい設定をできないことがデメリットです。
手順①YouTube動画のURLを取得する
以下のように貼り付けたいYouTube動画を開き、URLをコピーします。
動画の開始位置を変更することも可能
以下の手順で動画URLを取得することで、埋め込む動画の開始位置の時間を設定することも可能です。
設定することで、動画の最初からではなく、途中から再生されるように埋め込むことができます。
まずは、動画の右下にある「共有」ボタンをクリックします。
「開始位置」にチェックを入れて、開始させたい時間を入力し、「コピー」を押してURLをコピーします。
このURLを使用するだけで、動画を指定した時間から開始するように埋め込むことが可能です。
手順②URLを使って埋め込む
続いて取得したURLを埋め込む手順を解説します。
クラシックエディタでの埋め込み方法
クラシックエディタでは、「ビジュアルエディタ」を開いて先ほど取得したURLを貼り付けるだけで埋め込みが可能です。
URLを貼り付けると、上記のように動画が勝手に表示されます。これだけで埋め込みが完了です。
新エディタ(Gutenberg)での埋め込み方法
続いて、新エディタ(Gutenberg)での埋め込み方法です。
以下の3パターンで貼り付けることができます。
パターン①：URLを直接貼り付け
以下のように、先ほど取得したYouTube動画のURLを貼り付けるだけで勝手にYouTubeが埋め込まれた状態に変換されます。これだけで埋め込みが完了です。
パターン②：「埋め込み」ブロックから貼り付け
「埋め込み」のブロックを使って埋め込むことも可能です。
パターン③：「YouTube」ブロックから貼り付け
「YouTube」のブロックから埋め込むことも可能です。
WordPressにYoutubeを埋め込む方法②ショートコードで埋め込む方法
続いてショートコードを使って埋め込む方法です。
ショートコードを使用して埋め込むことで、動画の表示サイズを指定することができます。
※WordPressテーマによってサイズの変更が適用されなかったり[embed]が無効になる場合があり、うまく表示やサイズの調整をできない場合があります。その場合はショートコード以外の方法をご利用ください。
手順①YouTube動画のURLを取得する
まずは、ショートコードに埋め込むためのYouTube動画のURLを取得します。貼り付けたいYouTube動画のURLをコピーします。
動画の開始位置を変更する場合
動画の途中から再生される状態で埋め込む場合は以下の手順でURLを取得することで開始する時間の設定が可能です。
動画の右下の「共有」ボタンをクリックします。
「開始位置」にチェックを入れて、埋め込む動画の開始時間を入力し、URLをコピーします。このURLを埋め込むことで、指定した時間から動画を再生させて埋め込むことが可能です。
手順②：埋め込むためのショートコードを作成する
取得したURLを使って、以下のようにショートコードを作成します。
幅と高さはピクセルの数字で指定します。幅と高さの比率を自由に変更することはできないので、幅：高さの比率は16:9になるように設定します。
比率が異なる場合は、幅と高さの小さい方の数字に合わせた比率に自動的に調整されます。
手順③：ショートコードを貼り付ける
上記でショートコードを作成したら、貼り付けて埋め込みます。クラシックエディタと新エディタのそれぞれの手順を解説します。
クラシックエディタでの埋め込み方法
ビジュアルエディタでもテキストエディタでも良いので、先ほど作成したショートコードを貼り付ければ完了です。自動的にYouTube動画が埋め込まれます。
以下のように、サイズも反映されています。
新エディタ(Gutenberg)での埋め込み方法
新エディタで埋め込むには、まず以下の画像のようにショートコードのブロックを開きます。
先ほど作成したショートコードを、ショートコードのブロックに入力すれば完了です。
プレビューを確認すると動画に変換されています。
WordPressにYoutubeを埋め込む方法③HTMLタグで埋め込む方法
最後にYouTubeから埋め込み用の専用のHMTLタグを取得して埋め込む方法です。
とても簡単ですが、この方法では以下のような設定が可能です。
- 動画の表示サイズの変更
- 動画の再生の開始位置の設定
- プレーヤーのコントロールバーの表示・非表示
- プライバシー強化モードのON・OFF
手順①：YouTube動画のHTMLタグを取得する
まずは動画の右下に表示されている「共有」をクリックします。
続いて「埋め込む」をクリックします。
埋め込み用のコードが表示されるので、「コピー」をクリックすれば取得は完了です。
手順②：オプション付きでタグを取得する
上記で埋め込み用コードを取得する際に、以下のようなオプションを設定することができます。
・プレーヤーのコントロールバー
・プライバシー強化モード
・動画の表示サイズの変更方法
それぞれ利用する場合には、チェックを入れたり数字を入力してからコードをコピーします。(動画の表示サイズだけは、コピーしてから自分で修正します。)
以下でそれぞれ解説します。
動画の再生の開始位置
以下の画像のようにチェックを入れて数字を入力することで、埋め込んだ動画を指定した時間から再生させることができます。
チェックを入れて数字を指定すると、コードが自動で修正されるので、あとはコードをコピーすればOKです。
プレーヤーのコントロールバー
上記のチェックの有無で、コントロールバーの表示・非表示を切り替えることができます。
コントロールバーありの場合は、以下のようにユーザーの画面にコントロールバーが表示され、
・早送り・巻き戻し
などができるようになります。
コントロールバーなしの場合は、以下のような表示になり、早送りや再生位置の変更などの操作をすることができなくなります。
デフォルトではプレーヤーのコントロールバーはありになっているので、チェックマークを外してからコードをコピーするとコントロールバーをなしにすることが可能です。
プライバシー強化モード
プライバシー強化モードとは、ユーザーが再生した時にユーザーの「再生履歴」に動画を残さないようにする設定です。
デフォルトはOFFになっており、以下のチェックマークを入れてからコードをコピーすることでこの設定をONにすることが可能です。
動画の表示サイズの変更方法
最後に、動画の表示サイズの変更方法です。
サイズ以外の設定はコードをコピーする前に行いましたが、動画のサイズはコードをコピーしてから行います。
コードのうち、以下の画像の部分が動画の表示の幅と高さの数字(単位はピクセル)になっています。
コードをコピーして、この部分の数字を変更することで動画の表示サイズを指定することが可能です。
なお、幅と高さの比率は16:9になるように設定してください。比率が16:9と異なる場合は、幅と高さの小さい方の数字に合わせて自動的に比率が調整されます。
手順③：HTMLタグを貼りつける
手順②までにオプションも設定して埋め込み用のコードを取得したら、あとはWordPressに埋め込めば完了です。クラシックエディタと新エディタ(Gutenberg)のそれぞれの方法を解説します。
クラシックエディタでの埋め込み方法
クラシックエディタの場合は、テキストエディタを開いて先ほどコピーしたコードを貼り付ければ完了です。
新エディタ(Gutenberg)での埋め込み方法
新エディタ(Gutenberg)の場合は、カスタムHTMLのブロックから貼り付けることで埋め込むことができます。
以下で手順を解説します。
まずは「+」マークからブロックの一覧を開き「すべて表示」をクリックします。
ブロックの一覧をすべて開いたら、少しスクロールして「カスタムHTML」をクリックします。
先ほどコピーした埋め込み用のコードを貼り付ければ完了です。
プレビューを見ると、動画に変換されています。
YouTubeを埋め込むその他の設定とテクニック
YouTube動画を埋め込むだけであればここまでで完了ですが、知っておくと便利な設定やテクニックを2つご紹介します。
- 再生リストを埋め込む方法
- 動画の停止位置を設定して埋め込む方法
再生リストを埋め込む方法
WordPressには単一の動画だけでなく、複数の動画の一覧である「再生リスト」を埋め込むことも可能です。
再生リストを埋め込むと画面には以下のように表示されます。
ユーザーが再生リストのマークをクリックすると、再生リストの動画の一覧が表示されるようになっています。
動画が終了すると、再生リストの次の動画が自動で再生されます。
上記のように再生リストを埋め込むには、以下のように埋め込みたい再生リストのページを開き、URLもしくは埋め込み用コードを取得して動画と同じ手順で埋め込むことができます。
動画の停止位置を設定して埋め込む方法
動画を途中から再生させるように時間指定をして埋め込む方法は先にご紹介しましたが、動画を途中で終わらせる埋め込み方法もあります。
埋め込む動画のURLの末尾に「?end=停止秒数」と追記することで、その時間で動画が終了するように埋め込むことが可能です。
また、途中から開始させて途中で停止するように埋め込むには、「?start=開始秒数&end=停止秒数」で指定することが可能です。
URLで埋め込む場合の例
埋め込みコードで埋め込む場合の例
レスポンシブでYoutube動画を埋め込む方法
続いて、レスポンシブ対応でYouTube動画を埋め込む方法をご紹介します。
レスポンシブとは、PCやタブレット・様々な画面サイズのスマホでも、ユーザーのデバイスの画面に合わせてWebページのサイズやレイアウトが自動で最適化される仕組みのことを表します。
2021年６月現在、WordPressのバージョンによってはYouTubeを埋め込めば自動でレスポンシブ対応されますが、自分で設定しないといけないバージョンもあるので念のため自分で設定しておくことが無難です。
スマホでのユーザビリティを高めることはSEO効果が非常に大きく、レスポンシブ対応するだけでSEOの評価が大きく変わるので、動画を埋め込む際は忘れずに設定しておきましょう。
レスポンシブによる表示の違い
レスポンシブの設定をできている場合とできていない場合の表示の違いは以下のようになっています。
＜レスポンシブ非対応の場合＞
画面から動画がはみ出てしまっている。
＜レスポンシブ対応の場合＞
画面のサイズにぴったり合うように自動で最適化されている。
動画が画面からはみ出たり途中で切れたりしていると、何の動画か分からずユーザビリティが下がります。
せっかくの素晴らしいWebページが動画の見た目だけで台無しにならないように、以下の手順で設定しましょう。
手順①プラグイン「ARVE」をインストールする
>>ARVE Advanced Responsive Video Embedder
YouTube動画をレスポンシブ対応させるには、まずARVE Advanced Responsive Video Embedderというプラグインをインストールしましょう。
手順②設定する
プラグインをインストールして有効化が完了したら、YouTube動画を埋め込みたい投稿の編集ページを開きます。
クラシックエディタでのARVEの使い方
クラシックエディタの場合は、上記の画像のように表示されるので、動画を埋め込みたい位置にカーソルを合わせたら「Embed Video (ARVE)」をクリックします。
上記の画面が開かれるので、埋め込みたいYouTube動画のURLを上記の欄に入力し、動画のタイトルを入力して「更新」ボタンをクリックすれば完了です。
新エディタ(Gutenberg)でのARVEの使い方
「+」マークをクリックし、「すべて表示」をクリックしてブロックのメニューを開きます。
「Video Embed (ARVE)」をクリックします。
上記ブロックが挿入されるので、埋め込みたいYouTube動画のURLを貼り付ければ埋め込みが完了です。
これでレスポンシブ対応になっています。
YouTubeの埋め込みに便利なプラグイン4選
ここからは、YouTube動画をWordPressに埋め込む際に役立つおすすめのプラグインをご紹介します。
WP YouTube Lyte
YouTube動画の読み込み速度を早くすることができるプラグインです。
プラグインを使わない場合、YouTube動画をたくさん入れるほどページの読み込み速度がどんどん遅くなります。
読み込み速度が遅いと、ユーザービリティが下がり離脱率が高まりSEOでもかなり悪い評価を受ける原因になります。
なのでYouTube動画を1ページに複数入れる場合は、WP YouTube Lyteを設定するようにしましょう。
Lazy Load(遅延読み込み)という技術により、動画のすべてを同時に読み込むのではなく必要な箇所から先に読み込みをすることで表示速度が早くなります。
設定も非常に簡単です。
Embed Plus for YouTube
YouTubeチャンネルや再生リストをギャラリーにして表示することができるプラグインです。動画のタイトルとサムネイルがまるでYouTubeのメニューのように並んで表示され、ユーザーが動画をパッと一覧で見やすくなっています。
ブログのサイドバーにもギャラリーを設置することもでき、表示する動画の数を指定することも可能です。
埋め込みも非常に簡単です。
Video Gallery
Embed Plus for YouTubeと同じく、動画の再生リストをギャラリーで表示することができるプラグインです。
レスポンシブ対応もしており、特にデザインのカスタマイズ性が高いことが大きな特徴です。レイアウトから細かなデザインまで自分でカスタマイズすることができるので、デザインにこだわりたい方におすすめです。操作も簡単です。
またショートコードでギャラリーを埋め込むので、複数のページに何度も挿入することも楽に可能です。
Widget Responsive for Youtube
>>Widget Responsive for Youtube
YouTube動画を埋め込んだウィジェットを作成したり、そのウィジェットからショートコードを作成して記事ページに埋め込んだりできるプラグインです。
- ウィジェットで動画を表示したい
- 同じYouTube動画を複数の記事で使い回すことが多い
などの場合はこのプラグインを入れておくと便利です。
WordPressブログにYouTubeを埋め込むSEO効果
最後に、ブログにYouTube動画を埋め込むことによるSEO効果を解説します。
YouTube動画によるSEOへの影響はとても大きいです。良い面も悪い面もあるので、しっかり把握してうまく使い分けましょう。知っておくと上位に上げるために大きく役立つ知識をご紹介します。
ブログにYouTube動画を入れるとSEO効果がある
まず、ブログ記事にYouTube動画を入れることによるSEOの良い評価はとても大きいです。YouTube動画を入れるだけで順位が上がると言っても過言ではありません。
YouTube動画がSEO効果がある理由は大きくは以下の4つになります。
理由①滞在時間が延びる
動画を再生している間もユーザーはページに残り続けるので、滞在時間が長くなります。
動画を再生している時間の分だけ滞在時間が長くなることで、ブログのページの評価が高まることが考えられます。
理由②オリジナルコンテンツとして評価される
2つ目の理由は、競合のページと差別化ができるからです。
動画が入っているというだけでも競合との差別化になりオリジナリティのある記事として評価されやすくなります。
理由③Googleのサービスなので評価されている可能性も
3つ目の理由は、YouTubeはGoogle傘下のサービスであることです。
Googleは明確に公表していませんが、Google傘下のサービスを記事と連携させることで検索順位が上がる事例は数多く報告されています。
YouTube動画の他にも
- Googleマップの埋め込み
- Googleマップからの店舗の口コミの引用
などもSEOと関連があると言われています。
理由④記事を理解しやすくなる
最後の理由はシンプルに、動画があることで読者が記事の内容を理解しやすくなり記事コンテンツの質が高まるからです。
SEOの本質である、読者ファーストの観点からの理由になります。
SEO効果の高まる動画の埋め込み方
上記のようにYouTube動画はSEO効果がありますが、ただただ入れれば良いわけではありません。SEO効果を最大化させるYouTube動画の使い方を解説します。
ポイント①ブログ記事と関連性の高い動画を使う
当然ですが、ブログ記事と関連性の高い動画を挿入するようにしましょう。
GoogleはYouTube動画の内容もある程度認識しています。内部リンクや外部リンクを貼るときに、その記事と関連性の高い記事を選ぶように、YouTube動画も関連性を意識しましょう。
あまりに関連性の低い動画を貼ることで、記事の認識がぶれて評価に影響することもあります。
ポイント②公式動画・オリジナル動画を使う
公式動画は外部リンクや引用でいうところの公式サイトと同じで信頼性や権威性を借りることができます。
権威性や信頼性のあるサイトへの外部リンクや引用はSEO効果があることと同じで、権威性や信頼性のある動画の埋め込みは自身の記事の信頼性も高めてくれ、評価されます。
ポイント③動画の前後でテキストで動画の内容を補足する
ただ動画を貼り付けるだけでなく、動画の前後でテキストでと補足説明をしましょう。
これにより
- Googleに動画の内容まで伝わりやすくなる
- 読者も文脈を理解しやすくなる
という効果があります。
動画をただ貼り付けるだけでなく、テキストでしっかりと補足しましょう。
注意：ページの表示速度は遅くなる
注意点として、YouTube動画を入れることでページの表示速度はかなり重くなります。速度が遅くなるだけでSEOの評価が悪くなり、順位が下がることもあります。
YouTube動画はSEOに良い影響を与える一方で、表示速度が下がれば悪い評価も受けます。
- 動画を複数入れすぎない
- 動画を入れる場合は、WP YouTube Lyteを使って軽くする
などの対策をしておきましょう。
ブログにYouTubeを埋め込んでブログの質を上げよう！
WordPressにYouTube動画を埋め込む方法を解説しました。
いくつか方法をご紹介しましたが、どれもとても簡単な方法です。ご自身の好みやエディタに合わせた方法で是非埋め込んでみてください。
デバイスが変わると動画の表示のバランスが悪いこともあるので、サイズの調整やレスポンシブ対応も忘れないように、ユーザビリティの高い記事を作成しましょう。
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
