Zenn
📝

これであなたも🔗リンクマスター！Webページにおけるリンクの正しい使い方。

2024/03/04に公開
SEO
Web
HTML 5
tech

まえがき

この記事では、WEBページにおけるリンク、つまり <a>タグの使い方について、深掘りして説明します。
target=_blankと合わせて呪文のように書いている rel属性やその意味、SEO視点での扱い方など、意外と知らない事も多いかと思ったのでこちらにまとめました。

コーダーはもちろん、WEB開発に携わる人、コンテンツマーケターの人なんかも知っていて損では無い内容だと思うので、最後まで読んでいただければ幸いです。

なお、タイトルの通り「エンジニアじゃ無くても分かる」ように噛み砕いて書いています。その理由としては、

  1. エンジニアであっても小難しい言葉よりも平易な文の方が理解しやすいと思ったから
  2. 文字通りエンジニアでは無い人（コンテンツマーケターやWEBデザイナーなど）にも読んでいただきたいから

です。

それゆえ、正確な表現では無い箇所もあるかもしれません。また、僕の理解が至らず間違った表現をしている箇所があるかもしれません。
その時は、お手数ですがご指摘いただけると幸いです。

そして、非常に長いです。
前半は主にSEO関係の事で、noreferrerとnoopenerからが、少し技術的なセキュリティ関係のお話しです。
個人的に後半の方が面白いトピックだと思っているので、ぜひ最後まで読んでいただけると嬉しいです。

前置きが長くなりましたが、ここから本編です。

1. Googleが辿るリンクと辿らないリンク

WEBページにおけるリンクは、SEOの観点でとても大切な要素の1つです。なぜなら、
Google※はリンクを利用して新しいページを発見したり、サイト全体の内容を把握しようとするからです。

※Googleクローラーのこと。分かりやすくGoogleと言います。

では、「とにかくリンクを貼っておけばいいのか」というとそうではありません。
リンクの貼り方によってはGoogleの解析対象にならず、スルーされてしまいます。

リンクをスルーされると、リンクを貼っていないのと同じことなので、「リンクの正しい使い方（まさに本記事の大きなテーマ）」が重要になってきます。

では、実際に良い例と良くない例を見てみましょう。

良くない例（Googleによる解析が行われない）

  1. href属性がない
    <a>そもそもリンクが無い</a>
    <a routerLink="products/category">
    <a onclick="goto('https://example.com')">
  2. アンカーテキストがない、もしくはtitle属性で代用している
    <a href="https://example.com"></a>
    <a href="https://example.com/" title="これをテキストとして表示させよう。"></a>
  3. href属性にjavascriptを使っている
    <a href="javascript:window.location.href='/products'">
  4. <a>タグでは無い
    <span href="https://example.com">

良い例

正しくは下記のように書きましょう。

<a href="https://site-b.com">サイトBへのリンク</a>
<a href="/prodducts/product-1">商品1のページ</a>

見慣れた形です。当たり前のように書いていますが、こういった書き方をする事でGoogleはリンクを解析し、辿ることができます。

※良くない例で示した方法の中には、Googleが解析を試みるパターンもありますが、いずれにせよ「非推奨」となっています。

2. より効果的なアンカーテキスト

次にアンカーテキストについて見ていきます。
アンカーテキストとは、リンクの文字のことです。

Googleは、リンク先のページがどのようなページなのかをアンカーテキストからも判断します。
アンカーテキストがあれば解析対象となるのですが、その書き方にもGoogle推奨のものとそうでないものがあるので見ていきましょう。

良い例としては、

  • リンク先の内容が簡潔に示されている
  • 不自然に長くない

です。

リンク先の内容が簡潔に示されている

効果的なアンカーテキストを設定することで、Googleが、サイト上の別のページを見つけやすくなります。

例文で確認します。

(例文)
Googleではページが適切なユーザーに正しく表示される方法を解説しています。詳しくはこちらをご覧ください。

上記例文の場合、アンカーテキストは「こちら」です。実はこのような書き方はGoogle非推奨なんです。
よく見ますけどね。

なぜ非推奨なのかというと、前の文章がなかった時に「こちら」は何を指しているか分からないからです。つまり文脈を無視したとき、アンカーテキストのみでは意味がわからない（具体性がない）からです。
アンカーテキストを決める時はリンク先の内容が具体的に簡潔に書かれていることが大切なので、よりベターな書き方は、下記のような書き方です。

（例文）
Googleではページが適切なユーザーに正しく表示される方法を解説しています。詳しくは、Google検索セントラルをご覧ください。

不自然に長くない

アンカーテキストに具体性を持たせるということは、キーワードを含めるという事でもありますが、不自然に長いテキストはキーワードの乱用というGoogleのスパムポリシーに違反します。

例えば以下のような文章はアウトだと思います。

SEOに強くなりたいですか？検索上位に表示させるためにはページが適切なユーザーに正しく表示される方法を解説しているGoogleのページを読むことをお勧めします。

