「AMP HTMLタグの属性で指定されたレイアウトが無効です」と出た場合の対処法

「AMP HTMLタグの属性で 指定されたレイアウトが無効です」 と出た場合の対処法気になって調べたこと
この記事は約5分で読めます。

皆さんこんにちは。

今回はいつもと違う内容ですが、備忘録代わりに書いておきます。
公開することで情報共有になればと思っています。

スポンサーリンク

Google Search Consoleから警告が

先日メールを確認すると、Google Search Console Teamからお知らせが来ていました。

今までにも何回かエラーは発生していましたし、また何かエラーを起こしたのかな…

と思って読んでみたら、やっぱり案の定エラーでした。

ちなみにエラーの多発は大体私の人的ミスによるものなので、もっと細かなことに気が付く方なら、数はもっと少なくなっていると思います(汗

スポンサーリンク

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

そこにはこのように書かれていました。

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

エラーの詳細を見てみると、どうやらAmazonのアフィリエイトリンクでエラーが起きた様子です。

はて…。
このリンク自体はAmazonから提供されたものをそのままコピペで貼ったものだし、AMP HTMLの記述なんてしていないし、そこを無効とか言われても…。

私自身はこの程度の初心者なので、どう直したらいいのかさっぱり分かりませんでした。

AMPエラーの対応策

AMPエラーの対応策1ーリンク貼り直し

まず初歩的ですが、とりあえずリンクを貼りなおしてみました。
そしてGoogle Search Consoleのページの検証開始ボタンを押してみたところ…失敗!

この方法何故だか分からないけれど、たまに有効なんですよね。でも今回のこのエラーには効かなかったようです。

スポンサーリンク

AMPエラーの対応策2ー直接高さと幅の指定をする

調べてみたら、どうやらHTMLタグに直接高さと幅の指定が必要だということが分かりました。

そのためスタイルシート

<iframe style=”width:120px;height:240px;”

この部分を取っ払い、値をそのまま記述してみました。

<iframe width=”120″ height=”240″(以下略

みたいな感じです。

修正し、Google Search Consoleのページの検証開始ボタンを押してみたところ…またもや失敗!
まあ当たり前ですよね。しかし初心者はこれが茨の道に感じます。

スポンサーリンク

AMPエラーの対応策3ースタイルシートでheight,width指定後、再度直接の指定をする

もっと調べてみると、スタイルシートの記述に高さ(height)と幅(width)指定は必要だけれど、それに併せて、直接高さ(height)と幅(width)の指定も必要、ということが分かりました。

なぜスタイルシートで指定しているのに改めてまた改めて直接指定が必要なのか、素人の私にはさっぱり分かりません。しかし事実としてそうらしいので、それに従うことに。

<iframe width=”120″ height=”240″ style=”width:120px;height:240px;(以下略

以上のように修正し、Google Search Consoleのページの検証開始ボタンを押してみたところ…またもや失敗!

またか、また失敗か…。もうAmazonアフィリエイト止めようかな…。

AMPエラーの対応策4ースタイルシートでheight,width指定後、再度直接の指定を最後の方で行う

さらに調べてみると、どうやら直接指定は最後に記述するといいらしいことが分かりました。
赤字が追記したものです。

<iframe style=”width:120px;height:240px;(略)~height=”240″></iframe>

以上のように修正して、Google Search Consoleのページの検証開始ボタンを押してみたところ…

成功!!

スポンサーリンク

今回のAMPエラーで学んだことまとめ

ということで、今回分かった、Amazonのアフィリエイトリンクを貼るときの注意点としては

  • スタイルシートの記述にwidthやheightのプロパティの指定は必要だけれど、併せて直接高さ(height)と幅(width)の指定も必要
  • 直接指定は最後に記述した方が無難らしい

とりあえず私はこれで解消されました。
ちなみに今回はwidthの直接指定をしないでも大丈夫でした。

AMPエラーの時の頼もしい味方サイト

今回のAMPエラーで大きく活躍してくれたサイトを最後に紹介します。

Google提供のAMPテストサイトです。

AMP テスト - Google Search Console

ここに該当するサイトのURLを入力し、チェックを行うと、何が問題なのかもう少し詳しく教えてくれます。

しかし具体的にどのように直したらいいかは書かれていないので、やっぱり素人ではこの情報をどのように生かすかが難しいですが!

スポンサーリンク

参考にさせて頂いたサイト様

最後に勉強をさせて頂いたサイト様を下記に紹介します。

[AMP HTMLタグの属性で指定されたレイアウトが無効です。]を対策
Search Consoleから突然以下のようなメールが送られてきた。「貴サイトに影響するAMP関連の問題が 1 件検出されました。 」「エラーにより、貴サイトのページまたは機能が検索結果に表示されなくなる可能性があります。」などと書かれて
AMPエラー「必須属性「height」がタグ「amp-iframe」にありません」
AMPを有効にし、Google AMPテストを実行したところ、 「必須属性「height」がタグ「amp-iframe」にありません」と表示されております。 検索したところ下記投稿同様、Amazonアソシエイトまわりのところでエラーとなっているのでは?と、推測しています。 エラーソ...

スポンサーリンク

コメント

error:Content is protected
タイトルとURLをコピーしました