「ページが長すぎて、読みたい場所にたどり着けない…」
そんなストレスを解消してくれるのが、ページ内リンク（HTMLアンカー）です。
私はこれまで数多くのブログを運営してきましたが、アンカーを使いこなせるようになってから、明らかに読者の滞在時間が延び、検索順位も安定するようになりました。逆に、初心者の頃は「リンクをクリックしても何も起きない」という失敗を何度も経験し、深夜まで原因を探ったこともあります。
この記事では、私の失敗談や成功体験を交えながら、アンカーの正しい使い方を徹底解説します。
アンカーとは？「目次から一瞬でジャンプ」を支える技術
アンカーは、その名の通り「錨（いかり）」を意味します。長い航海の途中で特定の場所にピタッと停泊するように、Webページ内の特定の場所にユーザーを誘導する仕組みです。
特に、最近はスマホで記事を読む人が増えています。[amazon_link product=”iPhone 15″]などの小さな画面ではスクロールが大変ですよね。そんな時、記事の冒頭にアンカーを設定した目次があるだけで、読者の利便性は劇的に向上します。
【体験談】初心者がハマる「アンカーが飛ばない」3つの罠
私が初期によくやらかしたミスを紹介します。これさえ避ければ、あなたもアンカーマスターです。
- ID名の重複：1ページの中に同じ「id=”point1″」を2つ作ってしまい、ブラウザがどこへ飛べばいいか迷子になるケース。
- 全角文字の使用：ID名に「id=”アンカー”」と日本語を使ってしまい、一部のブラウザで全く機能しなかった苦い思い出があります。必ず半角英数字（例：
id="anchor"）を使いましょう。 - 上部メニューで隠れる：ジャンプした先が、固定表示（追従）しているヘッダーの下に隠れてしまう現象。これはCSSで「scroll-margin-top」を設定することで解決できました。
具体的な設定手順：HTMLとWordPress
HTMLで書く場合
まずは「出発点（クリックする場所）」と「到着点（ジャンプ先）」を作ります。
- 出発点：
<a href="#section-1">ここからジャンプ</a> - 到着点：
<h2 id="section-1">到着地点</h2>
hrefの中身の先頭に「#（シャープ）」をつけるのを忘れないでください。これが「ページ内を探せ」という合図になります。
WordPress（ブロックエディタ）の場合
今のWordPressは本当に便利になりました。
- ジャンプ先のブロックを選択する。
- 右側の設定パネルにある「高度な設定」をクリック。
- 「HTMLアンカー」の欄に好きな文字列（例：
my-link）を入れるだけ。 - あとはリンクボタンに
#my-linkと入力すれば完了です。
SEO効果を最大化する「アンカーテキスト」の書き方
単に飛ばすだけでなく、SEO（検索エンジン最適化）を意識するなら、リンクにする言葉（アンカーテキスト）にこだわりましょう。
「詳細はこちら」というリンクよりも、「[amazon_link product=”MacBook Air”]のスペック比較を見る」という具体的なテキストの方が、Googleのロボットも「あ、ここはスペックについて書いてあるんだな」と正しく理解してくれます。
実際、私のサイトでも「こちら」を「具体的な内容」に書き換えただけで、関連キーワードでの掲載順位が上がった事例がいくつもあります。
まとめ：読者の「時短」が最高のSEO
アンカーを使いこなすことは、読者の時間を大切にすることに繋がります。
特に、情報の多い記事では、[amazon_link product=”iPad Pro”]でサクサクと必要な情報だけを拾い読みしたいユーザーにとって、アンカー付きの目次は必須装備です。
まずは、あなたの記事の最も重要な見出しに、一つだけアンカーを設定してみてください。その小さな工夫が、読者に喜ばれる「親切なサイト」への第一歩になります。
次は、この記事に合わせたスムーズスクロールの実装コードを紹介しましょうか？
コメント