【解決事例】AMPの「許可されていない属性または属性値が HMTL タグにあります。」というエラーの対処法
グーグルアドセンスからメールで「AMP化しましょう！」と言われたので、何も勉強せずにAMPを有効化してしまったためにエラー祭りになりました。
そんな方も多いのではないでしょうか。
あらかたエラー潰しを終えたので私が直面したエラーとその対処法をまとめてご紹介しております。
今回は「許可されていない属性または属性値が HMTL タグにあります。」というエラーのご紹介です。
ロリポップでサーバーを借りて、WordPressでルクセリタスというテーマを使用しています。
エラーをご紹介する上で私のブログの環境をご紹介すると、ロリポップでサーバーをレンタルし、ワードプレスを使用しています。
テーマは無料で高機能で有名なLuxeritas（ルクセリタス）というテーマを使用しています。
ルクセリタスだとテーマのカスタマイズでボタン一つでAMPのページを作ってくれます。
https://thk.kanzae.net/wp/ものすごく便利です。その手軽さからAMPを有効化してエラーがたくさんでてかなりびっくりしました。
ちなみに「AMP」プラグインは使用せず、ルクセリタスのカスタマイズでAMP化しています。
グーグルサーチコンソールから原因を調べる
基本的にAMPエラーはグーグルサーチコンソールで発見すると思います。
詳しいエラーの調べ方はこちらのページに書いていますので同様の手順で「URL検索」からエラーの原因を調べてみてください。
https://out-of-antenna.biz/productivity/post-4399属性「border」はタグ「amp-iframe」で使用できません。
グーグルサーチコンソールの中の「AMP」で表示されたエラーは「許可されていない属性または属性値が HMTL タグにあります。」でしたが、「URL検索」で調べてみると「属性「border」はタグ「amp-iframe」で使用できません。」というエラー内容だということがわかりました。
よくよくみてみるとこの赤くハイライトされている部分の中に「amazon-adsystem」という単語があります。
原因はアマゾンのアフィリエイトリンク
このことからAmazonのアフィリエイトリンクがエラーの原因だとわかります。
Amazonアソシエイトの中のアフィリエイトリンクを作成するツールではこの「iframe」から始まるタグがアフィリエイトリンクとして使用されています。
そのため、Amazonアソシエイトで作成したアフィリエイトリンクは全てAMPでエラーになると思われます。
（カエレバなどで作成したリンクは同様のAMPエラーにはならないようです。画像サイズでエラーになるという情報もありますが、私はカエレバ関連でエラーは出ていません。）
iframeをAMPで使いたい場合はamp-iframeというコードを使用すれば良いようですが、あってもなくても良いようなリンクだったいうこともあり、削除することで対応しました。
そのほかにもAMPのエラーに関して記事をまとめていますのでぜひ合わせてご覧ください。
