amazonアソシエイトとamazonアソシエイト導入に伴うGoogle AMPのエラー修正についての記事です。
エラーについてGoogle Search Consoleで以下のエラーメッセージが出た場合
・「AMP HTMLタグの属性で指定されたレイアウトが無効です。」
・「許可されていない属性または属性値がHTMLタグにあります。」
解決策を簡潔に説明すると以下のようにamazonアソシエイトのHTMLコードを修正します。
元コード(問題部抜粋)
mp;f=ifr” frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>
修正後コード(問題部抜粋)
mp;f=ifr” frameborder=”0″ width=”0″ height=”0″ scrolling=”no”>
「marginwidth」と「marginheight」の「margin」を消すだけです。
amazonアソシエイト(アフィリエイト) 導入
amazonアソシエイトは簡単にいうとamazonで扱っている商品のネット広告です。
アソシエイトに登録するとすぐに広告を表示できるようになります。ただ登録後180日(約半年)以内に広告クリックからの商品購入が3件発生した時点でamazonアソシエイトの審査が実施されるようです。
180日以内に商品購入が発生しなかった場合どうなるかは、よくわかっていませんw すみません。
以下でざっくり導入手順を解説していきます。
①amazonのヘッダーメニューの「アソシエイト（アフィリエイト）」をクリックし、必要事項を入力し、アソシエイトに登録します。登録するとamazonアソシエイトを使い広告を表示させることができるようになります。
②登録後、アソシエイトページの「商品リンク」プルダウンメニューから「商品リンク」をクリックします。
③商品リンクページの商品検索欄で「検索キーワード」に表示したい広告の商品名を入力し、「検索ボタン」をクリックします。
④商品検索欄の下に検索結果が表示されます。目当ての商品の「リンク作成」ボタンをクリックします。
➄上のメニューで広告表示タイプを選択します。例では「テキストと画像」を選択。次に「1.リンクをカスタマイズする」で広告のレイアウトを指定します。
⑥ ➄の画像下の「3. この商品リンクのHTMLを取得する」項目で「選択する」ボタンをクリックすると広告のHTMLコードをコピーできます。
⑦Webサイトの編集ページ内にコピーしたHTMLコードを貼りつけます。
例ではWordPressサイトで説明します。ブロックエディターで「HTMLを挿入」をクリック
コード入力欄にコピーしたHTMLコードを貼り付けます。
⑧以下のように広告が表示されれば完了です。※編集画面で広告にスクロールバーが表示されていても無視して問題ないです。
●別パターン
amazonアソシエイトに登録するとamazonのサイトにアクセスした際にヘッダー上部に下の画像のように「Amazonアソシエイトツールバー」が表示されます。任意の商品ページで広告タイプを選択します→HTMLコードが生成されるのでコピーします。あとは、上記の手順⑦の方法でWebサイトに広告を表示できます。
Google AMPエラー解決法
amazonアソシエイトを導入して一仕事終えたつもりでいたらGoogle Search Consoleから「「AMP」の問題が新たに 検出されました」とメールが届き何のことか全くわからないなか色々調べていくと
まずAMP(Accelerated Mobile Pages)とは、簡単にいうとGoogleが推進しているモバイルページを高速表示させるための手法です。
Google Search Consoleでエラー詳細(?マーク)を見ると「このAMPページは、検索結果には表示されません。」とのメッセージがありました。通常のページは表示される訳ですが「AMPページが表示されない」と言われていてそのままにしておくのも嫌なのでネットで解決策を調べましたが解決方法は、似ているものの管理人の場合はエラーが直りませんでした。結果試行錯誤して「margin」を消すだけで解決する結論にたどり着きました。
AMPエラー内容詳細
・エラー①
AMP HTMLタグの属性で指定されたレイアウトが無効です。
エラー詳細①
必須属性「height」がタグ「amp-iframe」にありません。
・エラー②
許可されていない属性または属性値がHTMLタグにあります。
エラー詳細②
②-1：属性「marginwidth」はタグ「amp-iframe」で使用できません。
②-2：属性「marginheight」はタグ「amp-iframe」で使用できません。
※管理人の場合「marginheight」のエラーを修正後に「marginwidth」のエラーメッセージが追加されました。
AMPエラー解決方法
既に冒頭で記載した通りですが「margin」を消すだけです。WordPressを使用している場合は編集画面の右上のタブを「ビジュアル」から「テキスト」に変更します。そして以下のようにamazonアソシエイトのHTMLコードを修正します。
元コード(問題部抜粋)
mp;f=ifr” frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>
修正後コード(問題部抜粋)
mp;f=ifr” frameborder=”0″ width=”0″ height=”0″ scrolling=”no”>
「marginwidth」と「marginheight」の「margin」を消すだけです。
この後、Google Search Consoleで「公開URLをテスト」をクリックしてエラーがでなければ修正申請をしましょう。
因みにエラー発生後にGoogle Search Consoleをみると4ページエラー対象になっていたのですがamazonアソシエイトを導入したページは、もっと多いので4ページ修正後にまた別ページでエラーがでているとメッセージがきたので指摘されていないページも全て直して申請した結果、今は解決しました。なのでamazonアソシエイト導入時に「marginwidth」と「marginheight」から「margin」を消してしまいましょう！
以上です！あとは半年以内に誰かがamazon広告から商品を3つ購入してくれるのを祈るだけですw