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

2018/1/6 WordPress

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

AMP とは？

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

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

 Simplicity 
SimplicityのAMP機能の使い方。カスタマイズ方法など。
https://wp-simplicity.com/simplicity-amp/
Simplicity2.3.1からAMPに対応しました。 以下では、簡単にSimplicityでのAMP機能の使い方を説明します。 とは言っても、そこまで難しいことをする必要はないかと思います。 AMP機能を有効にする まずSimplic

 WordPress.org 
AMP
https://wordpress.org/plugins/amp/
Enable Accelerated Mobile Pages (AMP) on your WordPress site.

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

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

 Qiita 
AMP HTML ざっくりまとめ - Qiita
http://qiita.com/lqd_jp/items/532e25454f156d77856f
# AMP とは**AMP（Accelerated Mobile Pages）** は、Googleが発表したモバイル高速化技術です。4,500社以上のパブリッシャーや、WordPress.com がパートナーに参加し、2016年...

で、具体的に置き換えについて。色々方法があると思いますが、下の例は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 」で表示されていたら、参考にしてください。

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

posted with ヨメレバ
石川栄和,大串 肇,星野邦敏 インプレス 2017-02-24

WordPressを勉強するにあたって一番最初に購入した参考書です。掲載されている無料テーマ「Bizvektor」は非常に扱いやすいテーマです。最新版では「lightning」で解説されています。こちらも使い勝手のいいテーマです。

Amazon
Kindle
楽天ブックス

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

シェアする
ツイートする
Twitter で

自己紹介

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

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

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

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

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

, , @Dai04Dr