AMPエラーの原因を確認する

Search Consoleを見たら、

タグ「amp-iframe」に必須属性がありません。

のエラーが起きていました。下は、そのときの画面。

このエラーは、原因がわかっています。Amazonの広告タグを貼り付けると、これが出ます。念のため、エラーが報告されているページをチェックしてみたところ、やはり、Amazonの広告を貼ったページでした。直せばいいのですが、ほとんどアクセスのないページなので、直すのが面倒で放置^^;

[スポンサードリンク]

Amazonタグではなかった

ところが、エラーが報告されているページをいくつか見ているうちに、Amazonの広告を貼っていないページもあることに気づきました。これは原因がわからないので気持ち悪い。調べます。

実際に、AMPページを見てみると特徴的なことに気づきます。

画像の上に大きく隙間が空いているのです。

そして、デベロッパツールで問題のところ調べてみると、Googleマップを埋め込んだところに「amp-iframe」のタグが入っています。

よくよく見ると、これが二ヶ所。両方とも、Googleマップを埋め込んだことになっています。そして、上の方が画面上で空白になっています。画像の上が広く空いているのはこれが原因でしょう。

[スポンサードリンク]

キーワードは「lazy」

さらに良く見ると、そこには「lazy」の文字があります。

これでピンときました。サイトの高速表示のために、Lazy Loadのプラグインを使っています。これは、画像の読み込みを後回しにする機能です。文字コンテンツだけを先に読み込み、画像コンテンツは後回しにすることによって、体感的な速度を上げてくれます。

Lazy Loadのプラグインはたくさんあります。このサイトで使っているのは「a3 Lazy Load」というプラグイン。とりあえず、このプラグインを停止してみました。

再び、デベロッパツールで確認。

Googleマップが二つ埋め込まれた格好になっていたのは解消しています。

画像の上が広く空くのも解消しています。Lazy Loadによるものですから、すべての画像に同じように影響していたのでしょう。

[スポンサードリンク]

a3 Lazy Loadを止める

Lazy Loadの機能は、使っているテーマ(Simplicity)にも組み込まれていたので、そっちを有効にしてみました。これだと、今回のような問題は起きないようです。なぜ、別のプラグインを使ったのかは忘れました^^;

とりあえず、これで、Search Consoleの検証に出してみました。

[スポンサードリンク]

Search Consoleのテストに合格

しばらく経ってからSearch Consoleを見たところ、このエラーに関しては「合格」していました。

「詳細を表示」をクリックして内容をチェック。

「保留」になっているものがあります。この下にそのURLが記載されており、実際に開いてみると、Amazonのタグを貼っているページであることが確認できました。原因がわかったで、とりあえず良しとします。


スポンサードリンク