この記事は2950文字です。(読破予想時間:約7分1秒)
■はじめに
YouTubeの再生リストをブログに普通に埋め込んでも、ampでは再生されません。(再生リストではなく、単発の動画なら問題なく再生出来ます)
Google Search Console(通称サチコ)で「埋め込み動画なし」のampエラーが出てしまって実際に再生は不能です。
最近、何とかampでも再生出来る方法に辿り着きましたので、その方法をシェアしたいと思います。
手順は最後の方に掲載してますので、不要な部分はスクロールして飛ばして貰ってもかまいません。
■ampとは
ampとはAccelerated Mobile Pagesの頭文字をとった略で、モバイルで素早く軽く表示させる為に、googleとTwitterが共同で開発した仕組みの事です。
これだけ聞くと何やら良い事づくしの様に聞こえるかも知れませんが、これが実にやっかいな仕組みなのです。
まず、ブログを書く時、文字を斜体にしたりフォントサイズを変えたりと色々と工夫をして書く訳ですが、それらの工夫はampではことごとく無視され、レイアウトはぐちゃぐちゃになる事も多く、表示出来ないコンテンツもとても多いのです。
要は、モバイルでの表示を素早くする為に、重くなるタグは全て禁止にしてる様で、僕の個人的な意見ではampなんて仕組みはいらないと思っています。
そして、その結果、Google Search Consoleでのampエラーの通知は頻繁にあるのです。
ブログサービスによっては、記事をアップする時にampに対応するか否かを選択出来る所もある様ですが、アメブロは全ての記事が自動的にamp対応になってしまうので、ampの事は無視するかampに合わせて記事を書くかになります。
実際のところ、ampなんて無視してもいいのかも知れませんが、性格的に、ついampエラーの対応に追われる日々になっています。
■通常のURLとampのURL
YouTubeの再生リストのampエラーが出る様になってそんなに年月は経過していません。
YouTubeの再生リストのampエラーが出たので実際にampで表示してみると、全く再生が出来ませんでした。
勿論、通常のURLならば普通に再生可能です。
因みに、通常のURLの『https://』の後ろに『gamp.』を加えればampのURLになります。
↓通常のURL
https://ameblo.jp/tsukasa373/entry-12506754283.html
↓ampのURL
https://gamp.ameblo.jp/tsukasa373/entry-12506754283.html
■再生リストをブログに埋め込む方法(YouTube公式)
YouTubeのヘルプにも確か掲載してたと思いますが、YouTubeの再生リストを埋め込むには、YouTubeのアカウントをクリックして出てきた「クリエイターツール」をクリックしてYouTube Studioへ移動します。
そして、再生リストをクリック、または、タップします。
そして、再生リストから任意の再生リストのタイトルを選んでクリック、または、タップします。(編集ボタンと押してもOKです)
すると、再生リストが全て表示されている画面に移動しますので、共有ボタンをクリックします。
各種埋め込みボタンやURLボタンが表示されますので、自分にあったボタンを押します。
僕の場合はアメーバボタンをクリックしました。
そこで取得した埋め込みのソースコードをHTML編集で貼り付ければOKです。
因みに、ampなんてどうでもいいと言う方ならばこれで埋め込みは完了です。
通常のURLからなら、普通に再生する事ができます。
■ヒント発見
普通なら、取得した埋め込みのソースコードをHTML編集で貼り付ければ完成の筈なのですが、どういう訳だか、YouTube公式の方法ではampエラーが出てしまって、ampのURLからでは再生が出来ないのです。
そこで、ヒントになる記事を見つけたのですが、それが『Google Search Consoleの「コンテンツの不一致: 埋め込み動画なし」への対策』と言う記事です。
この記事はとてもシンプルに分かりやすく答えを書かれているので、逆に分からない人には少し分かりにくい部分もありましたので、更に調べてみる事にしました。
例えば、再生リストIDと動画IDはどう違うのかとか、そこが分からないと何を何処に貼り付ければいいのかも分かりません。
■ampで再生リストを再生可能にする
ヒントになった『Google Search Consoleの「コンテンツの不一致: 埋め込み動画なし」への対策』と言う記事には、「iframeのsrc末尾を"embed/動画ID?list=再生リストID"と言う様に書かれています。
そこで、僕が実際に行った手順です。
1)まずは、先ほど画像と共に解説させて頂いた様に、YouTubeの再生リスト共有画面でアメブロ共有のソースコードを取得します。
2)YouTube Studioではなく、YouTubeの画面で再生リストを開く。
3)YouTube画面での再生リストのURL(画像内で赤で囲んだ部分)の「v=11文字の半角英数」をコピーします。
「v=11文字の半角英数」が動画IDです。
4)embed/動画ID?listの「動画ID」部分へコピーした動画IDをペーストします。
5)再生リストIDとは、先ほど、1)でYouTubeの再生リスト共有画面で取得したソースコードの「list」以下の「list=再生リストID"」となりますので、再生リストの貼り付けはしなくても大丈夫です。
6)これで再生リストの埋め込みコードの修正が完了です。
あとは、HTMLエディターでブログ内に修正したソースコードを貼り付ければ完成です。
■最後に
自分で確認した所、通常のURLでもampでも普通に再生が出来てました。
ただ、動作確認をしたのはパソコンからだけですが。
YouTube再生リストのamp対策としては成功した様ですが、ampエラーが出るのかどうかはまだ分かってません。
でも、取り敢えず、パソコンでは再生出来ます。
◇解放/皆見つかさ(全13曲プレイリスト)
(『せっかくだから、少しでもいい音で音楽を楽しんで欲しい。 』)
※ご視聴頂いて良かったと思われた方は、お手数ですが、YouTubeへ移動して頂いて、是非、グッドボタンのクリックをお願い致します。(動画内のタイトル部分をクリックするとYouTubeへ飛ぶ事が出来ます)
☆*゚ ゜゚*☆*゚ ゜゚*
もし、こんな僕に興味を持ったと言う方がいらっしゃったら、是非、この下のリンクをクリックしてみて下さい。
ミュージシャン、皆見つかさの世界が広がっています。o(゜∇゜*o)(o*゜∇゜)o~♪
関連記事:皆見つかさのアルバム『解放』がYouTubeで配信スタート
関連記事:せっかくだから、少しでもいい音で音楽を楽しんで欲しい。
関連記事:皆見つかさ・音源、取り扱いショップ一覧
関連記事:音楽アーティスト「皆見つかさ」について【情報まとめ】
関連記事:この5年間に一番読まれた記事
関連記事:月間PVランキング、発表してみました。
関連記事:ブログを始めるにあたって
皆見つかさの『Yodo Big River Blues』を普段使っているストア・サイトで試聴・購入
・通常版配信:255円(税込み) ・ハイレゾ版:489円(税込み) |
皆見つかさの『解放』を普段使っているストア・サイトで試聴・購入
・CD:2,500円+消費税 ・通常版配信:255円(税込)/1曲 2,444円(税込)/アルバム ・ハイレゾ版:489円(税込)/1曲 3,210円(税込)/アルバム |