PROOM2のAMPエラー修正も完了しました

先ほどPROOM2のAMPエラー修正も完了しました。

今回のAMPエラー修正はAmazonアソシエイトに関連するエラーの修正のみです。

昨日のPROOM2以外のサイトと同じ作業でしたが、PROOM2の修正ではAmazonアソシエイトの画像リンクの大きさを中サイズで行いました。

もともと画像リンクのみの部分は修正せずそのままになっているところもあります。

昨日よりももう少し具体的に修正の作業工程をご説明。(ただし、これが正解なのかどうかはわかりませんので、ご自身のサイトでの修正は自己責任でお願いいたします。調べればもっと根拠のある説明のある修正方法が見つけられると思います。)

今回修正したAMPエラーは、Amazonアソシエイトの「テキストと画像」を使ったバナーリンクに<iframe>が使われていることによって起きるエラーの修正です。

まずは「テキストと画像」のバナーリンクを削除します。

「テキストと画像」のバナーリンクは上記のようなバナーです。(上記は画像として貼り付けてありますので、商品ページは開きません)

WordPressの編集作業としては「ブロックの追加」から「カスタムHTML」を選択。

「HTMLを入力」と表示されますので、そこにAmazonアソシエイトの画像リンクを貼り付けます。

次に「詳細設定」から「ブロックへ変換」をクリック。

するとブロックが2つ表示されます。ここで下のブロックを削除。(どうして消すかと言いますと、邪魔だからです。「どうして2つできるのか?」とか「なぜ消すのか?」、さらには「どうしてブロックに変換するのか?」とかを質問されても私には知識が無いので答えられません。ごめんなさい・・・)

次に画像リンクのブロックの「キャプションを入力」が選択されているのを確認して「よりリッチなテキスト制御」から「インライン画像」を選択。

ここでメディアライブラリーにあらかじめアップロードしておいた「Amazon 詳細ページへ」のボタンの画像を選択。

表示されたボタンを一回クリックして「幅」が表示されてから「リンク」をクリック。(ボタンをクリックせずに「リンク」を選択しても可能ですが、まれに正常にリンクが貼れないことがあります)

表示された「検索またはURLを入力」のところに今度はAmazonアソシエイトのテキストリンクを入力。

「新しいタブで開く」を設定してから送信。

最後に「配置を変更」から「中央揃え」をクリックして修正作業の完了です。

「中央揃え」にしているのは、言葉通りの意味でリンクバナーを中央に配置したいからです。ボタンを配置した時点で中央揃えになっているように見えるのですが、なぜかボタンの位置が少しずれることがありますので、ここで「中央揃え」に設定しています。ご自分のサイトデザインに合わせて「左寄せ」「右寄せ」等ご自由にお選びください。

全ての「テキストと画像」のリンクの修正が完了したら「公開」して完了です。

画像を使ってさらに簡単に説明すると・・・

画像リンクを貼る。

ボタンを配置する。

ボタンにテキストリンクを貼り付ける。

これで完成です。

「テキストと画像」のリンクを「画像」だけにすることでAMPエラーの修正は完了しますが、アフィリエイトとして考えるとこれだけではクリックしてもらえないので、私の場合は下にボタンを配置しました。

センスのある方は、もっと適切なコメントやリンクバナー等を使ってカッコいいデザインにしてください。

最後に大事なことを・・・

私は知識が無いのでこんな方法で解決しようとしていますが、たぶんこの方法では新たな問題を生んでしまうと思います。

昨日も書きましたが、「モバイルユーザビリティに問題あり」となってしまうと思います。つまり「クリックする要素同士が近すぎます」というやつです。

画像リンクとボタンのリンクが近すぎるからです。

ということで、ここまで説明しておきながら言うのもなんですが・・・

この修正方法はお勧めしません。

Amazonアソシエイトが原因でAMPエラーが発生している方はネット上で調べるともっとスマートな修正方法が見つかると思いますので、そちらをお勧めいたします。

以上でございます。

コメントする

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