サイト内の外部リンクにつけるaタグ内のrel属性の役割。特にrel="nofollow"属性はSEOに大切!

2019-05-24

参考リンクや引用先、ソフトウェアのダウンロード先などの外部リンクを記事の中に書き込む機会は多いと思います。

これらの外部リンクはaタグを使用してサイト内に設置しますが、aタグ内のrel属性を気にして設置していますか?

別タブで開く設定の他、SEOにも大切なnofollow属性も使用できます。
よりSEOを考慮するなら、埋め込みリンクにも適切なrel属性を使用しましょう。

混同しやすい「nofollow」「noopener」「noreferrer」について解説。

主に外部リンクに使用するrel属性

通常aタグを使用してリンクを設置する場合、以下のように記述します。

<a href="https://sologaku.com/"><ソロ学</a>

この中に記述しているURLの後にtarget属性やrel属性を追記することにより、新規タブを開いて表示するようにしたり、リファラーやページ評価の受け渡しの設定を追記することができます。

外部リンクrel属性の使い方1

記事内に埋め込んだWordpressのダウンロードリンク先

うちのようなサイトではファイルのダウンロード先として外部リンクを設置することが多いためrel属性の記述は必須です。

外部リンクrel属性の使い方2見た目は同じでもソースコードを見ていただくと、aタグのURLの後に色々属性があります。

それでは、外部リンクを埋め込む際に使用する機会が多いそれぞれの属性について順番に詳しく見ていきましょう。

rel="nofollow"とは?

外部リンクrel属性の使い方3_nofollowまずSEOに影響する超大切なnofollowから。読み方はそのままノーフォローです。

一般的な説明に「このページのリンクをたどらない」とありますが、少し分かりにくいですね。

nofollowはリンクを設置するページからSEOに影響する評価を渡さない設定です。

膨大なアクセスがあるサイトに人気がない別サイトのリンクを埋め込んでもらうと一発で?ページの評価が上がり、検索順位が上位になることがありますが、これです。

nofollowを設定しない場合、ドメインパワーがある人気サイトの評価をリンク先に送ることができます。
一昔前に流行った有料リンクの販売なんかもこの原理を利用しています。

nofollwが設定されているリンクにはページ評価は渡りません。

公式サイトやソフトウェアのダウンロード先などの外部リンクに使用します。
言いにくいのですが、自分のサイトのページ評価を分散させないために参考サイトにもnofollowを設定しているサイトがほとんどです。

ランキングサイトではnofollowの設定はされていないことが多いので、登録するとうまくページ評価をいただけるかもしれません。

ただ故意に被リンクを獲得しているだけではブラックハットSEOと言われる時代となってきましたので、良くありません。

また閲覧ユーザーが生成できるコンテンツ、特にコメントなどにもこの設定を適用しておきたいところです。
被リンク目的でURLが記載されたコメントを記載され、ページ評価を渡すことになってしまします。

自分のページで外部リンクを埋め込む際に使用したい場合は

<a href="https://sologaku.com/" rel="nofollow"><ソロ学</a>

のように記述するとOKです。

外部リンクrel属性の使い方4

WordPress投稿ページにあるindex設定

このnofollow設定はページ全体のメタタグに指定することもできます。
お問い合わせページやプロフィールなどの固定ページに設定すると良いです。

rel="noopener"とは?

外部リンクrel属性の使い方5_noopener続いてnoopenerについて。読み方はノーオーペナでいいはず…
この属性はWordpressで「リンクを新しいタブで開く」にチェックを入れてURLを埋め込んだ際にtarget属性とセットで自動付与されます。

target="_blank"とは?

外部リンクrel属性の使い方6_targettarget属性を指定しておくと、リンクをクリックしたときに別のタブでページが開くようにできます。
普通「"_blank"」が指定されますが、「"_new"」を指定することもできます。
newを指定していると別画面で開くウィンドウは一つだけとなります。