3.画像にリンクを貼りたい時

画像をクリックしたら別のページに遷移すると言うのは、よくある事です。その場合、アンカーテキストを設置することはありません。

そういった場合、Googleは<img>タグのalt属性をアンカーテキスト代わりに使います。まさに代替テキストです。画像にalt属性を設置するのは常識かと思いますが、設置を忘れるとこういったところにも影響があるので、気をつけましょう。

google検索セントラルで具体的に言及しているところは見つけられなかったので、あくまで個人的な予想ですが、alt属性が無い画像付きのリンクはアンカーテキストが無いリンクという事でクローラーがリンク先を解析できないということも考えられます。

4.たくさんあるrel属性

ここからは、<a>タグの属性relを見ていきます。

先に説明したように、Googleはアンカーテキストを解析してリンクをたどり、ページごとの関連性を評価・確認しています。
その際に、rel属性を設定しておくことで、ページの関係性をGoogleに伝えることができます。
正しいパラメーターを設定することで、SEOで不本意な結果になることを避けたり、セキュリティ面での対策にもなります（後述します）。

属性やらパラメータやら「なんのこっちゃ」な人へ

<a href="リンク先のURLを書く" rel="nofollow">アンカーテキストが入る</>

↑イコール記号に注目。イコールの左が属性で、イコールの右がパラメータといいます。
hrefやrelは属性で、""の中に書いているテキストがそれぞれの属性のパラメータです。

rel属性のパラメータに関して先にざっくりと説明してしまうと、

  • nofollow = 関係ないよ
  • sponsored = 有料リンクだよ
  • ugc = 私じゃないです。
  • noreferrer = リファラー無しで！
  • noopenner = window.openerは使わせねぇよ！

という感じです。
他にもあるのですが、このセクションでは上記5つについて説明します。

nofollow

Googleはリンクを渡り歩く際に、元のサイトの評価を次のサイトへ引き継ぎます。
例えば、example.com/page-Aと、example.com/page-bは別のリンクですが同じサイトです。評価を引き継いでくれて当然だと思います。

ただ、サイトへ貼るのは内部のリンクだけではありません。

  • 埋め込み要素やユーザーの便宜上つけるブログパーツ関連
  • 自分が賛同しないページの参考リンク

などがあります。
後者の方はよく分からないと思うので補足します。

例えば新しい映画のレビュー記事を書いているとします。
あなたはこの映画はとても好きなのですが、とある「A」という記事では散々な書かれようです。
あなたはこの記事を引用して、「これを書いた人は本当に分かっていない！」というような反対意見の内容を書くでしょう。
その時、引用した「A」というサイトにあなたのサイトの評価が引き継がれるとどうでしょうか。

腹立ちますよね？（笑）

みたいな時に、nofollowが役立つでしょう。
ただ、全ての外部リンクにnofollowをつけることはやめてください。とGoogleは言っています。

評価を引き継ぎたくない（引き継ぐ必要のない）リンクには、アフィリエイトリンクや広告などがあります。

特に広告に関しては、ページを閲覧するユーザーに合わせて表示されるので、こちらでどのようなページが出るのかをコントロールするのは困難です。

そう言った場合、sponsoredをつけます。

また、有料リンクについてはリンクスパムとみなされる行為もあります。

ランキングを上げることを目的としたリンクの売買。次のようなページがこれに該当します。
・リンク自体やリンクを含む投稿に関して金銭をやり取りする
・リンクに関して物品やサービスをやり取りする
特定の商品について記載してリンクを設定してもらうのと引き換えにその商品を送る

相互リンク募集中バナーとか、昔はよく見ましたが、今現在はそういった類のものは「リンクスパム」とみなされる場合があります。

しかし、Googleはこうも言っています。

Google は、リンクの売買も、広告やスポンサー活動を目的として行われる限り、ウェブ上での通常の経済活動の一環だということは理解しています。

つまり、WEB上のリンクに関する経済活動をすべてNGにするべきではないと言うことです。例えば、アフィリエイトリンクや広告などがそれに当たると思います。

そういったリンクにはsponsoredをつけてリンクスパムにならないようにしましょう。
ちなみに、以前はnofollowが推奨されていたようですが、現在はsponsoredが推奨です。

ugc

Googleはリンク先へ評価を引き継ぐと言いました。
では、評価を上げたいサイトのオーナーが、すでに評価が高いサイトのコメント欄などへ自サイトのリンクを貼ればどうなるでしょうか。

こういったことを防ぐために、ugc(user genrerate contents)があります。

コメント欄の他、レビュー欄などサイトを訪れるユーザーが自由にリンクを貼れる場所に使います。

noreferrerとnoopener

外部サイトのリンクを貼る時、別タブや別ウィンドウで表示させると思います。その時target属性に_blankパラメータを設定すると思います。

<a href="https://example.com" target="_blank"></a>

