カエレバがAMPページで、表示できないときは?

ブログ
助手くん
助手くん
カエレバが、AMPで表示できないんです!
管理人
管理人
カエレバリンクのコードに、修正が必要です。

「Yahooショッピング」「7net」のリンクを入れると、AMPページでカエレバが表示されない症状を確認しました。

というわけで今回は、カエレバを AMP で表示できない問題を、解決していきます。

カエレバを AMP ページで表示できないときの解決方法

解決方法
  1. カエレバコードを、改行する
  2. 不要なHTMLを削除する

解決策は、2つあります。ひとつずつ、解決方法を解説します。


解決方法1:カエレバコードを、改行する

解決方法は、カエレバYahooショッピング前のコードを、改行すること!

改行する部分のコード詳細

Amazon</a></div>

<div class="shoplinkyahoo" style="

<div class="shoplinkyahoo" のまえで、改行するだけです。

これで無事に、AMP ページでもカエレバリンクを表示させることができるようになりました。


解決方法2:不要なHTMLを削除する

Kaereba amp nohyouzi3

もうひとつの解決方法に、カエレバリンクの HTML を削除する方法があります。

削除する HTML コード
  • height="1" width="1" border="0"

カエレバ IMG タグにある HTML コードを、思い切って削除すると、AMPページでも表示できるようになります。

HTMLの赤文字を、削除してみよう。

<img src="//ad.jp.ap.valuecommerce.com/servlet/atq/gifbanner?sid=xxxxxxx&pid=xxxxxxxxx" height="1" width="1" border="0">

これでAMP ページで、カエレバリンクが表示されます。

注意

「7net」の IMG タグは、クリックされたかを判定する重要な要素です。削除することで、正常にトラッキングできない可能性があります。またコードの改変になる可能性が高いので、不安な方は、改行をおためしください。


発生した症状

Kaereba amp nohyouzi

今回発生した状況は、AMP ページで、7net・Yahooショッピング入のカエレバが表示されないという問題でした。

デザインが崩れ、楽天市場と Amazon の表示が消えてしまうんです。

Kaereba amp nohyouzi2

「楽天市場」「Amazon」だけのリンクならば、AMP ページで問題なく表示できます。

Yahooショッピングをカエレバリンクに含めると、問題が発生していたので、カエレバ×Yahoo!ショッピング自動挿入機能を使って問題を回避していました。

まさか、たった1つ改行すれば問題解決できるなんて...思ってもみませんでしたよ。

表示されない原因

カエレバリンクで作成されるバリューマコースの IMG タグ HTML が、原因だと予想しています。

バリューマコースが悪いわけではなく、WordPress のテーマとの相性問題などさらなる原因が考えられます。

「7net」はもしもアフィリエイトをつかい、「Yahoo!ショッピング」は、カエレバ×Yahoo!ショッピング自動挿入機能を使うといいかもしれません。

発生した環境

WordPressの使用環境

まとめ

カエレバがAMPページで、表示できない問題の解決方法を解説してきました。まとめると、こんな感じです↓

まとめ
  1. カエレバコードを、改行する
  2. 不要なHTMLを削除する

AMP でカエレバを表示できないと、かなりの機会損失です。おなじ問題で悩んでいるブロガーの救いになれば、幸いです。

そのほか、記事更新に役立つブログツールの話は、こちらの記事をご覧ください↓

サウンドオルビス

4,902,796 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事