はじめに
「内部リンクにもnoopenerやnoreferrerを付けたほうがいいの？」
「設定するとGoogle Analyticsなどのアクセス解析に影響しない？」と気になっていませんか。
WordPressでリンクを設定したり、HTMLを確認したりしていると、rel=”noopener noreferrer”という記述が付いていて、同じサイト内のページへ移動するリンクにも必要なのか迷ってしまいますよね。
この記事では、noopener・noreferrerの違いから、内部リンクに設定する必要性、WordPressでの設定方法、アクセス解析で参照元を確認するときの影響まで解説します。
noopener noreferrerは内部リンクに付けるべき？
noopenerとnoreferrerは似た場面で使われますが、内部リンクに一律で付ける必要はありません。
ここでは、アクセス解析への影響とそれぞれの役割を確認しながら、内部リンクと外部リンクでの使い分けを説明します。
内部リンクにnoreferrerを付けるとアクセス解析に影響する
内部リンクにnoreferrerを付けると、リンク先へ参照元URLが送信されません。
そのため、アクセス解析では「どのページから移動したのか」を確認しにくくなる場合があります。
内部リンクからの流入経路を分析したい場合は、noreferrerが設定されていないか確認しておきましょう。
noopenerとnoreferrerは役割が違う
noopenerは、新しいタブで開いたリンク先からwindow.openerを通じて元のページを操作されるのを防ぐための属性です。
一方、noreferrerは参照元URLをリンク先へ送信しないために使います。
どちらもリンクに指定できますが、目的が異なるため、それぞれの役割を理解して使い分けましょう。
内部リンクと外部リンクで使い分ける
内部リンクでは、流入元をアクセス解析で確認したい場合、基本的にnoreferrerは付けません。
外部リンクでは、元ページへの操作を防ぐならnoopener、参照元URLを送信したくないならnoreferrerを設定します。
内部・外部だけで判断せず、何を防ぎたいのかに合わせて選ぶと分かりやすいでしょう。
内部リンクでnoopener noreferrerを使うときの判断基準
内部リンクにnoopenerやnoreferrerを設定するかは、リンクの開き方とアクセス解析への影響を基準に判断します。
ここでは、通常の内部リンク、別タブで開くリンク、アクセス元を計測するリンクの3つに分けて判断基準を説明します。
通常の内部リンクにはnoreferrerを付けなくてもよい
同じサイト内のページへ移動する通常の内部リンクでは、基本的にnoreferrerを付ける必要はありません。
noreferrerを付けると参照元URLが送信されなくなるため、内部リンクからの移動を確認したい場合は付けないようにしましょう。
target=”_blank”の内部リンクではnoopenerを優先する
内部リンクをtarget=”_blank”で別タブに開く場合は、noopenerを設定します。
noopenerを付けることで、新しく開いたページからwindow.openerを通じて元のページを操作されるのを防げます。
アクセス元を正しく計測したい場合はnoreferrerに注意する
noreferrerが付いていると参照元URLが送信されないため、どの内部ページから移動してきたのかをリファラー情報で確認できません。
ページ間の流入元を確認したい場合は、noreferrerが付いていないか確認しておくと安心です。
noreferrerを外したあと、「内部リンクからの移動をGoogle Analyticsでどう確認するの？」と迷った場合は、ページ間のアクセス経路を確認する方法も参考になります。
▶Google Analyticsで内部リンクを計測する方法｜クリックやページ遷移の確認手順
WordPressでnoopener noreferrerが付いている場合の確認方法
WordPressでは、リンクの設定や利用している機能によってrel属性が付与されている場合があります。
ここでは、WordPressでrel属性が付与されるケースから、既存リンクの確認方法、必要に応じて設定を見直すポイントまで順番に説明します。
WordPressでrel属性が自動的に付与されるケース
WordPressでは、リンクを別タブで開く設定にしたときなどに、rel属性が自動で付くことがあります。
付与される内容はWordPressのバージョンやテーマ、プラグインによって異なるため、実際のリンクを確認して判断しましょう。
「自分のWordPressでは実際にどんなrel属性が付いているの？」と確認したい場合は、リンクのHTMLをチェックする方法も知っておくと安心です。
▶WordPressでリンクのHTMLを確認する方法｜rel属性の見方も解説
既存の内部リンクに付いているrel属性を確認する
既存の内部リンクは、WordPressの編集画面やブラウザの開発者ツールから確認できます。
リンクのタグを確認し、rel=”noopener”やrel=”noreferrer”などが設定されていないかチェックしてみてください。
アクセス解析への影響を確認して必要に応じて見直す
内部リンクにnoreferrerが付いていると参照元URLが送信されないため、どのページから移動したのかをリファラー情報で確認できません。
ページ間の流入元を確認したい場合は、noreferrerが必要かを見直し、不要であればrel属性から外しておきましょう。
noopener noreferrerを内部リンクに付けるときの注意点
内部リンクにnoopenerやnoreferrerを設定するときは、セキュリティだけでなくアクセス解析への影響も確認する必要があります。
ここでは、noreferrerによるリファラー情報の変化と計測への影響を確認しながら、セキュリティ対策とアクセス解析を踏まえた設定方法を説明します。
noreferrerによってリファラー情報が送られなくなる
内部リンクにnoreferrerを設定すると、リンク先へ参照元URLを示すリファラー情報が送信されません。
そのため、リンク先では直前に閲覧していたページをリファラー情報から確認できなくなります。
内部リンクの計測や流入分析に影響する場合がある
noreferrerが付いていると、どの内部ページから移動してきたのかをリファラー情報で追えなくなります。
ページ間の流入元を確認したい場合は、内部リンクにnoreferrerが設定されていないか確認しておきましょう。
セキュリティ対策とアクセス解析の両方を考えて設定する
別タブで開くリンクの安全性を高めたい場合はnoopenerを使い、参照元URLを送信したくない場合はnoreferrerを使います。
それぞれ役割が異なるため、一律に設定せず、セキュリティ対策とアクセス解析の目的に合わせて選ぶことが大切です。
まとめ
noopenerとnoreferrerは似ていますが、それぞれ役割が異なるため、内部リンクに一律で設定する必要はありません。
通常の内部リンクではnoreferrerを付けず、別タブで開く場合は必要に応じてnoopenerを設定すると考えると分かりやすいでしょう。
WordPressですでにrel属性が付いている場合も、アクセス解析への影響を確認しながら、不要な設定がないか見直してみてください。
それぞれの役割を理解して使い分ければ、セキュリティとページ間の流入分析のどちらにも配慮した内部リンクを設定しやすくなります。
