基本的なHTMLタグ～その３：リンク（aタグ rel属性）とa href、a name、mailtoを解説

Webサイト最大の特徴といってもいいのが「リンク」があること。これは紙媒体では決して真似することはできませんよね。一口にリンクといっても他のサイトを表示させるだけでなく、いろいろなリンクの仕方があるんです。それをここで学んでいってください。

また、<a> タグの rel 属性（Relationship属性） について

• セキュリティ
• プライバシー
• SEO

の観点を交えて徹底解説していきます！

他のページにリンクする(<a href=”リンク先URL”>～</a>)

基本中の基本です。

テキストはもちろん、画像にもリンクを貼ることができます。その場合、かならず（alt=”代替テキスト”）を使用してください。

altタグはSEO(検索エンジン対策)にも効果があるといわれています。

また、リンクは<h1>などの見出しにも使うことができます。

aタグの rel 属性について⇒これで完璧にわかる！

rel 属性は

現在の文書とリンク先のリソースとの関係性（Relationship） をブラウザや検索エンジン（クローラー）に示すための属性です。

正しく指定することで

を実現できます。

1. rel=”noopener”（セキュリティ・パフォーマンス向上）

target=”_blank”（別タブで開くリンク）を指定した際に発生する、セキュリティ脆弱性「タブナビング（Reverse Tabnabbing）」を防ぐ ための属性です。

nov

要は安全に別窓（別タブ）で開くことができますよ、という意味です。

仕組みと必要性

通常、別タブで新しいページを開くと、リンク先のページからJavaScriptの「window.opener」オブジェクトを通じて 元のページを操作できてしまいます。

悪意あるリンク先だった場合、元のページを偽のログイン画面にリダイレクトさせ、パスワード等を詐取される危険性があります！

rel=”noopener” を付与すると、リンク先で window.opener が null となり、元ページとリンク先プロセスの接続が完全に切断されます。

また、ブラウザのパフォーマンス低下も防ぎます。

nov

難しい言葉も出てきていますが、要は先ほど言ったように「安全に別窓（別タブ）で開くことができますよ！」と覚えてください。

コード例

<!-- 別タブで安全に開く外部リンク -->
<a href="https://example.com" target="_blank" rel="noopener">
  安全に外部サイトを開く
</a>

2. rel=”noreferrer”（プライバシー保護＋セキュリティ）

リンクをクリックして移動する際、HTTPリファラー（どのURLから遷移してきたかという情報）をリンク先サーバーに送信しないようにする属性です。

仕組みと必要性

通常、ユーザーがリンクを踏むと、リンク先サーバーのアクセス解析ログに「リンク元のURL」が記録されます。

会員制ページのURLなど、パラメーターやパスに個人情報・機密情報が含まれるページから外部へ遷移させる場合、プライバシー保護のために必須となります。

また、rel=”noreferrer” はrel=”noopener” の効果を含んでいます（window.opener を無効化する）。

コード例

<!-- 参照元情報を渡さずに別タブで開くリンク -->
<a href="https://example.com" target="_blank" rel="noreferrer">
  参照元を隠して移動する
</a>

3. rel=”nofollow”（SEO：クローラーへの評価転送拒否）

Googleなどの検索エンジンクローラーに対し、ページ評価（PageRank／リンクジュース）をリンク先に転送しないことを伝えるSEO向けのrel属性です。

主な用途

• ブログのコメント欄や掲示板など、ユーザーが自由に投稿できるリンク
• 信頼性を保証できない外部サイトへの参照リンク
• サイトのインデックス優先度を制御したい内部リンク（ログイン画面など）

コード例

<!-- ユーザー投稿コメント内のリンク -->
<p>
  おすすめのツール：
  <a href="https://example.com" rel="nofollow">
    ユーザーが投稿したURL
  </a>
</p>

4. rel=”sponsored”（SEO：広告・有料リンクの明示）

2019年にGoogleによって新設された属性で、広告、有料掲載、アフィリエイトリンク、金銭や対価が発生しているリンクであることを検索エンジンに明示するためのものです。

仕組みと必要性

Googleの検索スパムポリシーでは、金銭や物品の提供を伴うリンク（ペイドリンク）によって検索順位を不正に操作することを禁止しています。

rel=”sponsored” を正しく設定しない場合、サイト全体がペナルティ（検索順位の急落やインデックス削除）を受けるリスクがあります。

コード例

<!-- アフィリエイトリンク・スポンサーリンク -->
<a href="https://example.com" target="_blank" rel="sponsored noopener">
  限定特典付きで購入する（PR）
</a>

aタグの各rel属性を表にまとめました！

実際よく使う複数指定の書き方

rel 属性の値は、半角スペースで区切ることで複数同時に指定可能です。

① 最も標準的な安全な外部リンク（新規タブ）

<a href="https://example.com" target="_blank" rel="noopener">
  パートナーサイトへ
</a>

② アフィリエイト／PRリンク（新規タブで安全に開く）

<a href="https://affiliate.example.com" target="_blank" rel="sponsored noopener">
  商品詳細を見る（PR）
</a>

③ 古い検索エンジン・互換性を意識した広告リンク

<!-- Google以外の古いクローラーにも対応させるため nofollow を併記 -->
<a href="https://ad.example.com" target="_blank" rel="sponsored nofollow noopener">
  スポンサー企業サイト
</a>

(<a href=”#目印”>～</a>　<a name=”目印”>～</a>)

同じページで指定した場所にリンクする

１ページがとても長いサイトの場合、目的の場所まで戻るのが大変です。

そんな時はこちらのタグを使い、指定した場所にリンクすれば簡単に目的の場所まで移動できます。

(<a href=”mailto:メールアドレス”>～</a>)

リンクでメールソフトを立ち上げる

クリックするとメールソフトが立ち上がり、指定したメールアドレスにメールを送ることができます。

クリック一発でメールソフトが起動するのでとても便利なのですが、スパム(迷惑)メールもたくさん届いてしまう可能性があります。

その場合はホームページに自分のメールアドレスを画像で表示する(コピペ防止の為)、@マークを別の記号に置き換えて、メールを送ってもらう際に、@に変えてもらってから送ってもらうなど、ちょっとした工夫でスパムメールは激減します。

また、そういうのが面倒な場合は、フリーのメールアドレス(YahooやGmailなど)を指定アドレスにすればスパムメールが来てもそれほど問題ではないでしょう。