当みかんアルゴリズムは一部スクリプトを使用しているページ以外は、AMP対応を完了しています。
ここではAMP対応を考えている皆さんに向けて、AMP対応後のアフィリエイト広告の貼り方・設定方法を公開していきます。
AMP対応をする参考にしていただければと思います。
※本記事ではASPの広告コードの一部修正方法を記載していますが、ASPによってはコードの改編を禁止している場合があります。修正に関しては各ASPの規約事項を理解したうえで自己責任で修正頂けます様お願いいたします。
本記事に掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
ブログのAMP対応 ４部作
本テーマは以下の４部作で記事を公開していきます。
第４段 AMP対応後のアフィリエイトの方法
今回は【第４弾 AMP対応後のアフィリエイトの方法】についてです。
アフィリエイト広告
当サイトで提携しているアフィリエイト（ASP）は以下となります。
・もしもアフィリエイト（メインで運用）
・A8.net
・バリューコマース
・アクセストレード
・リンクシェア
また広告には以下のタイプを主に使用しています。
１．テキスト広告
２．バナー広告
AMP対応ページのテスト
それぞれ広告が適切にAMP対応出来ているかどうかは、１記事ずつ調べていく必要があります。
テスト方法はGoogle の「AMP テスト」にAMP対応ページのアドレスを入力してテストします。
THE THORの場合は通常ページのアドレスの末尾に「?type=AMP」を付けるとAMPページのアドレスとなります。
AMP テスト → https://search.google.com/test/amp?hl=ja
おそらく既存のアフィリエイト広告のままでは、以下の様なエラーが表示されるはずです。
有効なAMPページではありません 対処法
当サイトで遭遇した以下のエラーに対する対処法を記載していきます。
対処法は複数あると思われ、ここで紹介する方法はどちらかと言うと正攻法では無い方法です。
ですが既存の記事を再編集するなら、こちらの方か手間が少なくて済みます。
属性「border」はタグ「amp-img」で使用できません。
AMP では img に border を指定してはいけない決まりになっています。
多くの場合、広告タグに「border=”0″」が指定されているため、そのままでは、本エラーが多発します。
対処法：border=”0″を削除
エラーの対象となっている広告コードから《 border=”0″ 》を削除しましょう。
これでエラー「属性「border」はタグ「amp-img」で使用できません。」は解決です。
必須属性「height」がタグ「amp-img」にありません。
バナー広告を使用している場合、AMPページに変換される際にバナー画像のタグが<amp-img>に変換されます。
この<amp-img>には、画像の縦横サイズを示す「width」と「height」属性が必須と定義されています。
ですが、通常の広告コードにはこの「width」と「height」属性が含まれていません。
これがエラーの原因となっています。
対処法：イメージタグにwidth=”〇〇〇” height=”〇〇〇”を追加
THE THORの場合はバナー広告の画像を選択し、下記のように「編集アイコン」から「画像詳細」を開き、右下の「更新」をクリックすれば自動的に「width」と「height」属性が追加されます。
広告コードを直接編集する場合は、以下の様にwidth=”〇〇〇” height=”〇〇〇”を追加します。
適切な広告サイズは各ASPで事前に広告サイズを確認しておきましょう。
上記で変更完了となりますが、《border=”0″》はエラーとなりますので同時に削除しておく必要があります。
これによりエラー「必須属性「height」がタグ「amp-img」にありません。」は解決となります。
javascriptを使用した広告
広告の中にはjavascriptを使用した広告が存在します。
AMPページではjavascriptが制限されていることもあり、javascriptを使用した広告を貼り付けた場合には、上手く表示できない場合があります。
バリューコマースの場合
バリューコマースを例にあげると以下の画像のように、【javascript非対応サイト用広告タグ】といオプションが用意されています。
AMPサイト用広告には、このような【javascript非対応サイト用広告タグ】を使用することをおすすめします。
もしもアフィリエイト かんたんリンク
もしもアフィリエイトの【かんたんリンク】もjavascriptが使用されているのでAMPページでは表示されません。
こちらはコード修正では対応できませんので基本的に使用を諦める他ありません。
ただし代用策を用意しています（テーマ THE THOR 限定となります）
以下のリンクに THE THOR 用商品リンク作成ツールを参考にしてください。
”THE THOR”でAMP対応するなら、アフィリエイトはこれ一本できまり！！前回よりかなり洗練されたデザインになっていますので、サイトデザインの邪魔にならないと思います。『カエレバ』や『Rinke』で挫折した人も、これなら大丈夫！！[…]
AMP対応後のGoogleアドセンス広告まとめ
①AMP対応ページのテストでエラーを確認
②属性「border」はタグ「amp-img」で使用できません。
対処法：border=”0″を削除
③必須属性「height」がタグ「amp-img」にありません。
対処法：イメージタグにwidth=”〇〇〇” height=”〇〇〇”を追加
以上今回は、
第４段 AMP対応後のアフィリエイトの方法
について記載しました。
以上で、「ブログのAMP対応 ４部作」は終了となります。
AMP化対応には様々な、手間が必要になります。
AMPがGoogleが期待するSEO要素の必需項目となる前に、早めに対応しておきましょう。
この次は、近い将来おそらく5Gの普及で起こる変革に対応することになるでしょう。
我々ブロガーも変化に柔軟に対応していく必要がありますね。
前回記事
当みかんアルゴリズムは一部スクリプトを使用しているページ以外は、AMP対応を完了しています。ここではAMP対応を考えている皆さんに向けて、AMP対応後のGoogleアドセンスの設定方法を公開していきます。AMP対応をする参考にしていただ[…]
↓こちらの記事もおすすめ↓
ここでは本編を離れて、ネットで見つけた、または購入した一品を紹介していきます。ぱぱみかんさんが実際に 『買って』『使って』みたレビューも、しっかり書いています！！随時、追加更新していきますので見ていってください。 […]
街をあるいて偶然みつけた、美味しいもの。食べて終わるのも勿体ないですよね。ジャンルなく追加していこうと思っていますので、気になるお店や商品があれば、拾っていってください。お取り寄せ情報も載せていこうと思います。 […]
