2018/04/03 web制作 上谷亮太

jQueryを使って外部リンクに_blank、アフィリンクにnofollowを付与させるソース

タイトルの通りです。

jQueryを使って、外部リンクに別タブ（target="_blacnk"付与）、アフィリンクにnofollowを入れるソースをシェアします。

メディアやブログ作ってると、リンクの設定するのめんどくさいですよね。このソース使って少しでも楽してくださいませ〜。

サイト全体に影響があるので、フッターとかサイドバーでも有効なので痒い所に手が届く届くはずです。

なお、注意点が2点あります。

• 「自分のサイトのドメイン」を入力する
• アフィリンクはASPに応じてソースを変更する

アフィリンクのnofollowは、ASP毎にソースへ手動で設定する必要があるので、使うときはあなたが使っているアフィリンクの文字列を入れてあげてください。

例えば、a8なら

「https://px.a8.net/〇〇」

みたいなアフィリンクになるので、px.a8をmatchの中の「自分が使っているASPの名前」部分に入れるような感じで。

使っているASPの数に合わせて、適時加筆してください。（else ifを増やせばOK）

今回は例として、a8とアフィBを入れてます。

$('a').each(function(i) {
 
   // 外部リンク判定 target:_blankの付与
    if ($(this).attr('href').match(/http/)) {
        if (!$(this).attr('href').match(/自分のサイトのドメイン/)) {
            $(this).attr({
                target: '_blank'
            });
        }
    }

    // アフィリンクにnofollow。aspの名前を入れる
    if ($(this).attr('href').match(/px.a8/)) {
        $(this).attr({
            rel: 'nofollow'
        });
    } else if ($(this).attr('href').match(/affiliate-b/)) {
        $(this).attr({
            rel: 'nofollow'
        });
    } else if ($(this).attr('href').match(/自分が使っているASPの名前/)) {
        $(this).attr({
            rel: 'nofollow'
        });
    }
});

jQueryが必須なので、事前にjQueryを読み込んでくださいませ〜。