AMP対応ページにすると、広告の下に空白が表示されることがあります。
これは、企業が広告のカウントを取得するために<img src～>で小さい画像<width=”1″ height=”1″ border=”0″>が埋め込まれているからです。
この<img>タグを削除すれば解決することがあるのですが、色々とまずいようですのでCSSで対策しました。
まずは、AMPのスタイルシートCSSに次のように記述します。
/* AMP広告改行しない*/
span.img-inline amp-img {
display: inline-block;
}
記述場所は、Cocoonの場合、ダッシュボード→外観→テーマエディター→Cocoon Child→amp.cssになります。
「/* AMP用のスタイルを書く */」の下に記載します。
次に、アフィエイトのタグを<span>で囲みます。これで妙な改行は表示されなくなるはず。
尚、スパンのクラス名は（この場合はimg-inline）他のクラス名でも構いません。
<span class=”img-inline“>
アフィリエイトタグ
</span>
楽天アフィリエイト
モバイルで見るとバナーは表示されていますが…
末尾に「?amp=1」を付けて見てみたら、真っ白でした。
この場合もCSSのインライン表示を行ったところ表示されるようになりました。
尚、楽天ウィジェットはJavaScriptを使っているのでAMP対応ページでは表示されません。残念。
Amazonアソシエイト
<ifame>タグなのでAMP非対応。
試しに＜amp-iframe＞に直してみましたがエラーでした。
現状では、こういったバナーは貼れないということになります。
Amazon商品ページに表示される「アソシエイトツールバー」の場合、テキストと画像のリンクは貼れますが、「テキスト＋画像リンクは✖」ということになります。
A8.netの場合
バナーを貼りたい場合は「通常のリンク」ではなく「AMP対応リンク」を貼ります。
テキストリンクの場合は、<img>表示がありますので、CSSで空白が表示されないよう設定します。
バリューコマース
バナーを貼りたい場合は、通常のリンクではなく「AMP対応リンク」を貼ります。
テキストリンクの場合は、A8.netと同様にCSSで空白が表示されないよう設定します。
カエレバ、トマレバ、カエレバ
当ブログでは「amazle風-2(cssカスタマイズ用)」で作成しています。
スマホから確認したところ問題はありませんでした。
GoogleのAMPテストでも問題なし。
後書き
AMPは本当にややこしい。
楽天もAmazonも、AMP対応のバナーやウィジェットを作ってほしい。
他にも、リンクシェアやTGアフィリエイトを登録していますが、使い勝手がいまいちでしたので放置しています。
アクセストレードは「通常画像バナーもAMP対応広告になりました！」と書かれてあるので貼りやすいのでしょうか？今度試してみます。
※じゃらんはこの方法では無理なようです。また今度やってみます。
