WordPressでページ内リンクを貼る方法！失敗しない10のチェックポイント

ここではページ内リンクの仕組みや基本的な作り方を学んでいただけます。

このページでは、次のようなことが分かります。

WordPressのページ内リンク（アンカーリンク）の基本と仕組みが分かる。
ブロックエディタとクラシックエディタでの具体的な作り方が分かる。
別ページやメニューからページ内ジャンプさせる応用テクが分かる。
「リンクが動かない・位置がズレる」ときのチェックポイントが分かる。
SEOやユーザー体験の面で、どこまで効果があるのかイメージできる。

【wordpress】ページ内リンクの基本をざっくり整理しよう
WordPressでページ内リンクを作る3ステップ
応用編：別ページやメニューからページ内ジャンプさせる
トラブルシュート：ページ内リンクが動かない・ズレるとき
ページ内リンクとSEO・ユーザー体験・アクセシビリティ
運用のコツ：id名のルールとチェックリスト
よくある質問
まとめ

【wordpress】ページ内リンクの基本をざっくり整理しよう

ごとう

最初に、ページ内リンクがそもそも何なのか、そして通常のリンクと何が違うのかを簡単に整理しておきます。

ページ内リンク（アンカーリンク）とは？【通常リンクとの違い】

ページ内リンクは、同じページの中の特定の場所に、クリックひとつでジャンプさせるリンクのことです。アンカーリンク、ページ内ジャンプと呼ばれることもあります。イメージしやすいように、通常のリンクとの違いを表にまとめます。

種類	行き先	URLの例	使う場面の例
通常リンク	別ページ全体	https://example.com/blog/	記事一覧へのリンク、他サイトへのリンク
ページ内リンク	同じページの特定の位置	https://example.com/blog/#faq	目次から各見出しへ飛ばす、「よくある質問」までジャンプさせる

URLのうしろに付いている「#faq」のような「#＋名前」の部分が、ページ内リンクではとても重要です。この「名前」がid（ID属性）と呼ばれるもので、ここでは「ジャンプ先の名前」くらいの理解で十分です。

ページ内リンクがあると何が便利なのか

私が自分のサイトで実感しているメリットは、おおまかに次のとおりです。

長い記事でも、読者が知りたいところだけすぐ読めるので、途中で離脱されにくくなる。
「料金」「申込フォーム」「問い合わせ」など、ゴールになる場所に一気に飛ばせる。
スマホ利用が多いサイトで、ひたすらスクロールするイライラをかなり減らせる。
FAQページやマニュアル系の記事で、検索しながら読むよりもずっと楽になる。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

WordPressでページ内リンクを作る3ステップ

ごとう

ここからは、WordPressでページ内リンクを作る具体的な手順を3ステップで説明します。

ジャンプ先に「名前（id）」を付ける。
ジャンプ元のテキストやボタンにリンクを貼る。
プレビューで実際に動くか確認する。

ステップ1：ジャンプ先のブロックに「HTMLアンカー（id）」を設定する

ブロックエディタでは、見出しブロックや段落ブロックなどに「HTMLアンカー」という項目があります。ここに「jump-contact」などの名前を入れることで、「#jump-contact」というページ内リンクのジャンプ先を作ることができます。あとでリンク元を作るときに必要になるので、付けたid名はどこかにメモしておくと安心です。

id名（アンカー名）を決めるときのポイントを、分かりやすく表にしておきます。

やっていい例	避けたい例	理由・ポイント
contact	1	数字だけは避ける。意味のある英単語にしておくと、自分もチームも分かりやすい。
price-plan	料金	日本語idは動くこともあるが、環境によっては不具合の原因になることがある。
faq-01	セクション１	半角英数字とハイフンだけを使うと、後から見返したときに管理しやすい。

ステップ2：リンク元からページ内リンクを貼る

次に、さきほど付けたid名に向かってリンクを貼ります。ブロックエディタでテキストリンクを作る場合は、ふだんのリンク挿入とほとんど同じ感覚で操作できます。

リンクにしたいテキスト（例：「お問い合わせはこちら」）をドラッグで選択する。
リンクボタンをクリックする。
URL入力欄に「#contact」のように「#＋id名」を入力して確定する。

