引き継いだサイトの記事を整理していたとき、本文のリンクがほとんど「こちら」になっていて、どこへ飛ぶのか一つずつ開かないと分からない、ということがありました。直す前に、まず全体のリンクの置き方から見直すことになりました。

内部リンクとは、同じサイトの中のページどうしをつなぐリンクのことです。メニュー、パンくず、本文中のリンク、記事の下の関連記事などは、すべて内部リンクにあたります。

内部リンクは、読者が次に読むページへ移るための道です。同時に、検索エンジンもリンクをたどってページを見つけ、リンクの文言から行き先の内容を知ります。どこに、どんな文言で、どう書くか。この3つを順に説明していきます。

アンカーテキストは行き先の内容にする

アンカーテキストは、リンクになっている文字のことです。「こちら」「詳しくはこちら」「クリック」だと、リンクの先に何があるのかが分からないんです。

Google も、リンクの文言は行き先の内容が分かる簡潔なものにするよう勧めています。それに、読み上げソフトの利用者は、ページの中のリンクだけを一覧にして移動することがあります。そこに「こちら」がいくつも並ぶと、どれがどこへのリンクなのか区別できません。

<!-- 行き先が分からない -->
<p>料金については<a href="/price/">こちら</a>。</p>

<!-- リンクの文字だけで行き先が分かる -->
<p><a href="/price/">保守プランの料金</a>をご覧ください。</p>

とはいえ、すべてのリンクに同じキーワードを詰め込む必要はありません。文として自然で、行き先が分かれば十分だと考えています。

画像のリンクは alt がアンカーテキストになる

ロゴやバナーのように画像をリンクにしている場合は、画像の alt がリンクの文言として扱われます。alt が空だと、何のリンクか分からないリンクになってしまいます。ロゴの alt が空のままのサイトは、案件でもわりとよく見かけます。

<a href="/">
  <img src="/img/logo.svg" alt="株式会社サンプル" width="180" height="40">
</a>

リンクの種類ごとに役割が違う

同じ内部リンクでも、置く場所によって役割が違います。整理すると次のようになります。

ページどうしの関係をいちばんよく伝えるのは、本文中のリンクです。前後の文章から、なぜそのページにつながっているのかが分かるからなんです。グローバルナビやフッターはどのページにも同じものが出るので、個々のページの関係までは伝えられません。

関連記事を同じカテゴリから自動で並べるだけだと、話の流れと関係ない記事が並ぶこともあります。「この記事を読んだ人に次に読んでほしい1本」は、本文の中で指名してリンクするのが確実で、私もそうするようおすすめしています。

孤立ページを作らない

どこからもリンクされていないページを、孤立ページと呼びます。サイトマップに載せていても、サイトの中からリンクされていないページは見つけてもらいにくく、重要でないページとして扱われやすくなります。

キャンペーンのページ、広告用に作った LP、カテゴリに入れ忘れた記事などで起きやすい問題です。保守の相談で「このページだけ検索に出ない」と言われて調べると、これだったことが何度かあります。

• ページを新しく作ったら、関連する既存のページから1本以上リンクする
• 一覧のページ送りを「もっと見る」ボタンだけにしない。2ページ目以降にも URL を持たせ、リンクでたどれるようにする
• 重要なページは、トップページから少ないクリック数で届く位置に置く

サイトの中で、どのページがどれだけリンクされているかは、Google Search Console の「リンク」のレポートで確認できます。

リンクは a 要素の href で書く

Google がリンクとしてたどれるのは、href 属性に URL が入った a 要素です。ボタンの onclick で JavaScript からページを移動させる作りや、href="javascript:void(0)" のようなリンクは、リンクとして扱われにくくなります。

<!-- たどられにくい -->
<span onclick="location.href='/price/'">料金</span>
<a href="javascript:void(0)" onclick="goPrice()">料金</a>

<!-- リンクとしてたどれる -->
<a href="/price/">料金</a>

a 要素で書いておけば、新しいタブで開く、URL をコピーする、といったブラウザの機能もそのまま使えます。React や Next.js でも、ルーターのリンク部品（Next.js の Link など）は a 要素を出力するので、案件ではそれを使っています。

ページを移動するものは a、その場で何かを動かすもの（開閉、送信など）は button、と使い分けます。見た目がボタンでも、移動するなら a で書きます。

パンくずの HTML

パンくずは、いまのページがサイトのどこにあるかを示すリンクの並びです。順番に意味があるので ol で書き、nav で囲んで aria-label で名前を付けます。いま見ているページはリンクにせず、aria-current="page" を付けます。

<nav aria-label="パンくずリスト" class="breadcrumb">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/column/">コラム</a></li>
    <li aria-current="page">内部リンクとパンくずの組み方</li>
  </ol>
</nav>

区切りの「>」や「/」を HTML に文字で書くと、読み上げソフトがそのたびに記号を読んでしまいます。区切りは CSS で付けておくのがおすすめです。

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 2つ目以降の項目の前に区切りを付ける。
   「/ ""」は読み上げ用の代替テキストで、記号を読ませないための指定 */
.breadcrumb li + li::before {
  content: "›" / "";
  margin: 0 .5em;
  color: #999;
}

カテゴリを1記事に1つにしておくと、パンくずが決まる

WordPress で1つの記事に複数のカテゴリを付けると、パンくずにどのカテゴリを出すかが決まらなくなります。パンくずを素直に組むなら、カテゴリは1記事に1つにし、横断的な分類はタグで付けるのが扱いやすい形です。ここは構築のときによく相談を受けるところです。

パンくずには、検索エンジン向けの構造化データ（BreadcrumbList）も添えられます。書き方は別の記事にまとめています。画面のパンくずと同じ並びにすることだけ、気を付けてください。

まとめ

1. リンクの文言は「こちら」でなく、行き先の内容にする
2. 話の流れで読ませたいページは、本文の中でリンクする
3. どこからもリンクされていないページを作らない
4. リンクは a 要素の href で書く。onclick での移動にしない
5. パンくずは nav・ol・aria-current で組み、区切りは CSS で付ける

リンクとパンくずを組んだ状態で納品します

ワプラボのコーディング代行では、ナビやパンくずを nav と ol で組み、リンクはすべて a 要素で書いたうえで納品しています。WordPress 化する場合は、パンくずと構造化データをカテゴリの階層から自動で出力するところまで組み込めます。