もしもアフィリエイトのかんたんリンクが"リンク"の３文字になって表示されない時の確認。

もしもアフィリエイトのかんたんリンクに商品が表示されず、"リンク"の３文字だけになってしまう時の確認と具体的な対処方法です。

以前、サイトの高速化のためにサイトのキャッシュ関係設定をごにょごにょした後にかんたんリンクの一部が表示されていないことに気が付きました。

JSの圧縮あたりを見直すと無事にかんたんリンクを表示することができたので、その時の内容をプログラムに詳しくない方にも分かるように解説します。

「リンク」の文字しか表示されない時は、JSの圧縮設定を確認しましょう！

この記事の目次

かんたんリンクがリンクの文字だけになる

既にご存じの通り、もしもアフィリエイトのかんたんリンクは、Amazon、Yahoo!、楽天の商品リンクを１発で画像付きで綺麗に作成できる超便利なサービスです。

かんたんリンクはこんな感じの（↓）コレ良いですよねぇ～

リンク

今やアフィリエイトに必須のツールで、当サイトもいつもお世話になっています。
かんたんリンクについてはこれくらいにしておいて、さっそく本題へ。

実は先日当サイトのキャッシュを触ったところ、一部のかんたんリンクに商品が表示されず、リンクの３文字だけしか表示されない！...という問題が発生しました。

その時の様子が以下です。

かんたんリンクに「リンク」しか表示されない...

幸い自分にはある程度サーバーキャッシュやJavaScriptの知識があり、早速確認したところ無事に解決できましたので、その時の解決方法をこの記事で共有します。

では早速参りましょう・ｗ・

リンクが表示されない原因はJavaScriptの圧縮

もしもアフィリエイトのかんたんリンクが「リンク」の３文字になって表示されない時は、９９％JavaScriptの読み込み方に問題があるはずです。

残りの１％はHTMLコードの貼り方ですが、こちらはHTMLを書けるところにコードをコピペするだけでOKなので当記事では割愛します。（貼り方は調べればすぐ出ます）

問題はJavaScriptの圧縮・結合にありますが、さらに根本的な原因はインラインのJSを圧縮して別のファイルにしている事にありました。ということで、具体的な対処法は以下です。

サイトキャッシュを無効にする（遅くなるので非推奨）
サイトのJS（JavaScript）の圧縮や結合の機能をオフにする
（WordPressの場合はテーマや、キャッシュプラグインの設定を確認する）
かんたんリンクに使用される「bundle.js」をJS結合から除外する

ただ上記の対処方法は、Webサイトの仕組みやサーバーキャッシュに詳しくない方には少し難しいと思います。なので順番に解説していきます。この記事を参考にサイトのキャッシュ設定を見直していただければ解決できるはず...。

①についてはデメリットが大きいのでこの記事では除外します。
ということで、この記事ではまず簡単な方法②から解説していきます・ｗ・
可能なら③の「bundle.js」を除外する方法のほうが良いので頑張りましょう！

対処法１．サイトのJS圧縮機能を停止する

かんたんリンクが表示されない時は、サイトのページキャッシュを生成する時点で、商品リンクの表示に必要なjsファイル（プログラム）も「圧縮・結合」という作業に巻き込まれている可能性が高く、リンクが表示されない原因のほとんどがこれです。

なので、サイトでjsキャッシュ自体を作らなければ解決できます。
jsのキャッシュ作成に関する設定はサイトの環境によってまちまちですが、例えばWordPressなら、テーマやプラグインで行えることが多いです。

WordPressテーマ「Cocoon」の設定画面

WordPressの無料テーマとして超有名な「Cocoon」を例にするなら、設定画面の

JavaScriptを縮小化する

という項目のチェックを外せばOKです。

キャッシュプラグインを使っている場合は、似たような設定が基本的にはあるはずなので確認してみて下さい。ただしこの方法は全てのJSを圧縮・結合しなくなるので、次の方法に比べるとサイトの読み込みスピードが結構落ちてしまいます。

対処法２．JS圧縮からbundle.jsを除外する

続いて「bundle.js」をキャッシュ作成時のJS圧縮・結合から除外する方法です。

もしもアフィリエイトのかんたんリンクには「bundle.js」というスクリプトが使われており、これを圧縮・結合していると商品が表示されないなどの不具合が出ることがあります。

更に詳しい内容はこの後に書きますが、分かる方はテーマやプラグインの設定から「bundle.js」のJSキャッシュ化を除外することでも解決できます。

プラグイン「LiteSpeed Cache」の設定画面

当サイトの場合は「LiteSpeed Cache」というキャッシュプラグインを使っているので、JS設定の中にある「JS除外」に、

dn.msmstatic.com/site/cardlink/bundle.js

という感じに指定しました。これでも解決できます。

「bundle.js」のみ圧縮しないという設定になるので、先ほどのJSファイル全部を圧縮から外した時ほどサイトスピードは低下しません。
分かるならこの方法がおすすめです。

根本的な原因はJSの圧縮・結合ではない

最後にインラインJSと、もしもアフィリエイトの「bundle.js」についての補足です。

ここまで「JSの圧縮・結合」が悪いように書きましたが、正確には「圧縮・結合」の作業は問題なく、根本的な問題は「インラインJSのファイル化」にあります。

というのもキャッシュプラグインの設定を色々試した結果、下記のように、

プラグイン「LiteSpeed Cache」のJSに関する設定

JS圧縮化：オン
JS結合：オン
JSは外部とインラインを組み合わせる：オフ

の状態で問題無くかんたんリンクが表示されたからです。

かんたんリンクのインラインJSのファイル化が根本的な原因

ちょっと専門的な内容になるので最後にしましたが、インラインJSが曲者でした。
インラインJSとは、HTMLのbody間にコードを直接書いてjsを読み込む方法です。

<html>
  <head>
        <!-- 一般的なJSの読み込みはココ（ヘッダー） -->
        <script src="https://example.com/test.js"></script>
  </head>
  <body>
    <h1>h1タイトル</h1>
      ほげほげほげほげ
      ほげほげほげほげ・・・
        <!-- もしもアフィリエイトのJSの読み込みはココ（インライン） -->
        <!-- START MoshimoAffiliateEasyLink -->
        <script type="text/javascript">(function(b,c,f,g,a,d,e){～省略～})(window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink");msmaflink({～省略～},"v":"2.1","b_l":[{～省略～});</script>
        <div id="msmaflink-XXXXX">リンク</div>
        <!-- MoshimoAffiliateEasyLink END -->
  </body>
</html>

こんな感じ。

本来ならサイトのhead間でbundle.jsを読み込むためのコードが必要ですが...
もしもアフィリエイトのjs読み込みはインラインでの読み込みなので、コピペだけで誰でも簡単に、必要なページだけに「bundle.js」が読み込まれるわけです。

ここまでは良いのですが、このインラインJSというのはページの高速化には少し微妙な使い方なので、高速化を目的とするキャッシュプラグインなどではこのインラインJSがファイル化されてしまうのです。これがマズイみたい。