ページどうしをつなぐリンクは、aタグで作ります。a は anchor（いかり）の頭文字です。この記事では、よく使う属性と、中に入れられるもの・入れられないもの、分かりやすいリンクの書き方、ページ内リンクをまとめます。
基本の書き方
href 属性にリンク先のURLを書き、クリックさせたい文字を囲みます。
<a href="https://example.com/">サンプルのサイトへ移動</a>
href には、https:// から始まるURLのほかに、同じサイト内なら /contact/ のような書き方もできます。
よく使う属性
| 属性 | 役割 |
|---|---|
href | リンク先のURL、またはページ内の場所（#id） |
target="_blank" | リンク先を新しいタブで開く |
rel | リンク先との関係を伝える（下の表） |
download | リンク先を開かずにダウンロードさせる。値にファイル名を書くと、その名前で保存される。同じサイトのファイルにしか効かない |
rel に書くもの
| 値 | 意味 |
|---|---|
noopener | 新しいタブで開いたページから、元のページを操作させない |
noreferrer | リンク先に、どのページから来たか（参照元）を伝えない |
sponsored | 広告やアフィリエイトのリンク |
nofollow | リンク先を推薦しない（検索エンジンに「評価を渡さない」と伝える） |
ugc | コメント欄など、読者が書いた内容の中のリンク |
target="_blank" で開いたページは、以前は元のページを別のページに書き換えられることがあり、rel="noopener" を付けるように言われていました。今の主なブラウザは、target="_blank" のリンクに同じ動きを自動で当てはめるので、書かなくても危険はありません。古いブラウザのために付けておいても害はないので、付けておくと安心です。noreferrer は参照元も伝えなくなるので、アクセス解析やアフィリエイトの計測に影響することがあります。
Googleは、広告やアフィリエイトのリンクには rel="sponsored"（または nofollow）を付けるように案内しています。アフィリエイトのASPや商品リンクのプラグインが出すコードには、最初から付いていることもあります。
<!-- 新しいタブで開く -->
<a href="https://example.com/" target="_blank" rel="noopener">サンプルのサイト</a>
<!-- 広告のリンク -->
<a href="https://example.com/item" rel="sponsored noopener" target="_blank">商品を見る</a>中に入れられるもの、入れられないもの
古いHTML（HTML 4.01）では、aタグの中には文字や画像などしか入れられませんでした。今のHTMLでは、div、見出し、p などを丸ごと囲んでリンクにできます。
カード全体をリンクにする
<a href="/article/123" class="card-link">
<div class="card">
<img src="peach-1.jpg" alt="記事のサムネイル">
<h2>記事のタイトル</h2>
<p>記事の要約テキストがここに入ります。</p>
</div>
</a>
カードのどこをクリックしても記事に移れるので、スマホでも押しやすくなります。ただし、画面読み上げソフトはカードの中の文字をすべてリンクの文字として読むので、中身は短めにしておきます。
中に入れられないもの
aタグの中には、クリックや入力で操作できるものは入れられません。
- 別の aタグ（リンクの中にリンク）
button、input、select、textareaなどのフォームの部品
<!-- よくない例：リンクの中にリンク -->
<a href="/page1">
ここをクリック
<a href="/page2">別のリンク</a> </a>
クリックしたときにどちらのリンクが動くのかが決まらないので、ブラウザは外側の a をそこで閉じてしまい、思った形になりません。カードの中に別のリンクやボタンを置きたいときは、カード全体ではなく、タイトルだけをリンクにします。
分かりやすいリンクにする
「こちら」より、リンク先が分かる文字にする
画面読み上げソフトには、ページのリンクだけを一覧で読み上げる機能があります。「こちら」「詳しくはこちら」が並んでいると、どれが何のリンクか分かりません。検索エンジンも、リンクの文字を手がかりにリンク先の内容を理解します。
- よくない例：
詳しい仕様は、<a href="…">こちら</a>をご覧ください。 - よい例：
詳しい仕様は、<a href="…">ご利用ガイドのPDF</a>をご覧ください。
画像をリンクにするときは alt を忘れない
画像だけをリンクにするときは、画像の alt がリンクの文字の代わりになります。alt には、画像の見た目ではなく、リンク先が分かる言葉を書きます。
<a href="/contact">
<img src="btn-contact.png" alt="お問い合わせフォーム">
</a>
ページ内リンク
同じページの中の場所に移動させたいときは、移動先の要素に id を付け、href に #id名 を書きます。
<a href="#section-01">セクション1へ移動</a>
<section id="section-01">
<h2>セクション1のコンテンツ</h2>
</section>id は1ページの中で重ならない名前にします。別のページの決まった場所へのリンクは、/page/#section-01 のようにURLのあとに付けます。
CSSに次の1行を書くと、JavaScriptを使わずに、移動がなめらかなスクロールになります。
html {
scroll-behavior: smooth;
}WordPressでは
- 新しいタブで開く：
リンクを作るときの設定で「新しいタブで開く」をオンにすると、target="_blank"とrelが自動で付きます - 見出しへのページ内リンク：
見出しブロックを選んで、右側の設定の「高度な設定」→「HTMLアンカー」に名前を入れると、それがidになります。リンクのURLに#その名前を入れれば、その見出しに移動できます - rel を自分で付けたいとき：
ブロックの「HTMLとして編集」か、コードエディターでrel="sponsored"などを書き足します
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- リンクは aタグの
hrefにリンク先を書く。新しいタブで開くならtarget="_blank" rel="noopener"は今のブラウザでは自動で効くが、付けておくと安心。広告のリンクにはrel="sponsored"- aタグでカード全体を囲めるが、中に別のリンクやボタンなど操作できるものは入れない
- リンクの文字や画像の
altは、リンク先が分かる言葉にする - ページ内リンクは
idと#id名。WordPressでは「HTMLアンカー」で id を付ける
コメント