ここでは、プラグインを使わずにnofollowタグを手動で入れる方法をご紹介します。
本来は、「WP External Links」というプラグインを入れておけば、外部リンク設定時にnofollowタグを自動挿入することが可能です。
![](https://ym-life.com/wp-content/uploads/2020/10/WP-External-Links4-1-300x158.jpg)
しかし、SWELLを使っている方で、このプラグインを入れると、稀に記事投稿時にエラーが発生する事例が発生しています。
そこで、本記事では記事投稿時に手動でnofollowタグを設定する方法をご紹介します。
nofollowタグを設定する意味
記事内に外部リンク(自分以外のサイトへのリンク)を付けた際、検索エンジンのクローラー(機械)はその情報まで読み取ろうとします。
そうすると、ドメインパワーを一部明け渡すことになり、SEOにおいてネガティブな影響が出てしまうと言われています。
それを防ぐために設定するのが、nofollowタグという値。
これを入れておくことで、設定したリンクにクローラーが回らないように指示することができます。
リンクにその他の適切な値がなく、そのリンクとサイトを関連付けたくない場合、またはリンク先のページをサイトからクロールさせないようにする場合は、nofollow の値を使用します
引用:Googleセントラル(Google に外部リンクの関係性を伝える)
デフォルトでは、リンク先のページまでたどってしまいますので、サイトと関連付けたくない場合は、nofollowタグの設定をしておきましょう。
【プラグインなし】nofollowタグを手動で入れる方法(SWELL)
プラグインを使わずにnofollowタグを入れる方法は、2つあります。
- テーマファイルを編集する
- 毎回手動で設定する
どちらの方法でも設定可能ですが、毎回手動で設定するのは大変すぎるので、①の方法を強くおすすめします。
テーマファイルを編集する
1つ目は、テーマファイル「function.php」を編集する方法です。
直接親テーマを触ってもいいのですが、そうするとテーマ更新の度に、設定をし直す必要がでてきてしまいます。
そのため、「function.php」の子テーマを作り、そちらを編集していくのがおすすめです。
子テーマの作り方
![](https://ym-life.com/wp-content/uploads/2023/07/3ac75508d36a031444c3f395c4f7f2a0-300x169.jpg)
子テーマができたら、「外観」→「テーマファイルエディター」を選択します。
![](https://ym-life.com/wp-content/uploads/2024/04/c50dc183a3d51150037ec32033233502.jpg)
「SWELL CHILD」を選択し、「funtion.php」ファイルを選択します。
![](https://ym-life.com/wp-content/uploads/2024/04/9c1809f334150b215e66431ca0b26d8a-1024x211.jpg)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
念の為、「funtion.php」はブラウザ上の2つのタブで開いておきましょう。万が一ファイル保存時にエラーが出た場合、もう一つのファイルを上書きすると、元に戻すことができます。
こちらの画像の箇所に、以下のコードを記載します。(改行して入れるといいですよ)
![](https://ym-life.com/wp-content/uploads/2024/04/422bf6ceb2f963a773b1d1e48bd2b83f-1024x537.jpg)
![](https://ym-life.com/wp-content/uploads/2024/04/422bf6ceb2f963a773b1d1e48bd2b83f-1024x537.jpg)
コードはこれ(コピーしてね)
function dont_follow_links( $html ) { // follow these websites only! $follow_list = array( $_SERVER['SERVER_NAME'], // my domain 'google.com', 'others.com', ); $html = preg_replace_callback('%(<a\s*[^>]*href="https?://(?:(?!(?:(?:www\.)?'.implode('|(?:www\.)?', $follow_list).'))[^"]+)"[^>]*)>%', function($m) { $nofollow = preg_replace('%\srel\s*=\s*(["\'])(?:(?!\1).)*\1(\s|$)%', ' ', $m[1]).' rel="nofollow noopener noreferrer">'; return $nofollow; }, $html); return $html; } add_filter('the_content','dont_follow_links',9999);
コードを入れたら、このような形になります↓
![](https://ym-life.com/wp-content/uploads/2024/04/d4ecdc42cbab14b52fda9ee49e805f5c-1024x819.jpg)
![](https://ym-life.com/wp-content/uploads/2024/04/d4ecdc42cbab14b52fda9ee49e805f5c-1024x819.jpg)
コードを入れられたら、「ファイルを更新」しておきましょう。
ここからは補足説明
ちなみに、このスニペットは、プラグインも使わずに既にrel属性が指定されていても上書きできるというスグレモノ。
つまり、SWELLが標準機能で設定しているものがあっても、新しく指定することができるのです。
※ここでは、「nofollow」に加えて、「noopener」「noreferrer」も指定しています。
noopenerとは、外部リンクを新しいタブで開く場合に、セキュリティの低下やパフォーマンスの低下を防ぐためのものです。
これに対してnoreferrerとは、参照先に参照元リンクを渡さないようにするためのもの。(&古いブラウザへの対応も)
SEOに直接影響するものではないですが、SWELLの標準機能で付いていたので残しました。
SWELLで外部のブログカードを設置する際には、rel属性を指定できますが、初期値はrel="noopener noreferrer"
となっています。
この初期値から変更したい場合は、リンクを貼るたびに、リンクのrel属性を指定し直さなければなりません。(以下「毎回手動で設定する」でご紹介する方法です)
これはWordpress 5.1からtarget="_blank"
が付加されているリンクに自動的にrel="noopener noreferrer"
を付加するという仕様に従ったものだと思われます。
WordPress5.6からは、rel="noopener"
のみに変更されていますが、SWELLでは2024年現在もrel="noreferrer"
が付いていますので、この形に従ってコードを作成しました。
noopener noreferrer両方を入れるべきかどうかは、色々と議論が分かれるところではあります。
ただし、SEOに大きく影響する項目ではないので、個人的にはそこまでシビアになる必要はないと考えています。
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
色々と難しいことを言いましたが、この説明文全てを理解する必要はありません。(管理人の備忘のために書いています)
ひとまず上の説明書きの通り、子テーマのfunction.phpにコードを記載しておけばOKです!
毎回手動で設定する
次に、2つ目の方法です。
外部リンクを設定したい文字列を入れ、選択した状態で「リンクボタン」を押します。
![](https://ym-life.com/wp-content/uploads/2024/03/314e90085ad5403eac2f7cf247355ba3-1.jpg)
![](https://ym-life.com/wp-content/uploads/2024/03/314e90085ad5403eac2f7cf247355ba3-1.jpg)
外部リンクのURLを入力し、通常通りリンクを設定していきましょう
![](https://ym-life.com/wp-content/uploads/2024/03/63ea333800be75db3b639920e4b71b42.jpg)
![](https://ym-life.com/wp-content/uploads/2024/03/63ea333800be75db3b639920e4b71b42.jpg)
3点リーダーから、「HTMLとして編集」を選択します。
![](https://ym-life.com/wp-content/uploads/2024/03/b18acef1e2c20bfd4706310efd5dd42a-1024x598.jpg)
![](https://ym-life.com/wp-content/uploads/2024/03/b18acef1e2c20bfd4706310efd5dd42a-1024x598.jpg)
外部リンクURL最後「”」の後に、半角スペースを入れ、rel=”nofollow”を入力します。
![](https://ym-life.com/wp-content/uploads/2024/03/7dd6c23697c83b861e572607ecfdcc2d-1-1024x139.jpg)
![](https://ym-life.com/wp-content/uploads/2024/03/7dd6c23697c83b861e572607ecfdcc2d-1-1024x139.jpg)
rel="nofollow"
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
上のコードをそのままコピーしてね。
以下のような形になればOK!
![](https://ym-life.com/wp-content/uploads/2024/03/8f3712fb295450b1889d45879f7ba951-1024x75.jpg)
![](https://ym-life.com/wp-content/uploads/2024/03/8f3712fb295450b1889d45879f7ba951-1024x75.jpg)
最後に、ビジュアル編集モードに戻せば、設定完了です!
![](https://ym-life.com/wp-content/uploads/2024/03/535b9b7f89a97fe37b21f4fa38fbb842-1024x152.jpg)
![](https://ym-life.com/wp-content/uploads/2024/03/535b9b7f89a97fe37b21f4fa38fbb842-1024x152.jpg)
毎回設定するのは手間ではありますが、ブログ記事作成において毎回いくつも外部リンクを使うようなことは少ないので、そこまで負担はかからないでしょう。
「WP External Links」を使わない場合の代替手段として、本記事の内容が参考になれば幸いです。
ブログカードには設定されない。
コメント