中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
hrefとrelの基本と使い方を知ろう
リンクをクリックする時、私たちは普段は意識せず href 属性を見ています。href は リンク先のURLを指定する属性 で、このようなリンク を作る時に必須です。もし href がなければ、クリックしても別のページへ飛びません。したがって、href はリンクを機能させる根幹の要素 となります。ここでは href の基本と rel の違いを、初心者にも分かるように丁寧に解説します。
次に rel について考えます。rel は リンクの関係性を示す属性 であり、リンク先とのつながり方を指示します。代表的な値には nofollow、noopener、noreferrer などがあります。rel は必須ではありませんが、SEO やセキュリティ、閲覧体験を整えるために使われる場面が多いです。例えば外部サイトへリンクする際に target 属性と組み合わせて rel を設定するときに、検索エンジンの評価やブラウザの挙動を変えることができます。
またセキュリティ面にも rel の重要性があります。外部リンクを新しいタブで開く場合、rel='noopener' や rel='noreferrer' を付けると、元のページの情報が新しいページに渡らず安全性が高まります。これを忘れると、悪意のあるサイトが元のページの情報を利用して攻撃する risk になることもあります。現代のウェブ制作では noopener の併用が標準的な推奨事項です。
href と rel の違いまとめです。
・href はリンク先を指定する「機能の要」です。
・rel はリンクの「関係性の説明」です。
・外部リンクを新しいタブで開く時は rel に noopener を加えるのが安全です。
・検索エンジンの挙動を左右する場合もあるので、nofollow や sponsored などの属性を使い分けます。
以下の表は要点を簡潔に整理したものです。
表を読むときは、左から属性・意味・使い方の順で確認すると理解が早くなります。
実務でのポイントとしては、外部リンクを新しいタブで開く場合は rel 属性を必ず付ける、nofollow の使い方はサイトの方針に合わせる、noopener/noreferrer はセキュリティの基本と心得る、などが挙げられます。以下は使用例です。
例: 外部リンクを安全に開く場合の実装例です。
外部サイトへ を新しいタブで開きます。
このように rel 属性を組み合わせるだけで、安全性と検索エンジンの取り扱いのバランスを取りやすくなります。
実務での活用と注意点
実務での活用ポイントは複数あります。まず最初に覚えるべきは「外部リンクには nofollow や sponsored の表現を使う場面がある」という点です。コメント欄や提携リンク、広告リンクなど、信頼性のコントロールが必要なリンクにはこれらの rel 値を追加します。これにより検索エンジンがリンクをどう扱うかを調整できます。
次にセキュリティの要点です。外部サイトを新しいタブで開く場合は rel='noopener' を必ず追加するのが現代の標準です。これにより新しいウィンドウが親ページを参照して情報を悪用するリスクを減らせます。なお、noreferrer を併用すると Referer ヘッダ情報を渡さなくなるため、プライバシー保護の観点でも有効です。
内部リンクと外部リンクの使い分けも大切です。内部リンクでは href に自サイトの URL を長く列挙する必要はありませんが、SEO の観点からはできるだけ適切なクローラビリティを保つ設計が求められます。rel 属性は、リンクの目的を明確に伝える手段として活用してください。
最後に、学習のコツとしては実際に HTML を書いてリンクを作ってみることです。自分のサイトや友達のページを想定してリンクを試してみましょう。実際のコードを見ると、 href と rel の順番や指定値の意味が自然と身についてきます。練習を重ねるほど、どの状況でどの rel 値を使うべきかが見えるようになります。
ねえ、hrefと rel の深掘りって、実は日常会話みたいなものなんだ。例えば 'noopener' はさっき話した外部リンクの安全を守るスイッチ。友だちの家の前まで案内してくれても、家の中まで覗かれるのはイヤだよね。そんな時にnoopenerをつければ、リンク先のページがあなたのページを参照することを制限できる。だけど、情報を少しだけ渡したい場面もある。そんな時は noreferrer を使ってリファラ情報を遮断する。結局、リンクの世界はURLだけでなく、情報の流れ方をどうコントロールするかが勝負。
ITの人気記事
