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

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

AMP(Accelerated Mobile Pages)とは
Googleが主導。モバイルページを高速で表示させるためのプロジェクトのこと
タグ「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 プロトコルが無効

 

いまだに不明。どこが悪いのかさっぱりです↓

赤坂 炭火焼肉 金星でランチ。良質なお肉だけど格安

 

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

 

なんで"が入っているの…

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

 

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

 

プラグイン「Lazy Load for Videos」が原因でした。

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

 

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

 

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

The attribute ‘shape’ may not appear in tag ‘a’.

 

どうしてこの場面で「shape属性」が入るのかなあ。

 

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

 

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

The attribute ‘height’ may not appear in tag ‘a’.

 

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

The attribute ‘width’ may not appear in tag ‘a’.

 

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

 

babylinkが原因でした。

こういうの。

 

自動的に「zoom: 1」が挿入される場合があるようです(marginだけで良いのに)。

<div class=”babylink-box” style=”overflow: hidden; font-size: small; zoom: 1; margin: 15px 0; text-align: left;”>

 

zoom: 1」をいちいち削除して使うか、もしくは、babylinkは使わない方が良いかもしれません。

というか、babylinkで表示してある箇所がまだまだあるーまた「直してね」のGoogleメールが届くのでしょうか。もう。まあ自分で隅から隅まで探す必要はないだけ楽ですけどね。

 

タグ「amp-iframe」の HTML 属性「style」の値が無効。許可されていない属性が HTML タグ「td」にあります

 

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

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

 

とにかく表は気をつけないとダメみたいです。

表の枠線を太くした箇所もエラーでした。

table border=”2″

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

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

 

許可されていない属性が HTML タグ「FORM [method=POST]」にあります。タグ「input」の HTML 属性「type」の値が無効

 

アンケートのプラグイン「WP-Polls」が原因でした(:_;)

せっかくご回答1件いただいたのに。

AMPって制限ありすぎ

 

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

 

いつの間にか「合格」していましたので詳細は不明です。

https://zbnr-hp.com/chrome/?amp=1 他多数。

 

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

 

「ampを付けろ」ということでしょうかね。

他の修正をしているうちにいつの間にか直っていました。

 

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

・・・

知らんがなー

 

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

 

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

直しようがない。

 

 

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

 

 

ついでにモバイル ユーザビリティエラー

クリック可能な要素同士が近すぎます

見直しましたがこれは良く分かりませんでした。

これも↓

コンテンツの幅が画面の幅を超えています

放置していたらいつの間にかOKになっていました

 

後書き

 

AMPサイトを目指す場合は、目新しいことにはあまり挑戦しない方が良いと思います。

「こんなプラグインがあるのか!こんなこともできるのか♪」はことごとくエラーになりました。

 

AMP。時々イヤになる

 

まだまだ修正箇所が多数あり、適当に記事を書いてきた私にとっては本当に大変です。

しかし、AMPを攻略すると、内容はともかく構築的には100点満点のサイトを作ることが可能になります。もう少しがんばりたいと思います。

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