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

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

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

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

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

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

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によってブロックされています

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

カスタム 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点に近くなるので。どうにもできない…→合格

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

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

え…アフィリエイトのリンクに付けるコレは別に良いと思うのですが…放置…→合格

rel="sponsored"

このページには 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時々イヤになる

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

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


タイトルとURLをコピーしました