AMP で「 HTML タグの禁止された用法、無効な用法 」への対処

「 Google Search Console 」で「 AMP ページのエラーを修正してください 」とメッセージが来たので対処方法などをあれこれまとめます。

AMP とは?

AMP とは 「Accelerated Mobile Pages の略です。AMP を使用して、容量が軽く、特にモバイル端末での読み込みが速いウェブページを作成できます。」とGoogleのサイトで解説されています。GoogleやTwitterなどが共同開発していて、その仕組み、そのためのHTML規格を指しています。

WordPressの場合、対応しているテーマやプラグインも多くあります。


HTML タグの禁止された用法、無効な用法

こちらがメッセージの詳細。

ん?と思うような内容…。しばらく考えこんでしまいましたが、答えは単純でした。

本文中に半角で<>を使っていたのが、タグとなっていたようです。とりあえず、全部全角にしてみたところ改善しました。

同等の AMP タグがある HTML タグの使用禁止

これだけだと、私の単純なミスの修正話で終わってしまいそうなので…。こちらのエラーについても少し記載します。

AMP では、使えるタグと使えないタグ、置き換える必要のあるタグがあります。

注意するタグ

タグ 説明
script application/ld+json 以外使用禁止
img, video, audio, iframe 置き換えが必要
frame, frameset, object, param, applet, embed, form, input elements 使用禁止、但しbuttonはOK
style headタグ内は使用可能、amp-custom属性が必要
link canonical 以外使用禁止、一部ホワイトリスト登録可能
meta http-equiv のみ使用禁止
a javascript の使用は禁止

置き換える必要のあるタグ

タグ名 置き換えるタグ
img amp-img
video amp-video
audio amp-audio
iframe amp-ifame

こちらの記事にわかりやすくまとめてありましたので参考までに。

で、具体的に置き換えについて。色々方法があると思いますが、下の例はPHPの「 preg_replace 」を使う方法。

//videoをamp-videoに置換する
$pattern = '/<video/i';
$append = '<amp-video';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/<\/video>/i';
$append = '</amp-video>';
$the_content = preg_replace($pattern, $append, $the_content);

AMPに対応しているか確認できるGoogleのサイトです。

https://search.google.com/test/amp

導入時期とか…

個人的にはAMP導入は今すぐ急ぐ対策ではないと思います。とは言え、プラグインやテーマでAMPを導入している場合は、エラーがあれば対処すべきだとは思います。もし同様のエラーが「 Search Console 」で表示されていたら、参考にしてください。

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク