【AMP対応サイトは注意】Associates Link Builder 1.6.0で謎の1px画像が表示される現象を回避する方法
WordPress2018年3月19日
先日からGoogle Search ConsoleでいくつかのAMPページでエラーが発生していることが確認されました。原因を調べたところ、どうやら3月14日にアップデートした、Amazonアソシエイトのリンクを生成するWordPressのプラグイン「Associates Link Builder 1.6.0」が悪さしている模様。
おそらくWordPressでAMPページを実装しかつプラグインを使っている人は同じ事象に出くわしている人も多いのではないでしょうか。そこで本記事では、同バージョンのAssociates Link Builderを利用していてもAMPエラーが発生しないようにする方法をご紹介したいと思います。
AMPエラーの内容について
Google Search Consoleでエラーが出ているのでおやと思い確認すると、以下のエラーが複数のページで通知されていました。
AMPドキュメントでインラインの「style」属性を使用することはできません。「style amp-custom」タグを代わりに使用してください。
インラインでスタイル書いた覚えなんてないぞと思い、該当のページのソースを確認したところ以下の記述を発見。
<img src="https://ir-jp.amazon-adsystem.com/XXX" width="1px" height="1px" alt="" style="position: fixed !important; bottom: -1px !important; right: -1px !important; border:none !important; margin:0px !important;" />プラグインで生成しているAmazonアソシエイトのリンクの先頭に記述されていました。1pxの透明画像のようです。プラグインの導入時は確かになかったので、間違いなくバージョンアップした1.6.0の影響だろうとすぐに察知。
プラグインのファイルを検索すると、以下のファイルに該当の記述を発見しました。
/wp-content/plugins/amazon-associates-link-builder/lib/php/aalb_impression_generator.php上記ファイルの中身を見ると、たしかに同様のインラインスタイルで書かれたソースが確認できます。
return '<img src="' . $image_url . '" width="1px" height="1px" alt="" style="position: fixed !important; bottom: -1px !important; right: -1px !important; border:none !important; margin:0px !important;" />';対処方法
対象方法は2パターンあります。1つ目は、以下のようにimgタグ自体生成されないようにする方法です。
return '';もしくは以下のようにインラインスタイルを削除するだけでもエラーは解消することができます。
return '<img src="' . $image_url . '" width="1px" height="1px" alt="" />';- ※念のため編集の際は自己責任でお願い致します
何のためのソースなのか？
プラグインの公式サイトの変更履歴を見ると、以下のように記載されています。
Added Impressions data in reports shown on respective associates website. This will work only for ads rendered after upgrade to this release.
直訳すると以下のような感じです。
表示レポートにインプレッションデータを追加しました。これは、このリリースへのアップグレード後にレンダリングされた広告に対してのみ機能します。
phpファイルの中身にもコメントアウトで「impression tracking〜」と記載があるので、Amazon側でトラッキングするためのソースと解釈しました。
はっきり言って1pxとはいえdisplay:none;されているわけでもないのでデザインに影響する以上、ちょっとあまりいい気分じゃありませんね。。。
しかも「アップグレード後にレンダリングされた」ということは実質全てのリンクに影響するということです。
- ※実際かなり過去のページにも影響を及ぼしました
1pxだけ領域を保持するだけならまだしも、Web屋の芝生DIYのAMPページではこれのおかげでエラー発生だけでなく、びっくりするくらいレイアウト崩れを起こしてしまったので、というかAMP対応している人全滅でしょこれというような機能追加のされ方をしている点について、そのあたりどう考えていたのか開発者に小一時間問い詰めたいところです。
まとめ
冒頭で述べた通り、Associates Link Builder 1.6.0を利用し、かつAMP対応をされているサイトは影響を受ける可能性が高いと思われます。Amazon側でトラッキングするためのもののようなので、特にこのphpを改変しても動作に影響することはありません。
- ※しつこいようですが、編集の際は自己責任でお願い致します
本記事が同事象に遭遇された方のご参考になれば幸いです。