AMPでvideoタグを最適化する方法

【THE THOR】AMPでvideoタグを最適化する方法

  • 2020年8月20日
  • 2020年8月24日
  • ブログ

AMPでのエラー【タグ「video」を同等の「amp-video」タグに置き換えてください。】の解決方法を紹介します。

今回の記事内容は「THE THOR」のテーマを使っている人向けの記事になっています。

他のテーマでも応用はできると思いますが、参考程度にしてもらえば、という感じです。

女性
私の場合、Gutenberg(ブロックエディタ )を使い始めてvideoタグが登場しました。

そして、エラーが発生しました・・。

動画を記事に挿入するときに、ブロックタイプ「動画」を選ぶとvideoタグが付きます

Gutenberg(ブロックエディタ )を使う必要性は、クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策で触れています。

関連記事

クラシックエディタの公式サポートは2021年12月31日までの予定なんだけど、なにか対策してる? 旧エディタの人 そうなの!?対策というか、その情報さえしらなかったわ! oh・[…]

クラシックエディタからブロックエディタへ移行するとデザインが崩れる対策

しかし、このvideoタグはAMPページに対応させようとするとエラーが発生しちゃうんです。

おそらくこの記事にたどり着いたという事は、AMPエラーで困っているのではないでしょうか。

それではさっそく本題に入っていきましょう。

  1. amp-videoタグが使える様に、スクリプトを読み込ませる。
  2. videoタグをamp-videoに置換する。
ブログテーマのコードを編集するので、必ずバックアップをとって編集作業をしましょう。

THE THORでスクリプトを読み込ませてamp-videoを使える様にする方法

THE THORでスクリプトを読み込ませてamp-videoを使える様にする方法

amp-videoタグを使える様にするには、amp-video様の「javascript」というものを読み込ませる必要があります。

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

このコードをsingle-amp.phpにコピペすればOK。

それではsingle-amp.phpへのアクセス方法を紹介します。

wordpress管理画面から編集する方法

「外観」→「テーマエディター」→「THE THORを選ぶ※1」→「single-amp.php」

このページの
「script async custom-template=”amp-mustache” src=”https://cdn.ampproject.org/v0/amp-mustache-0.2.js”」の下にコピペします。(3584行目くらいです)

FTPやサーバの機能を使って編集する方法

「public_html」→「あなたのドメイン※2」→「wp-content」→「themes」→「the-thor」→「single-amp.php」

このパターンも同じで
このページの
「script async custom-template=”amp-mustache” src=”https://cdn.ampproject.org/v0/amp-mustache-0.2.js”」の下にコピペします。(3584行目くらいです)

※2:あなたのドメイン=salva-k.com

これでスクリプトを読み込ませる作業は完了です。

THE THORでAMP用のamp-videoタグに置換する方法

THE THORでAMP用のamp-videoタグに置換する方法

サクッと解決方法を説明していきます。

$the_content = preg_replace('/<video(.*?)>/i', '<amp-video layout="responsive" $1></amp-video>', $the_content);
$the_content = preg_replace('/<video(.*?) \/>/i', '<amp-video layout="responsive" $1></amp-video>', $the_content);

このコードをconvert.phpにコピペするだけでOK。

それではconvert.phpへのアクセス方法を紹介していきます。

wordpress管理画面から編集する方法

「外観」→「テーマエディター」→「THE THORを選ぶ※1」→「inc」→「amp」→「convert.php」

このページにコピペすればvideoタグをAMP用のamp-videoタグに置換してくれます。

※1:初期は子テーマの「THE THOR CHILD」が選択されているので、親テーマの「THE THOR」を選ぶ。

FTPやサーバの機能を使って編集する方法

「public_html」→「あなたのドメイン※2」→「wp-content」→「themes」→「the-thor」→「inc」→「amp」→「convert.php」

このページにコピペすればvideoタグをAMP用のamp-videoタグに置換してくれます。

※2:あなたのドメイン=salva-k.com

convert.phpを直接編集する。もしくは、1度ダウンロードしてから編集する。どちらでもOKです。

この作業でAMPページでは、「video」タグを「amp-video」に置き換える事が可能になりました。

amp-videoに置換できているか確認する方法

amp-videoに置換できているか確認する方法

amp-videoへの置換作業がうまくいったかどうか確認しておきましょう。

>>AMP テストのページで、【確認したいページのURL + ?type=AMP】を付けて検索すると、AMPとして表示が可能かどうかを調べてくれます。

「?type=AMP」を付け加えずに検索しても、AMPページの結果へと誘導してくれます。

amptest

めんどくさければコピペで元のURLを貼り付けてしまいましょう。

https://salva-k.com/the-thor-ampvideo/?type=AMP

ampvideo対策完了

女性笑顔
おつかれさまです。

変更はうまくいきましたか?

AMPエラーは対処に時間がかかったりするし、5Gの通信が標準になってくると、『通常のページでも高速表示できるんじゃないの?』って疑問に感じる時もあるんです。

しかし、Googleが「AMPは重要だよ」と明言している以上、対応しておかない手はありません。

今回は以上になります。