皆さんこんにちは。
今回はいつもと違う内容ですが、備忘録代わりに書いておきます。
公開することで情報共有になればと思っています。
Google Search Consoleから警告が
先日メールを確認すると、Google Search Console Teamからお知らせが来ていました。
今までにも何回かエラーは発生していましたし、また何かエラーを起こしたのかな…
と思って読んでみたら、やっぱり案の定エラーでした。
ちなみにエラーの多発は大体私の人的ミスによるものなので、もっと細かなことに気が付く方なら、数はもっと少なくなっていると思います(汗
「AMP HTMLタグの属性で指定されたレイアウトが無効です。」
そこにはこのように書かれていました。
「AMP HTMLタグの属性で指定されたレイアウトが無効です。」
エラーの詳細を見てみると、どうやらAmazonのアフィリエイトリンクでエラーが起きた様子です。
はて…。
このリンク自体はAmazonから提供されたものをそのままコピペで貼ったものだし、AMP HTMLの記述なんてしていないし、そこを無効とか言われても…。
私自身はこの程度の初心者なので、どう直したらいいのかさっぱり分かりませんでした。
AMPエラーの対応策
AMPエラーの対応策１ーリンク貼り直し
まず初歩的ですが、とりあえずリンクを貼りなおしてみました。
そしてGoogle Search Consoleのページの検証開始ボタンを押してみたところ…失敗！
この方法何故だか分からないけれど、たまに有効なんですよね。でも今回のこのエラーには効かなかったようです。
AMPエラーの対応策２ー直接高さと幅の指定をする
調べてみたら、どうやらHTMLタグに直接高さと幅の指定が必要だということが分かりました。
そのためスタイルシート
<iframe style=”width:120px;height:240px;”
この部分を取っ払い、値をそのまま記述してみました。
<iframe width=”120″ height=”240″（以下略
みたいな感じです。
修正し、Google Search Consoleのページの検証開始ボタンを押してみたところ…またもや失敗！
まあ当たり前ですよね。しかし初心者はこれが茨の道に感じます。
AMPエラーの対応策３ースタイルシートでheight,width指定後、再度直接の指定をする
もっと調べてみると、スタイルシートの記述に高さ(height)と幅(width)指定は必要だけれど、それに併せて、直接高さ(height)と幅(width)の指定も必要、ということが分かりました。
なぜスタイルシートで指定しているのに改めてまた改めて直接指定が必要なのか、素人の私にはさっぱり分かりません。しかし事実としてそうらしいので、それに従うことに。
<iframe width=”120″ height=”240″ style=”width:120px;height:240px;（以下略
以上のように修正し、Google Search Consoleのページの検証開始ボタンを押してみたところ…またもや失敗！
またか、また失敗か…。もうAmazonアフィリエイト止めようかな…。
AMPエラーの対応策４ースタイルシートで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テストサイトです。
ここに該当するサイトのURLを入力し、チェックを行うと、何が問題なのかもう少し詳しく教えてくれます。
しかし具体的にどのように直したらいいかは書かれていないので、やっぱり素人ではこの情報をどのように生かすかが難しいですが！
参考にさせて頂いたサイト様
最後に勉強をさせて頂いたサイト様を下記に紹介します。
コメント