はじめに
目的
この章では、本書の狙いと読み進め方をやさしく説明します。HTMLのページ内リンク（アンカー）を学び、実装からトラブル対処、SEOの工夫まで実用的に使える知識を身につけることが目的です。
対象読者
初心者から中級者のウェブ制作者、ブログ運営者、WordPress利用者を想定します。HTMLの基本タグがわかる方なら読み進められます。専門用語は最小限にして、具体例で補足します。
本書で学べること
- HTML4とHTML5それぞれのページ内リンクの作り方
- リンクが飛ばないときの原因と直し方
- WordPressでの設定手順
- 内部リンクでSEO効果を高めるポイント
進め方と注意点
章ごとに実例とコード例を示します。まずは基本を試し、問題が出たら該当章に戻ると効率的です。実際のサイトに適用する際は、バックアップを取ってから変更してください。
HTMLでのページ内リンク設定の基礎知識
概要
ページ内リンクとは、同じページ内の特定の位置へ移動するための仕組みです。目次から本文の見出しへジャンプさせるなど、閲覧の利便性を高めます。設定には「リンク元」と「リンク先」の両方が必要です。
基本要素
- リンク元：
<a href="#目標のID">リンクテキスト</a>のようにhrefに#で始まる識別子を指定します。 - リンク先：移動先の要素に
id="目標のID"を付けます。idはページ内で一意にします。
実際の書き方（例）
<a href="#section1">この見出しへ</a>
...
<h2 id="section1">セクション1</h2>
このようにすると、リンクをクリックすると該当位置までスクロールします。
注意点
- idは同じページで重複させないでください。重複すると意図した場所へ飛ばない場合があります。
- 日本語のidは使えますが、半角英数字で短くする方が互換性で安心です。
- 固定ヘッダーがある場合、見出しが隠れることがあります。その場合はCSSの
scroll-margin-topを使うか、少し余白を追加してください。
互換性（補足）
古い例では<a name="...">が使われましたが、現在はid属性を使う方法が標準です。
ユーザビリティのコツ
リンクテキストは目的を明確にし、目次や「トップへ戻る」など分かりやすい文言を心がけてください。キーボード操作でも移動できるよう配慮すると親切です。
従来のHTML（HTML4）での実装方法
基本の書き方
HTML4では、ページ内リンクの目的地にname属性を付けたアンカー要素を置きます。例:
<a name="example">ここが目印（テスト）</a>
<a href="#example">ここからリンク</a>
上のようにname="example"を付けた場所へ、href="#example"で飛びます。リンク先は同じページ内だけでなく、page.html#exampleのように別ページにも指定できます。
実際の配置例と注意点
通常は見出しや段落の直前に置きます。目立たせたくない場合は空のアンカーを使うこともありますが、空だとスクリーンリーダーで認識されにくくなることがあるため、見出し要素（h1〜h6）やid付きの要素を併用すると親切です。
制限と互換性
name属性のアンカーは古い書き方で、多くのブラウザは対応しますが、HTML5では非推奨になりました。フォームやスクリプトで同じ名前を使うと混乱する場合があります。新しい書き方ではid属性を使うことが一般的です。
HTML5での最新の実装方法
基本的な書き方
HTML5ではid属性を使うのが一般的です。アンカーはセクション1へ、目標は
セクション1
のように記述します。シンプルでブラウザやURLとの相性が良いです。
適用できる要素
idは見出し（h1〜h6）、div、section、article、footerなど、ほとんどの要素に付けられます。意味のある要素に付けると構造が分かりやすくなります。
実装のポイント
- idはページ内で一意にします。同じidがあると動作が不安定になります。
- id名は英数字とハイフンを使うと扱いやすいです（例: section-1）。
- 他ページから直接参照するときはフラグメント識別子（#section-1）をURLに付けます。
アクセシビリティと動作改善
- リンク先にフォーカスが移るように、必要なら tabindex=”-1″ を設定します。
- スムーススクロールはCSSのhtml{scroll-behavior:smooth;}で簡単に実装できます。
実例（ナビからジャンプ）
<nav><a href="#about">会社概要</a></nav>
<section id="about"><h2>会社概要</h2>...</section>
この方法で意味のある構造化された内部リンクが実現できます。
ページ内リンクが飛ばない原因と解決策
よくある原因
- id属性とhref属性の不一致：
<a href="#section1">に対し、移動先がid="sec1"だと飛びません。値を完全一致させてください。 - name属性とid属性の混在：HTML5では
idを使います。古いnameに頼ると挙動が不安定です。 - 重複したid：同じidが複数あるとブラウザがどこに飛ぶか迷います。idは一意にします。
- 要素が存在しない／非表示：移動先が
display:noneやまだ読み込まれていないと機能しません。動的に生成する場合はロード後にリンクを効かせます。 - 固定ヘッダーで見出しが隠れる：飛んでも見出しが隠れると「効かない」と感じます。スクロール位置を調整します。
確認手順（簡単）
- hrefの#以降と移動先のidを文字単位で比べる。大文字小文字も区別します。
- ブラウザの検証ツールで該当要素が存在するか確認する。
- idが重複していないか確認する。
具体的な解決策（コード例）
- 正しい例：
<a href="#about">会社概要</a>／<h2 id="about">会社概要</h2> - 固定ヘッダー対応（CSS）：
h2{scroll-margin-top:80px;}これでヘッダー分の余白を確保します。 - 動的要素の場合（JavaScript）：要素生成後に
location.hash = '#id名'やelement.scrollIntoView()で確実に移動させます。
その他の注意点
- idにスペースや特殊文字を使わない。英数字と-や_が安全です。
- ページを跨ぐリンクは
/page.html#idのようにパスを含める。 - ブラウザのキャッシュや拡張が影響することもあるため、別ブラウザでの確認もおすすめします。
WordPressでのページ内リンク設定方法
方法1：テキストに#を付けてリンクする（ブロックエディタ）
- リンク先のブロックを選択します。
- 右側のブロック設定で「高度な設定」欄を探し、「HTMLアンカー（例：section1）」を入力します。
- リンク元のテキストを選び、リンク挿入でURL欄に「#section1」と入力します。
例：リンクURLに「#about」→ 対象ブロックのHTMLアンカーは「about」。
方法2：GUIメニューからHTMLアンカーを設定する
- ブロックを選択 → ブロック設定の「高度な設定」へ。
- 「HTMLアンカー」に半角英数字とハイフンを使って名前を入力します（空白は不可）。
- リンクは通常のリンク挿入と同様に「#アンカー名」を指定します。
動作確認（プレビューでの確認）
- 投稿を保存または下書き保存します。
- プレビューを開き、リンクをクリックしてページ内で該当位置に移動するか確認します。
注意点
- アンカー名は他と重複しないように決めます。
- 日本語を使うとブラウザでURLが変換される場合があるため、英数字やハイフン推奨です。
- 固定ページやテーマによってはスクロールの挙動が異なることがあります。
SEO効果を高める内部リンク設置のポイント
目的を明確にする
内部リンクはユーザーの導線と検索エンジンの巡回を助けます。まずどのページに訪問者を導きたいかを決めてください。例えば「商品ページ」へ誘導して購買を増やす、といった目的です。
関連性の高いリンクを優先
同じテーマやカテゴリのページ同士でリンクを張ります。無関係なページへ飛ばすとユーザーが混乱し、離脱率が上がります。例：レシピ記事から食材の購入ページへリンク。
アンカーテキストの書き方
「こちら」や「詳細はこちら」ではなく、具体的な語句を使います。例：「夏向け保湿クリームの詳しいレビュー」。検索エンジンとユーザーに内容を伝えやすくなります。
設置場所と量
本文中の文脈に沿った箇所に置きます。サイドバーやフッターに無意味にたくさん置くと効果が薄れます。1ページあたり自然な数（目安は数個）を目安にしてください。
dofollow と nofollow の使い方
内部リンクは原則dofollow（特に属性を付けない）で構いません。クローラーがページ間の価値を渡せるようにします。広告や有料リンク、信頼できない外部ページへはnofollowを検討してください。
サイト構造と階層化
トップ→カテゴリ→詳細のように論理的な階層を作ります。パンくずリストを設けるとユーザーとクローラー両方に親切です。
実践チェックリスト
- リンク先はテーマが近いか
- アンカーテキストは具体的か
- ページ数に対してリンクが多すぎないか
- 重要なページへ内部リンクが集まっているか
これらを意識して内部リンクを整えると、ユーザー体験が向上し、SEO効果も高まります。
