AMPエラー内容いろいろ。Google先生に怒られっぱなし



AMPが有効になっているか確認・修正する3つの方法

新しいエラー順に載せています。

AMP(Accelerated Mobile Pages)とは
Googleが主導となり、モバイルページを高速で表示させるためのプロジェクトのこと

尚、分からないことが多いので放置が多いです・・

  1. 許可されていない属性または属性値が HMTL タグにあります
  2. CSS の !important 修飾子は使用できません
  3. AMP HTML タグの属性で指定されたレイアウトが無効です
  4. タグ「div」の属性「style」で検出されたプロパティは許可されていません
  5. カスタム JavaScript は使用できません
  6. AMP ページのドメイン不一致
  7. ウェブに関する主な指標
  8. このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません
  9. タグ「amp-auto-ads extension .js script」がドキュメントで複数回使用されています
  10. 推奨サイズより大きい画像を指定してください
  11. 「amp-ad」で必要なタグ「amp-ad extension .js script」がないか、正しくありません。これはまもなくエラーとなります
  12. 属性「action」はタグ「FORM [method=POST]」で使用できません
  13. タグ「amp-iframe」のレイアウト「width」に含まれる属性の値が無効
  14. タグ「FORM [method=GET]」の HTML 属性「action」の URL プロトコルが無効
  15. タグ「a」の HTML 属性「href」の URL プロトコルが無効
  16. 許可されていない属性が HTML タグ「a」にあります
  17. タグ「amp-iframe」の HTML 属性「style」の値が無効
  18. 許可されていない属性が HTML タグ「FORM [method=POST]」にあります
  19. 必須属性「target」がタグ「FORM [method=GET]」にありません
  20. タグ「amp-iframe」には拡張機能 JavaScript の「amp-iframe」が含まれている必要があります
  21. タグ「img」はタグ「noscript」の子孫としてのみ使用できます。「amp-img」ではありませんか?
  22. どうしてもエラーを改善できない場合
  23. 後書き

許可されていない属性または属性値が HMTL タグにあります

AMP Validator で確認するとこのようなエラーが表示されます。

The attribute 'loading' may not appear in tag 'amp-iframe'

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

Googleマップ

最近、Googleマップを埋め込むと自動的に「loading="lazy"」が付くようになったようです。これを削除すればエラーが解除されます。GoogleはAMPを推奨しているくせになんでこういうコードを付けるんだろう。

Facebook

そういえば、WordPress5.5のアップデートで自動的に「wp_lazy_loading」が付くようになったのですが、そのことを自分で記事に書いたのに忘れていました。子テーマの functions.php にこのように記述して放置したらエラーが解消されました。

// loading="lazy"削除
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

属性「rel」はタグ「a」で使用できません

え…アフィリエイトのリンクに付けるコレは別に良いと思うのですが。
というか付けろって言ったじゃん。放置…→合格

rel="sponsored nofollow"

CSS の !important 修飾子は使用できません

カッテネにマーカーが記されていますが、実際は他のアフィリエイトボタンが原因でした。はあ。
!important を削除すればエラーが解除されます。

AMP HTML タグの属性で指定されたレイアウトが無効です

タグ「amp-img」の属性「height」に無効な値「”525」が設定されています

画像を縮小した時に余計なものが入ったようです。直したら合格。

タグ「div」の属性「style」で検出されたプロパティは許可されていません

知らない間にトマレバに「zoom」が入っていました。なぜだ…削除したら合格。

カエレバも古いコードだとダメな時があるかも。入れ替えるしかありません。

<div class="tomarebalink-box" style="text-align: 
left; padding-bottom: 20px; font-size: small; 
zoom: 1; overflow: hidden;">

Googlebotがrobots.txtによってブロックされています

Google様をブロックしたことはございません。いつの間にか合格。

カスタム JavaScript は使用できません

タグ「amp-ad extension script」の親タグは「body」ですが、「head」のみ使用できます

放置→いつしか合格。

amp-auto-ads の head タグのスクリプトは自動で読み込まれるので不要です

エラーが急増したのですぐに分かりました。テーマ「ルクセリタス」の「add-amp-body.php」からamp自動広告コードを外したら解決。

AMP ページのドメイン不一致

リダイレクトしてあるのですがなんか不具合があるようです。そのうちに直るかと(適当)→合格

正規バージョンhttps://zbnr-hp.com/jojoen
AMP バージョンhttps://zbnrk.com/jojoen/amp

AMP ページが、正規バージョンのページとは異なるドメインでホストされています。これにより、モバイル端末から検索を行った場合に、検索結果に表示される URL ドメインと、AMP リーダーでページを開くときに表示される URL ドメインが異なってしまうため、ユーザーの混乱を招く可能性があります

Search Console ヘルプ

ウェブに関する主な指標

