知っておくべきWordPressでページ内リンクの簡単な作り方

アシスタントさん

最近、記事が長文になりがちで、読みにくいかなとか、他で話している箇所にジャンプできれば喜ばれそうと思うことが多いんですよね、、、

じゅん

WordPressテーマがブロックエディターに完全対応していれば、簡単に記事内の指定した場所にジャンプするようにできますよ。

ナビゲーションを整えてサイトを訪れた人に、有益な情報を簡単に見つけてほしいとか伝えたいポイントだけでも読んでいってほしいと思うことは多いのではないでしょうか。

この記事では、WordPressのブロックエディターを使いページ内リンクを作るメリットと簡単なリンクの設定方法を紹介します。

WordPressでページ内リンクを設定して、サイトを訪れた読者の満足度を向上したい方はぜひ最後まで読んでいってください。

ページ内リンクを使うメリットとは

まず、ブログやサイトでは被リンクと外部リンク、内部リンク、ページ内リンクの4種類のリンクがあります。

• 被リンクは、自分のサイトが他のサイトで参考になると紹介されてリンクしてもらっている状態
• 外部リンクは、逆に自分のサイトで他の外部サイトを紹介したときにリンクしている状態
• 内部リンクは、自分のサイト内部で関連性がある記事にリンクしている状態
• ページ内リンクとは、同一ページ内で任意の箇所にリンクをしている状態

ページ内リンクはアンカーリンクとも呼ばれ、HTMLアンカーを使って設定します。

旧のクラッシックエディターでのページ内リンクの作成には、複数のステップと技術的知識が必要でした。

1. ビジュアルエディターからテキストエディターに切り替えて、ターゲットとなるテキストにHTML IDを手動で追加する
2. ビジュアルエディターに戻り、作成したHTML IDへのリンクを設定する

このプロセスにはエディターモードの切り替えとHTMLコードの入力・編集が含まれていて、特に初めての人には手間のかかる難しい作業でした。

JIN:Rのようなブロックエディターに対応しているWordPressテーマでは、HTMLアンカーを設定すれば誰でもページ内リンクを作成できます。

【体験用】ページ内リンクのアイデアまでジャンプします。

では、ページ内リンクがあることでどのようなメリットがあるのでしょうか。

例えば、記事が長くなりスクロール量が増えてしまったときなどに、辿り着きたい情報により早くアクセスできるようになり、読むのが楽になる効果があります。探している答えにすぐアクセスできることで記事を読むのが快適になり、分かりにくくてストレスを感じ記事から離脱する人が減ります。

このようにHTMLアンカーを設定した位置までジャンプやスクロールするなど、ナビゲーションが的確だとユーザービリティーが向上します。すると、Googleなどの検索エンジンによるサイトの評価を高め、結果として検索順位の向上につながります。

ページ内リンクのブロックエディターでの作成手順

見出しなど読者に見せたい場所へジャンプするリンクの作り方を解説していきます。

ジャンプさせたい見出しの上にスペーサーブロックを置く

「/スペーサー」でブロックを呼び出します。このスペーサーブロックは、公開ページでは表示されないです。

スペーサーブロックを置く理由は、ジャンプした後に見せたい内容を読者の目に入りやすくするためです。

直接ページ内リンク先に設定してしまうと、追尾させているヘッダーに隠れてしまったり、画面の上部過ぎて目的の次の段落に目がいってしまうことがあります。

そのような状態を避けて、ページ内リンク先の少し上にジャンプした方が読者は認識しやすくなります。

スペーサーブロックにHTMLアンカーを設定する

スペーサーブロックの高さを設定します。最初は高さ10pxぐらいにして、ジャンプした後に目的の場所が見えやすいように後で調整しましょう。

高度な設定を開くと、HTMLアンカーを入力する場所があります。後で場所が分かる好きな英数文字列を入力します。

HTMLアンカーにジャンプするハイパーリンクを作る

段落ブロックのテキストなどに「記事URL/#HTMLアンカー」のハイパーリンクを設定します。この記事の場合は、「https://web-kumitate-koubou.com/wp-anchor-links/#(HTMLアンカー)」です。

HTMLアンカーを設定したブロックに、固有のURLを割り当てているイメージです。

WordPressがブロックエディターに対応していると、この3ステップでページ内リンクが作成できます。

ページ内リンクを効果的に使うアイデア

記事全体の目次は「Rich Table of Contents」のプラグインを使って、見出し（H2,H3など）一覧で表示できます。

簡易的な目次というのは、初めに箇条書きを作ってから詳細を説明しているときに、箇条書きのテキストにリンクを設定する方法です。

H2見出しに含まれるH3見出しを箇条書きしていれば、全体の目次には表示されています。ですが、上までスクロールしないとアクセスできないです。簡単に興味あるところにジャンプできると読者の利便性が良いので、H2見出しに含まれるH3見出しの目次を簡易的に作るということです。

ページ内リンクの方法であれば、自由にHTMLアンカーを設定して目次にできる良さもあります。

サンプルとして、箇条書きを簡易的な目次にしています。

詳しい内容は他の場所で説明していると、もう一度同じことを書くのも冗長な記事になってしまうので避けたいです。

• 先ほど説明した通り、
• 詳しくは後ほど話しますが、

と、詳しく説明済みの内容を補足したり、概略を伝えてから別のセクションで詳しく説明したりの場合に使える方法です。

「先ほど」や「後ほど」にハイパーリンクを設定するだけで、何を指しているのか明確にできます。国語のテストになるくらい「この、あの、その、どの」などは読者を混乱にさせてしまいます。でも、ページ内リンクを使うと、参照してほしい部分を正確に伝えられます。

【サンプル】こちらでページ内リンクのメリットを説明した通り、、、

ページ内リンクで表示させるジャンプ先やハイパーリンクは、ボタンブロックと組み合わせても大丈夫です。例えば次の方法です。

• ボタンブロック直前のスペーサーにHTMLアンカーを設置して、説明文のテキストにハイパーリンクを設定する
• おすすめ商品などのPR文章直前にスペーサーにHTMLアンカーを設置して、関連する見出し終わりにボタンブロックを置きハイパーリンクを設定する

【サンプル】WordPressテーマ JIN:R 公式へのボタンにジャンプします。

ここまでページ内リンクの方法を説明でした。

HTMLアンカーを使ったアンカーリンクでは、別ページの特定の場所へジャンプする設定もできます。リンクをしたい記事の中に、内部リンクでつなぎたい記事URLのHTMLアンカーへハイパーリンクするだけです。

【サンプル】JIN:Rのオリジナルブロックの一覧へジャンプします。

内部リンクとして使えることを利用して、グローバルメニューから指定の場所にジャンプするリンクも作れます。メニューを作るときにカスタムリンクタブで、HTMLアンカーを設置している記事URLとHTMLアンカーを入力するだけです。

メニューから記事の始まりではなく、記事内で指定した箇所にピンポイントでナビゲーションできます。

まとめ：ナビを整えて情報へのアクセスを良好にしよう

WordPressのブログやサイトで、ページ内リンクを作る方法を紹介してきました。

ブロックエディターに対応しているWordPressテーマだと、ブロックの高度な設定でHTMLアンカーを入力してそこにジャンプするハイパーリンクを設定するだけです。

旧のクラッシックエディターのような複雑さはもうありません。

読者が知りたい情報にアクセスしやすいページは、間接的に検索結果にも良い影響を与えます。

ページ内リンクを適切に使いナビゲーションを整備することで、ユーザビリティを向上させていきましょう。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。