AMP 対応ページにすると、WordPress のテーマによっては AMPで見た場合にテキスト広告の前後に大きな空白が表示されることがあります。これは、企業が広告のカウントを取得するために <img src～> で小さい画像 <width="1" height="1" border="0"> を埋め込んでいるためです。
企業にとっては便利な機能でしょうが、意味不明な空白が表示されていると読者の離脱の原因となるので対処してみました。
バリューコマース：Cocoon
広告タグを貼った場合
<a href="URL" rel="sponsored nofollow"> <img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=**&pid=**" height="1" width="1" border="0"> 自由テキスト</a>
AMP では img タグの部分が空白の形で表示されました。空白が大きすぎて意味不明。
AMP対応タグを貼った場合
amp-img タグを入れたテキストコードをコピペすると、AMPではテキストごと消えました。つまりは全く表示されなくなります。
<a href="URL" rel="sponsored nofollow">自由テキスト</a> <amp-img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=**&pid=**" height="1" width="1"></amp-img>
バリューコマース：ルクセリタス
広告タグを貼った場合
Cocoon と同様に、AMP では img タグの部分が大きな空白の形で表示されました。
AMP対応タグを貼った場合
AMP でも AMP でない場合もどちらでも表示されましたが、自動的に amp-img タグの部分がすっぽり消えていました。
以前はCSSで対策していた
amp.css にこのように記述し、
span.img-inline amp-img {
display: inline-block;
}コードを span タグで囲めば空白は表示されなくなったのですが、いつの間にやら効かなくなっていました。
<span class="img-inline"> コード </span>
試しに、CSSにこのコードも追記してみましたが効き目はありませんでした。
.img-inline img {
display:none;
}A8.netの場合
A8.net
の場合「通常の広告リンク」を貼ると、貼り方によっては空白ができる場合があります。
このように書かれてある場合は、
<a href="URL" rel="sponsored nofollow">A8.net</a> <img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=**" alt="">
このように img タグを改行せず繋げるようにすると空白がなくなります。
<a href="URL" rel="sponsored nofollow">A8.net</a><img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=**I" alt="">
しかし「AMP対応リンク」を貼ると、空白はできないものの、画像コード「amp-pixel src～」の部分が自動的に消えていました。
<a href="URL" rel="sponsored nofollow">A8.net</a> <amp-pixel src="https://www10.a8.net/0.gif?a8mat=**" layout="nodisplay"></amp-pixel>
結論
バリューコマースのテキストコードは、何をやっても空白が消えない場合に限り「img タグは削除しても良いでしょ」という結論になりました。本当は削除したらいけないようですけどね。まあ、自己責任ということで。
- バリューコマース 「通常コードだと大きい空白が表示される」「amp コードだとテキスト自体が消える。貼る意味がない」
- A8.net「通常コードだと大きめの空白が表示される場合がある」「ampコードだと表示はされるけど amp コードが消えている」
尚、バナーコードを貼ると下部にほんの少し空白ができますがそれは気にしていません
楽天とAmazonコードは空白ができることはありませんし（たぶん）、コード改変にはとても厳しいのでそのまま貼り付けましょう！
