LiteSpeed Cacheで楽天アフィリエイトの商品画像が表示されない問題と解決策

WordPressにLiteSpeed Cacheを入れていて、楽天アフィリエイトのリンクを記事に貼ったら商品画像だけ表示されない——そんな経験をした人は少なくないはずだ。

症状

楽天アフィリエイトの「テキスト+画像」タイプ（picttext）を記事に埋め込んだとき、以下のような状態になる。

  • 商品名 → 表示される
  • 価格 → 表示される
  • 「楽天で購入」ボタン → 表示される
  • 商品画像 → 表示されない（白い空白になる）

原因

LiteSpeed Cacheの遅延読み込み（Lazy Load）が原因だ。

LiteSpeed Cacheは表示速度を上げるため、ページ内の画像を遅延読み込みに変換する。具体的には <img src="実際のURL"> を <img src="data:image/gif;base64,..." data-src="実際のURL"> に書き換え、スクロールして画面に入ったときに初めて読み込む仕組みだ。

楽天アフィリエイトの商品画像は hbb.afl.rakuten.co.jp というドメインから配信されている。このドメインが遅延読み込みの対象になると、Lazy LoadのJSスクリプトがうまく動かないケースがあり、結果として画像が読み込まれないまま白抜きになる。

解決方法

楽天のドメインをLiteSpeed Cacheの遅延読み込み除外リストに追加するだけでよい。

WordPress管理画面 → LiteSpeed Cache → ページの最適化 → メディア設定

「遅延読み込みImageを除外」という欄に以下を1行ずつ追加する。

hbb.afl.rakuten.co.jp
image.rakuten.co.jp
thumbnail.image.rakuten.co.jp

設定を保存したら、LiteSpeed Cache → すべてをパージ を実行してキャッシュを再生成する。

確認方法

記事を開いてブラウザの開発者ツール（F12）→ネットワークタブで、image.rakuten.co.jp または hbb.afl.rakuten.co.jp へのリクエストが発生し、ステータスが200になっていれば正常に読み込めている。

まとめ

設定場所追加するドメイン
ページの最適化 → メディア設定 → 遅延読み込みImageを除外hbb.afl.rakuten.co.jp
同上image.rakuten.co.jp
同上thumbnail.image.rakuten.co.jp

キャッシュプラグインを使っている場合、アフィリエイト画像が表示されないときはまずここを疑うとよい。W3 Total CacheやWP Fastest Cacheにも同様の除外設定があるので、プラグインが違っても考え方は同じだ。

世界に一つだけのアートを。ご相談はお気軽にどうぞ

エアブラシを使ったカスタムペイントや似顔絵制作について、ご質問はありませんか？

※現在は体調療養のため新規オーダーの受付を一時停止しておりますが、「再開したら頼みたい」「こんなものは塗れる？」といったご相談やご質問はいつでも大歓迎です。

InstagramのDM、または下記フォームよりお気軽にご連絡ください✉️

お問い合わせフォームはこちら

返信を残す

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

PAGE TOP