AMPの「許可されていない属性または属性値が HMTL タグにあります。」というエラーの対処法

仕事効率化AMP,iframe,ルクセリタス

グーグルアドセンスからメールで「AMP化しましょう!」と言われたので、何も勉強せずにAMPを有効化してしまったためにエラー祭りになりました。

そんな方も多いのではないでしょうか。

あらかたエラー潰しを終えたので私が直面したエラーとその対処法をまとめてご紹介しております。

今回は「許可されていない属性または属性値が HMTL タグにあります。」というエラーのご紹介です。

ロリポップでサーバーを借りて、WordPressでルクセリタスというテーマを使用しています。

エラーをご紹介する上で私のブログの環境をご紹介すると、ロリポップでサーバーをレンタルし、ワードプレスを使用しています。

テーマは無料で高機能で有名なLuxeritas(ルクセリタス)というテーマを使用しています。

ルクセリタスだとテーマのカスタマイズでボタン一つでAMPのページを作ってくれます。

ものすごく便利です。その手軽さからAMPを有効化してエラーがたくさんでてかなりびっくりしました。

ちなみに「AMP」プラグインは使用せず、ルクセリタスのカスタマイズでAMP化しています。

グーグルサーチコンソールから原因を調べる

基本的にAMPエラーはグーグルサーチコンソールで発見すると思います。

詳しいエラーの調べ方はこちらのページに書いていますので同様の手順で「URL検索」からエラーの原因を調べてみてください。

属性「border」はタグ「amp-iframe」で使用できません。

グーグルサーチコンソールの中の「AMP」で表示されたエラーは「許可されていない属性または属性値が HMTL タグにあります。」でしたが、「URL検索」で調べてみると「属性「border」はタグ「amp-iframe」で使用できません。」というエラー内容だということがわかりました。

AMPエラー iframeを含むもの
iframeというタグが使用されている場所がエラーの原因のようです。

よくよくみてみるとこの赤くハイライトされている部分の中に「amazon-adsystem」という単語があります。

このことからAmazonのアフィリエイトリンクがエラーの原因だとわかります。

Amazonアソシエイトの中のアフィリエイトリンクを作成するツールではこの「iframe」から始まるタグがアフィリエイトリンクとして使用されています。

そのため、Amazonアソシエイトで作成したアフィリエイトリンクは全てAMPでエラーになると思われます。

(カエレバなどで作成したリンクは同様のAMPエラーにはならないようです。画像サイズでエラーになるという情報もありますが、私はカエレバ関連でエラーは出ていません。)

iframeをAMPで使いたい場合はamp-iframeというコードを使用すれば良いようですが、あってもなくても良いようなリンクだったいうこともあり、削除することで対応しました。

ぜひブログをフォローしてください。