noopenerを指定しなくてもtarget属性を指定するだけでページが別画面で開きます。
ではnoopenerは何のためにあるのか?

noopenerはセキュリティー向上のためにあります。

target属性だけを指定していると開いたページで元のページの操作が可能です。
これを利用すれば悪いことにも使えるのです。

とはいえ、玄人向けの内容となりますので、普通に使う方は
リンクを別画面で開くのに使用するtarget属性はrel属性のnoopenerとセット
で使用すると覚えておいてください。
自分のページで外部リンクを埋め込む際に使用したい場合は

<a href="https://sologaku.com/" target="_blank" rel="noopener"><ソロ学</a>

のように記述するとOKです。

rel="noreferrer"とは?

外部リンクrel属性の使い方7_noreferrer最後にnoreferrer。読み方はノーリファラー。
Googleアナリティクスを利用したことがある人なら見たことがあるアレです。

noreferrerはリファラーと呼ばれる参照元のページ情報を渡さない設定です。

例えば、サイトA内の外部リンクURLにnoreferrerを設定していない場合、リンクを開いてサイトBに移動した場合、サイトBの所有者がこのアクセスはサイトAから入ってきたアクセスですよー!と確認することができます。

使い方は、参照元情報をリンク先に渡したくない場合。
参照元のURLにユーザーIDなど大切な情報が含まれている場合も渡すことがないので安心です。

ただ、https://で始まるようなSSL通信が一般的になってきており、この通信形式でリファラーが渡らず、参照元がnoneになっていることが多くなりました。

アクセス元の解析が困難になってきているので、ネット広告会社なんかは大変な時代かもしれません。
アフィリエイトリンクなどにはこちらは設定しないようにしましょう。

自分のページで外部リンクを埋め込む際に使用したい場合は

<a href="https://sologaku.com/" rel="noreferrer"><ソロ学</a>

のように記述するとOKです。

使い方のまとめとSEOについて

最後にまとめと考察です。
検索エンジン最適化は内容が明かされないブラックボックスなので考察の域です。

・rel="nofollow"の使い方
リンク先にページの評価を渡さない場合に設定。

・rel="noopener"の使い方
リンクを別画面で開く際、target="_blank"とセットで設定。

・rel="noreferrer"の使い方
リンク先に参照元リファラー情報を渡さない場合に設定。

お察しの方も多いと思いますが、これらの設定は併用可能です。

<a href="リンクURL" target="_blank" rel="nofollow noopener noreferrer"><リンク名</a>

と記述することで「リンク先にページ評価とリファラーを渡さず、別画面で開き、別画面で元画面の操作をさせない」設定となります。

SEOに最適なrel設定とは?

同サイト内での内部リンクについては何も設定せず通常のリンクでOKです!
Wordpressでは同サイト内であっても別画面でタブを開く場合「noopener」が自動付与されますが、セキュリティーのものなのであえて消す必要はないでしょう。

外部リンクについてですが「noopener」と「noreferrer」はあってもなくてもSEOに影響はないと思います。

ページ評価の受け渡しに関する「nofollow」の設定は大事です。
信頼性に乏しい参考リンク先やアフィリエイトリンクにはrel="nofollow"を設定しておきましょう。

ただ自サイトのSEOに関する評価が奪われる、移るといったことではなく、あくまでもページ先に影響を及ぼす程度だと思われます。

検索エンジン最適化は引き算ではなく、足し算です。
参考リンクにページ評価を渡す設定になっていても、自サイトの評価が悪い方に向くことは無いはずです。

ただ先述したように被リンクを狙ったコメントなどのスパムに対してはしっかりとページ評価は守るようにしましょう。

ひとこと

一昔前は被リンクが多ければ多いほどページの評価が高くなったのですが、今や検索エンジンのクローラーも進化し、SSL通信が一般化したことから昔よりもrel属性の重要性は薄くなっていると思います。

まぁ気にしないよりは気にした方が良いのでしょうが…

-SEO

© 2021 ソロ学