WordPressでAmazonアソシエイトの商品リンクをAMP仕様にする方法

Amazonアソシエイトの商品リンクをWordpressでうまいこと修正して、AMP仕様にする方法の紹介です。

WordPressなどでAmazon商品の紹介をするときに、Amazon JSを利用している方も多いいと思いますが、AMPページではエラーになってしまいます。その対策などにも。

スポンサーリンク
レクタングル(大)広告

アソシエイトの商品リンクはAMP仕様だとエラーになる

まず、Amazonアソシエイトの商品リンクとは以下のようなAmazonが発行するタグを利用した商品へのリンクです。

タグはこんな感じになっています。

※見やすいように改行してあります。

このiframeをAMP用にamp-iframeに置換したとしても、以下のような点でAMPエラーになります。

  • width属性がない
  • height属性がない
  • style属性がある
  • src属性で読み込むURLがhttpだった時にエラーが出る(Amazon JSの出力するコード)

今回は、Amazonアソシエイトが発行する商品リンクを、Wordpress上PHPで処理してやることによって、AMPページで表示させても問題ないように出力させる方法です。

Amazon JSの出力タグ

ちなみにAmazon JSでAmazon商品リンクを表示させている場合は、以下のようなリンクが出力されます。

Amazon JSの商品リンク

ただしこれは、プラグイン名にAmazon JSとあるように、JavaScriptを用いてAmazon APIを呼び出し商品リンクを出力させています。

しかし、AMPページでは決まったJavaScriptしか利用できないため、スクリプトを用いた商品リンクは作成できません。

そういった「スクリプトが利用できないページ」のために、Amazon JSはnoscriptタグを用いて、以下のようなタグを出力します。

noscriptタグを用いて出力されるのは、アマゾアソシエイトで発行される商品リンクと同じです。しかも、Amazon JSで利用されているURLは、httpなので、これにも対応する必要があります(AMPの仕様でiframeのsrcにhttpsしか利用できない)。

参考 AmazonJSのAMP対応について

Amazonアソシエイトの商品リンクをAMP化させる

Amazonアソシエイトの商品リンクを、Wordpress側でうまくAMP化させるには、functions.phpに以下のコードを貼り付けます。

ちなみに、is_amp関数のような、AMPページを判別する関数は、環境(使用テーマ、プラグイン)に合わせて書く必要があると思います。上記のis_amp関数は、「投稿ページかつURLパラメーターにamp=1が含まれているもの」をAMPページと判別する関数になっています。

上記のコードで行っている処理は、以下のようなことです。

  • noscriptタグの削除(Amazon JS用)
  • URLにhttpが利用されている場合はhttpsを利用するURLに変換(Amazon JS用)
  • iframeをamp-iframeに置換する
  • iframeの属性にwidth・height属性等を付加する
  • scriptタグを取り除く(Amazon JS用)

まとめ

こんな感じで、Amazonアソシエイトの商品リンクを、AMP仕様に合わせたものにして表示させることができます。

PHPの置換を利用して無理やりAMP仕様に合わせるものではありますが、何とかこれでエラーは出なくなりました。

というわけで「Amazonアソシエイト標準の商品リンクをAMP化したい」とか「Amazon JSを利用していてもAMPページで商品リンクをエラーを出さずに表示させたい」なんて場合は、今回の方法を試してみると改善されるかもしれません。