CLS に関する問題: 0.25 超(パソコン)

なんかサイトが遅いようです。PageSpeed Insightsではモバイル26、パソコン85でした。
でもこれって、アドセンス広告が原因なんですよね。だって広告を外したら100点に近くなるので。
どうにもできない…→合格

このページには AMP コンポーネントの「script」タグが必要ですが、このタグがありません

対象の画像を削除して入れ替えたら合格。

詳しくはこちらから

タグ「amp-auto-ads extension .js script」がドキュメントで複数回使用されています

テーマCocoonでコードが重複扱いになっていました。

詳しくはこちらから

推奨サイズより大きい画像を指定してください

アイキャッチ画像は幅1,200px以上にする必要があります。

詳しくはこちらから

「amp-ad」で必要なタグ「amp-ad extension .js script」がないか、正しくありません。これはまもなくエラーとなります

意味が分からないので放置→自然に合格。

属性「action」はタグ「FORM [method=POST]」で使用できません

AMP ではフォームは使えません。
よって、コメント欄は表示されませんし、パスワードをフォームに入力して閲覧する記事もアウト。
どうにもできませんので該当の記事は AMP から外しました。

タグ「amp-iframe」のレイアウト「width」に含まれる属性の値が無効

タグ「amp-iframe」の属性「width」に無効な値「100%」が設定されています。

The attribute 'width' in tag 'amp-iframe' 
is set to the invalid value '100%'.

初期の頃、「Googleマップは幅を100%にしたら見栄えが良い」的なことをどこかのサイトで拝見してその通りにしたらエラーだらけになりました。

タグ「FORM [method=GET]」の HTML 属性「action」の URL プロトコルが無効

どこが悪いのかさっぱりでしたがいつの間にかOK。

タグ「a」の HTML 属性「href」の URL プロトコルが無効

なんで&quot;が入っているんだ…

<a href="&quot;https://www.google.com/maps/d/embed
?mid=15FI3ILJ931uKyqpWJwUDUqIE_qM">地図</a>

許可されていない属性が HTML タグ「a」にあります

原因1. プラグイン「Lazy Load for Videos」

遅延ロードプラグイン「Lazy Load for Videos」はAMPでは使わない方が良い

原因2. shape属性

属性「shape」はタグ「a」で使用できません。

The attribute 'shape' may not appear in tag 'a'.

「shape属性」は入れた覚えがないのですが…

原因3. heightとwidth

後述しますが、AMPに反映させないようにしました。

属性「height」はタグ「a」で使用できません。

The attribute 'height' may not appear in tag 'a'.

属性「width」はタグ「a」で使用できません。

The attribute 'width' may not appear in tag 'a'.

タグ「amp-iframe」の HTML 属性「style」の値が無効

許可されていない属性が HTML タグ「td」にあります

なんでscopeが入っているのか。他の部分には入っていないのにー

<td style="width: 50%; text-align: center; background-color: #ededdd; 
height: 60px; border-style: groove;" scope="row">1か月あたり</td>

表は気をつけないとダメみたいですね。表の枠線を太くした箇所もエラーでした。

table border=”2″

「表のborder属性「2」を取り除く」

The attribute 'border' in tag 'table' 
is set to the invalid value '2'. Debug.

許可されていない属性が HTML タグ「FORM [method=POST]」にあります

タグ「input」の HTML 属性「type」の値が無効

アンケートのプラグイン「WP-Polls」が原因でした。
せっかくご回答1件いただいたのですがプラグイン削除。

必須属性「target」がタグ「FORM [method=GET]」にありません

いつの間にか合格。

タグ「amp-iframe」には拡張機能 JavaScript の「amp-iframe」が含まれている必要があります

「ampを付けろ」ということでしょうかね。他の修正をしているうちにいつの間にか直っていました。

タグ「img」はタグ「noscript」の子孫としてのみ使用できます。「amp-img」ではありませんか?

なんだ子孫って。放置→自然解決。

どうしてもエラーを改善できない場合

「width」と「height」を入れたらエラーになったのですが、これ説明文なんですよね。直しようがない。

こういった場合は、投稿画面にあるAMP設定で「AMPを生成しない」にチェックを入れて、AMP除去(AMPに反映させない)するしかないと思います(テーマはCocoon)。

後書き

AMP を導入する場合は、目新しいことには挑戦しない方が良いと思います。
「こんなプラグインがあるのか!こんなこともできるのか♪」
と挑戦した事柄はことごとくエラーになりました。

まだまだ修正箇所が多数あり、適当に記事を書いてきた私にとっては本当に大変。
しかし、AMPを攻略すると、内容はともかく構築的には100点満点のサイトを作ることが可能になるかと。

もう少しがんばりたいと思ったけど、AMPやめたらPV増えた

AMPが有効になっているか確認・修正する3つの方法