AmazonアソシエイトリンクがHTML5のValidationに引っかかる

ポケットリファレンスの「HTML5&CSS3ポケットリファレンス」を例にします。

「テキストとイメージ」では次のタグになります。
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=penlabo-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4774164984" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

「テキストのみ」では次のタグになります。
<a href="http://www.amazon.co.jp/gp/product/4774164984/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4774164984&linkCode=as2&tag=penlabo-22">HTML5&CSS3ポケットリファレンス</a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=penlabo-22&l=as2&o=9&a=4774164984" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

「画像のみ」では次のタグになります。
<a href="http://www.amazon.co.jp/gp/product/4774164984/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=4774164984&linkCode=as2&tag=penlabo-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4774164984&Format=_SL110_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=penlabo-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=penlabo-22&l=as2&o=9&a=4774164984" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

ざっと見ただけでも気になるところがありますね。
「&」がそのままになっていることと、タグがXHTMLの終了タグになっていることです。

W3CのValidationに掛けてみましょう。

& did not start a character reference. (& probably should have been escaped as &amp;.)

The scrolling attribute on the iframe element is obsolete. Use CSS instead.

The marginwidth attribute on the iframe element is obsolete. Use CSS instead.

The marginheight attribute on the iframe element is obsolete. Use CSS instead.

The frameborder attribute on the iframe element is obsolete. Use CSS instead.

The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.

要は「&」は「&amp;」と書きましょう、iframeの要素はCSSを使いましょう、imgタグのborderはCSSを使いましょう、ということです。

これらのエラーを修正するスクリプトをやっつけで書きました。
商品によって生成されるコードが違うようなので、対応しきれないものもあるかもしれませんが、とりあえず動いているので公開します。

AmazonアソシエイトリンクHTML5クリーンアップ

本来はコードを完全に書き換えたほうがいいのですが、それはまた別の機会に。

コメントを残す

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