Amazonアソシエイトが原因のAMPエラーを修正

正しく修正できたのかまだ結果が出ていませんし、すべての修正が完了したわけではありません。(PROOM2の修正作業はまだこれからです)

ただAmazonアソシエイトが原因のAMPエラーの存在を知って、その対処をしました。(Amazonアソシエイト=アフィリエイト)

もう少し早く知っていれば、もっと楽に修正できたのでしょうけれど、記事数が多くなってきたタイミングでそれを知ったので修正作業に時間がかかってしまいました。(ちょっと疲れた・・・)

AMPエラーがありますよというページをいくつか見ているうちに、その問題となっているページにAmazonのアフィリエイトリンクがあることに気付きました。

そこで「AMPエラー Amazonアソシエイト」で検索。

わかったことはAmazonアソシエイトには<iframe>が使われていて、それが原因でAMPエラーになるということです。

つまりiframeタグは使えないということです。

と、わかったようなことを書いてますが、「どういうこと?」と訊かれても私には「?」です。

私のような知識の無い人にもわかるような答えとしては、Amazonアソシエイトの画像のある商品バナーで販売価格も表示されているモノはAMPエラーになるということです。

つまり、画像だけとか文字だけのリンクは大丈夫だけど、画像と価格が一緒に表示されいるのはダメ。(この表現で正しいのかどうかも私にはわかりませんが・・・)

ということで、とにかく画像と販売価格が一緒になったのを片っ端から変更しました。

どう変更したかと言いますと、画像+「詳細ページへ」のボタンという組み合わせに変更しました。

ただし、この修正作業が完了してから思ったのですが、今度は旧ブログでたくさん発生していた「モバイルユーザビリティ」の問題が出てしまうのではないかと・・・

「クリック可能な要素同士が近すぎます」っていうやつです。まぁそうなったらそうなったであとで考えます・・・

ということで、具体的にどうやったかですが・・・

まずはこれ。

Amazonから2020年11月10日の発売日に届いたXbox ワイヤレスコントローラー(ロボットホワイト)の「テキストと画像」のリンクバナーです。

これがAMPエラーの原因である<iframe>が含まれているリンクバナーです。(ということで、これはバナーではなく画像として貼り付けてあります。クリックしてもAmazonの商品ページは開きません)

では、AMPエラーの原因である<iframe>を含まないリンクバナーとはどんなのかといいますと・・・

Xbox ワイヤレスコントローラー(ロボットホワイト)

これはテキストリンクです。(クリックするとAmazonの商品ページが開きます)

そしてもうひとつがこれ

これは画像リンクです。(これもクリックするとAmazonの商品ページが開きます)

ちなみにAmazonの商品リンクはアソシエイトツールバーから簡単に作れますが、画像リンクは画像の大きさが3種類から選べます。(上記画像リンクは小サイズ)

次が中サイズ(クリックするとAmazonの商品ページが開きます)

そして次が大サイズです。(クリックするとAmazonの商品ページが開きます)

秘密基地No.12の各サイトに表示していた「テキストと画像」のリンクバナーをAMPエラーが発生しないように変更したのがこちらです。(クリックするとAmazonの商品ページが開きます)

今回はスピード第一ということで、画像の大きさは特に考えもなくすべて大サイズにしました。(あとから見るとちょっと大きかったような気も・・・)

画像のリンクバナーと、さらに画像下に「Amazon 詳細ページへ」というボタンにテキストリンクを埋め込んでいます。

この「Amazon 詳細ページへ」というボタンはAmazonで用意している既成のボタンです。

この修正作業が完了してから気づいたのが画像リンクとその下のリンクを埋め込んだボタンが近すぎるということです。たぶんモバイルユーザビリティでの問題で「クリック可能な要素同士が近すぎます」とお小言をもらってしまうのでしょう・・・

まぁセンスのない私にはこの程度のことしか出来ませんが、もっと知識と技術とセンスのある方なら見てる人が注目するようなコメントを入れたり、もっとバランスよく配置したりできるのでしょうね・・・

知識不足の私には、これ以上具体的なことはお伝え出来ませんのでここまでです。

もっと詳しい情報が必要な方は「AMPエラー Amazonアソシエイト」等で検索してみてください。

今回の修正を行っている間に、別なAMPエラーも見つけました。

それはA8.netで利用している楽天市場のリンクバナーです。

それがこちら・・・

これもリンクではなく画像として貼り付けてあります。(コントロールルームの記事にはまだそのまま残っています)

たぶんこれもAmazonの「テキストと画像」のリンクと同じだと思いますのでAMPエラーでしょうね。

こちらはとりあえずしばらくはこのまま放置。私に時間と元気がある時に修正する予定です。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です