ただ、この書き方には脆弱性があり、対応策としてrel="noreferrer noopener"という2つのパラメータを設定するというのが定番の書き方です。

では、このrel="noreferrer noopener"の正体は何なのか。

できる限り簡単に、でも細かく説明するので、まだ元気な人は付いてきてください。

まずはリファラーを理解する

登場人物

  • リファラー
  • サイトA
  • サイトB
  • ブラウザとサーバー

ネットサーフィンをするということは、どこかをクリックしてページ遷移したり、フォームを送信したりすると思います（つまりHTTPの通信）。その度に、ブラウザとサーバーの間ではいろいろな情報をやり取りしています。1クリックするごとにです（場合によってはもっと）。その沢山ある情報の中に、リファラーと言うものがあります（HTTPヘッダーで送られるRefererです）。

サイトAからサイトBに遷移する時を想像してください。
リファラーとはサイトBにとってのサイトAです。もっと言うと、サイトAのURLです。

※「refer」とは英語で「参照する」という意味なので、参照している側。つまりサイトAの事になります。

ここまでの説明で、「リファラー」とは何を指すのかが理解できたかと思いますので、次に進みます。

次に悪意のあるサイトについて理解する

登場人物

  • 新規タブ/新規ウィンドウ
  • 脆弱性

すでに説明したように、<a>タグにrel="noopenner noreferrer"をつける理由は、 target="_blank"の脆弱性に対処するためです。

初めて聞く人は”なんのこっちゃ”だと思いますが、簡単に言うとリンクを別タブや別ウィンドウで開くという挙動には脆弱性（詐欺られる可能性 ← 噛み砕きすぎな表現）が潜んでいるということです。

このセクションでは、「じゃあ、実際どんな悪いことが起こるん？」ってところをざっくり理解してもらいます。

この理解に大切なのが、「リファラー」です。
結論を言うと、

リファラー（＝遷移する前のURL）が悪意のあるサイトにバレると、遷移する前のURLを勝手に変えられる可能性がある

ということです。

「勝手に変えられるってなんじゃい？」

要は、見ていない間に別のページに変わってしまうということです。
説明のため、

  • サイトA＝元いたサイト（遷移前のサイト）
  • サイトB＝遷移先の悪意のあるサイト

だとします。
サイトAからサイトBに行って、その後サイトAに戻ってみたら、別のページになっていた（勝手に遷移していた）ということです。

これが別のページと気付ければ問題ありませんが、そっくりなフィッシングサイトだったり、別サイトだけど誘惑的な詐欺サイトだったり、悪意の可能性は無限大ですよね。

重要なのは、「「リファラーがバレると」というところです。
リファラーがバレなければ、勝手にURLを変えられることはありません。

「リファラーがバレなければ、勝手にURLを変えられることはありません。」

重要です。

手っ取り早い話、リファラーがバレなければいい

<a>タグに”noreferrer”を設定してやります。どうやって設定するかと言うと、こうです。

【変更前】

<a href="site-b.com">サイトB</>

【変更後】

<a href="site-b.com" rel="noreferrer">サイトB</>

「rel」はrelation。サイトAとサイトBの「関係」ですね。

relがno referrer。
「うちとサイトBの関係だけど、リファラーはノーで！」

中学生でも思いつきそうな構文ですが、これだけでブラウザがよしなにしてくれます。ただこのnoreferrerですが、少々問題を抱えています。

リファラーを明かさないというところで、アフィリエイトリンクなんかに使ってしまうとちゃんと反映されなくなるというデメリットがあります。
どこのサイトから飛んできたか分からないのですから、アフィリエイトリンクが機能しないのも当然です。

そこで、noopenerというやつが登場です。

<a href="site-b.com" rel="noopener">サイトB</>

先程、「サイトAのURLを勝手に変えられる」といいましたが、なぜこんな事が可能なのかと言うと、サイトBで下記のようなプログラム（スクリプト）が動いていたからです。

window.opener.location = "悪意のあるサイトのURL"

↑の真ん中に書いているopenerというのが無効になればいいので、rel="noopener"を指定します。

結局どう書いたらいいの？

結論

<a href="site-b.com" rel="noopener noreferrer">サイトB</>

補足

一応最新のブラウザを使っていれば、target="_blank"がついたリンクはすべてnoopenerの挙動になるようです。（明示的に設定していない限り）

ただ、noopenerに対応していない古いブラウザや、noopenerに対応していても、勝手につけてくれないブラウザ（バージョンや設定の問題）へのサポートとして、rel="noopener noreferrer"の設置がベターかなという印象です。

まとめ。

最初から最後まで読んでいただいた方がいれば、本当にありがとうございます。
拙い文章で、ながながと大変だったかと思います。

ただ、掘れば掘るほど…まででもないですが、本当に奥深い世界です。1つでも「へぇー」って思ってもらえればこの記事を書いた意味があったのかなと思います。

あと、Xもやってるのでフォローしてもらえると嬉しいです。笑
@tech_zabi

参考:

Discussion