リンク元として使える場所の例を整理しておきます。

リンク元の場所	ページ内リンクの使い方
記事の目次	各見出しのidに飛ばして、読みたいところだけ読めるようにする。
記事冒頭のバナー	下のほうにあるフォームや料金表まで、一気にジャンプさせる。
文章中のテキストリンク	補足説明や用語解説、FAQセクションなどに飛ばす。
CTAボタン	「無料で相談する」ボタンから、お問い合わせフォームのブロックへ飛ばす。

ページ内リンクでは、「#＋さきほど決めたid名」を正確に入力することがとても大事です。ここが1文字でも違うと、クリックしても動かないので注意してください。

ステップ3：クラシックエディタやHTMLでページ内リンクを作る

クラシックエディタやテキストモードで作業したい場合は、HTMLを使って同じことを行います。やることは変わらず、「ジャンプ先にidを付ける」「リンク元で#idに向けてリンクを貼る」の2つだけです。

代表的なパターンを表にまとめます。

目的	ジャンプ先のHTML例	リンク元のHTML例
見出しに飛ばす	<h2 id=”price-plan”>料金プラン</h2>	<a href=”#price-plan”>料金プランはこちら</a>
任意の段落に飛ばす	<p id=”note”>※注意事項はこちら</p>	<a href=”#note”>注意事項を読む</a>

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

応用編：別ページやメニューからページ内ジャンプさせる

ごとう

WordPressのページ内リンクに慣れてきたら、同じ仕組みで「別ページの特定の場所」に飛ばすこともできます。

別ページの特定セクションに飛ばすURLの作り方

別ページの特定の見出しに飛ばすときも、基本の考え方は同じです。違いは「URL＋#id名」をセットで使う点だけです。よく使うパターンを表に整理します。

行き先	URLの形	例
同じページの見出し	#faq	#faq
別ページの見出し	ページURL#faq	https://example.com/service/#faq
別ページのフォーム	ページURL#contact	https://example.com/contact/#contact

まず、飛ばしたいページ側の見出しやフォームにidを付けておくのを忘れないようにしてください。そのうえでリンク元から「ページURL＋#id名」でリンクを貼れば、狙った場所へジャンプさせることができます。

グローバルメニューやボタンにページ内リンクを設定する

ワンページ構成のサイトやLP（ランディングページ）では、メニューをクリックすると、ページ内の各セクションへスルッと移動するデザインがよくあります。WordPressでも、次のような流れで再現できます。

メニュー編集画面で「カスタムリンク」を選ぶ。
URL欄に「#about」「#service」のようにページ内リンクを入れる。
表示名を「サービス」「料金」などにして保存する。

【稼げるキーワード教えます】
▼　　▼　　▼

固定ページをトップページにしている場合、「https://example.com/#service」のようにフルURLで登録するケースもあります。テーマによって挙動が変わることもあるので、自分の環境で動くほうを採用してください。

ランディングページでのページ内リンク設計のコツ

私がLP制作の相談を受けたときによく行う、ページ内リンク設計のパターンを紹介します。

ページの冒頭に「今すぐ申し込む」ボタンを置き、申込フォームにページ内リンクで飛ばす。
「料金」「よくある質問」「お客様の声」など、よく読まれるブロックにidを必ず設定しておく。
記事途中のバナーやテキストリンクからも、同じフォームや料金表に飛ばす。

トラブルシュート：ページ内リンクが動かない・ズレるとき

ごとう

ここからは、ページ内リンクがうまく動かないときのチェックポイントを簡潔にまとめます。

クリックしてもスクロールしないときのチェックリスト

「リンクをクリックしてもまったく動かない」ときは、だいたい次のどれかが原因です。

症状	主な原因	確認ポイント
まったく動かない	id名のミス	#contactとid=”contatc”のように、スペルが違っていないか。
動くけれど変な場所で止まる	テーマやプラグインによるスムーススクロール	JavaScriptなどでスクロール位置が調整されていないか。
一部のページだけ動かない	別ページ側にidが存在しない	そのページのHTMLに、該当のidが本当に書かれているか。