株式会社アシッドハウスの芦田 哲也です。
WEBサイトを持っている中小企業経営者の方からこんな質問を受けることがあります。
[voice icon="https://ashidatetsuya.com/wp-content/uploads/2019/02/keieisha-young.jpg" name="中小企業経営者" type="l line"]WordPressでページ作成しているけど、YouTubeを埋め込むと重くなる。
重くなるとGoogleからの評価が下がると言うし、何よりも見に来たユーザーが帰ってしまうのを避けたい。軽くするにはどうしたらいいんだろう？[/voice]
WordPressは重くなりがちです
前提ですが、このとおりです。
技術的に的確な表現ではないかもですが、WordPressを使ったサイトで表示している情報はアクセスがあるたびにデータベースに取りに行って表示するという挙動をとっているため、どうしても重くなります。
なので、それ以外の要因で重くなる要素は避けたいわけですが、わかりやすく重いって感じるのがYouTubeの埋め込みなので、取り急ぎ解決したいというわけですね。
[aside] 補足
WordPressを使ったCMSで重くなる原因には「プラグインの使いすぎ」というのもあります。YouTubeの埋め込みの検討よりも、別の原因を見直したほうがいいケースもあることを念頭に入れてください。[/aside]
[box class="yellow_box" title="追記（2019年3月26日）"]
以下の記事から考えると、もしかしたら動画プレイヤーをサイト内に埋め込んだほうが有利に働くかもしれません。仮に動画へのリンクだけだったとしても、Googleは判定してくれそうですが、埋め込みのほうがクローラーにフレンドリーな気がします。
「記事の中に動画があれば、1ページ目の検索結果に表示される可能性がないものよりも53倍高い」
According to Forrester Research, you are 53 times more likely to appear on Google page one if you have a video on your website.
[/box]
YouTubeのサムネイル画像とリンク貼り付けでOK
解決方法には以下の2つがあります。
[box class="blue_box"]
- JavaScriptやCSSを書き換える
- サムネイル画像を取得してテキストリンクと並べる[/box]
JavaScriptやCSSを書き換えはエンジニアやコーダー目線ではそれほど難しくはないですが、技術出身でない方以外は避けておいたほうがよいでしょう。
なので、今回は後者のやり方を取り上げます。
YouTubeのサムネイルの取得方法
以下のURLをブラウザに打ち込めばOKです。
[box class="blue_box"]
http://img.youtube.com/vi/動画ID/〜.jpg[/box]
なので、動画IDと画像ファイル名を探して当てはめます。
動画のIDの探し方
該当のYouTube動画のアドレスからわかります。
https://www.youtube.com/watch?v=動画ID となっていますので、「watch?v=」の後に続く文字列を抜き出せばOKです。
例えば、この動画のURLはhttps://www.youtube.com/watch?v=xPKs0_G0OXEなのですが、動画IDは「xPKs0_G0OXE」となりますね。
画像ファイル名の探し方
YouTubeの仕様で画像ファイル名が決まっています。
[box class="yellow_box" title="120x90（シーン別：https://img.youtube.com/vi/動画ID/1.jpg）"]
https://img.youtube.com/vi/動画ID/1.jpg
⇒https://img.youtube.com/vi/xPKs0_G0OXE/1.jpg[/box]
[box class="yellow_box" title="120x90（シーン別：https://img.youtube.com/vi/動画ID/2.jpg）"]
⇒https://img.youtube.com/vi/xPKs0_G0OXE/2.jpg[/box]
[box class="yellow_box" title="120x90（シーン別：https://img.youtube.com/vi/動画ID/3.jpg）"]
⇒https://img.youtube.com/vi/xPKs0_G0OXE/3.jpg[/box]
[box class="yellow_box" title="320x180（https://img.youtube.com/vi/動画ID/mqdefault.jpg）"]
⇒https://img.youtube.com/vi/xPKs0_G0OXE/mqdefault.jpg[/box]
[box class="yellow_box" title="480x360（http://img.youtube.com/vi/動画ID/mqdefault.jpg）"]
⇒https://img.youtube.com/vi/xPKs0_G0OXE/hqdefault.jpg[/box]
[box class="yellow_box" title="480x360（http://img.youtube.com/vi/動画ID/0.jpg）"]
⇒https://img.youtube.com/vi/xPKs0_G0OXE/0.jpg[/box]
[box class="yellow_box" title="640x480"]
http://img.youtube.com/vi/動画ID/sddefault.jpg
⇒https://img.youtube.com/vi/xPKs0_G0OXE/sddefault.jpg[/box]
[box class="yellow_box" title="最大"]http://img.youtube.com/vi/動画ID/maxresdefault.jpg
※実サイズを確認するには画像をクリックして下さい。
⇒https://img.youtube.com/vi/xPKs0_G0OXE/maxresdefault.jpg[/box]
これでサムネイル画像が取得できました。
動画IDだけでもOK
前述の方法をスクリプト化し、動画IDだけで画像を探し当てることのできるツールがありました。
これを使うとさらに早いでしょう。
▶RE13B.net・YouTubeサムネイル画像取得スクリプト
仕上げ
どのサムネイル画像を使うかですが、YouTubeの埋め込みに近しい「640x480」を使うと良いかなと思います（画像自体にリンクを付けるのはどっちでもOKかなと思います）
テキストリンクには、YouTubeに飛ぶことを示しつつ、動画のタイトルをつけると良いのではないでしょうか。
【YouTube】安倍総理 年頭記者会見-平成31年1月4日
これがベストというわけではないかもしれませんが、一つの方法としてぜひ試してみてください。