- ページ内リンクとは何か知りたい人
- ページ内リンクの設定方法が知りたい人
- ブログ記事のホスピタリティを向上させたい人
ブロガーの皆さん『ページ内リンク』は使いこなせていますか？
ページ内リンクとは『同じ記事内の特定の位置に移動するためのリンクのこと』です。
言葉だけではピンとこないと思いますので、以下のリンクをクリックして体験してみてください。
①：下（②）へ移動
②：上（①）へ移動
いかがでしょう。
①をクリックしたら②へ移動し、②をクリックしたら①へ移動したと思います。
これを『ページ内リンク』といいます。
今回はページ内リンクを『活用するタイミング・メリット』と『設定方法』を分かりやすく解説していきますので、ぜひ見てみてください。
ページ内リンクを使いこなしてると手慣れた感があるね(笑)
確かにね(笑)
この記事でみんなマスターできるよ！！
運営者プロフィール・ Twitter（＠ririmannonline）
目 次
「ページ内リンク」とは
ページ内リンクとは、冒頭でも説明した通り、 『同じ記事内の特定の位置に移動するためのリンクのこと』です。
つまり、読者にとって読みやすい記事を作成する時に使用するリンクということになります。
では、実際にはどのようなタイミングで使用するのか具体例をいくつか挙げて説明していきます。
ページ内リンクを活用するタイミング
ページ内リンクを活用するタイミングは大きく分けて3つありますので、以下に詳しく記載します。
- 読者が知りたい情報をすぐに提示したい時
- 記事を作成する上で、結論だけ記載すると話の文脈的におかしくなることがあります。
ただ、読者は結論だけ求めていることがあります。
その際は「とにかく結論を知りたい方はこちら」等のリンクを冒頭に記載しておき、記事全体は構成をしっかり考えて作成しておきます。
すると、記事全体の流れも良くなりますし、結論を求めている読者へのアンサーにもなります。 - ページ内で説明した内容を、再度読者に確認してもらいたい時
- 文章が長くなり説明している項目が増えてくると、読者にとっても頭の整理が難しくなるときがあります。
その時に「〇〇に関しては前述のとおりです」などのリンクを作成し、内容を復習してもらう機会を設けると記事の内容をより理解してもらうことができます。 - 後で説明する内容を事前に告知しておく時
- 記事の構成上、前提条件を解説する必要があった場合、読者はその段階で「○○はどうなんだろう？」と疑問を持つ場合があります。
その際に「〇〇については後ほど解説します」などの言葉があると、読者は安心して記事を読むことができます。
疑問を解決するために記事を読んでいるので、疑問に答えれる記事なのか明確にしておくことが重要です。
長々と書きましたが、まとめると「読者にとって必要な情報が、必要なタイミングで設置されていると便利」
ということです。
どれだけ読者目線になれるかがポイントだね！！
ページ内リンクのメリット
ページ内リンクを使うメリットは「記事のホスピタリティを向上する」という点です。
「思いやり」や「心からのおもてなし」という意味で、ブログでいうところの『読者ファースト』を指す言葉です。
読者にとって分かりやすく、丁寧に説明されている記事は検索エンジンからも高い評価を受けますし、そうなると更に多くの方に見てもらうことができます。
ひいてはご自身のブログへのPV数向上や収益増加につながるということです。
「情けは人の為ならず」だね！！
その他の「見やすい記事の書き方」は以下の記事で詳しく記載していまうので、参考にしてみてください。
「ページ内リンク」の設定方法
では、前置きが少し長くなりましたが「ページ内リンク」の設定方法について説明していきます。
設定方法は簡単で以下の3STEPです。
- STEP1HTMLアンカー設定移動させたい先のブロックを選択しアンカー設定を行う。
- STEP2URL設定テキストリンクまたはボタン等を設置する。
- STEP3動作確認プレビューにて正しく動作するか確認する。
実際の設定画面のスクショを用いて1つずつ説明していきます。
STEP1：HTMLアンカー設定
まず初めに「HTMLアンカー設定」をする必要があります。
名前は難しそうですが、凄く簡単なので安心してください。
要するに「ブロックに名前を付けて、目印にする」という行為です。
アンカー設定には注意事項がありますのでご注意ください。（詳細は後述しています）
まず以下の画像の通り、移動させたいブロックを選択し「HTMLアンカー」を入力します。
「HTMLアンカー」に入力する文言はなんでも良いです。
簡単なのは見出しの内容などでしょうか。
後から見て分かりやすいものにしておくのがおすすめです。
STEP2：URL設定
では、次に「URL設定」です。
テキストリンクやボタンを活用し、先ほど設定したブロックへ移動するリンクを作成します。
まず、テキストリンクの場合は、以下の画像の通りで「#（小文字）＋HTMLアンカー」を入力すればOKです。
ボタンの場合はこちらです。（テーマによって違うと思いますがURLを入力する部分に「#とHTMLアンカー」を記載すればOKです）
※筆者は『JIN』を利用しています。
また、記事内の移動だけではなく、『自身のブログ内であれば、別記事の見出しでも移動させることが可能』です。
つまり、スポット的に別の記事でまとめた見出しを読んでもらいたい時は、そこへ移動させれるということです。
その方法も簡単です。
上記では「#（小文字）＋HTMLアンカー」 を入力するとご説明しましたが、それにプラスして別記事のULRを入力するばOKです。
要するに 「別記事のURL＋#（小文字）＋HTMLアンカー」 を入力するということです。
STEP3：動作確認
上記の「HTMLアンカー設定」と「URL設定」が完了すると、最後に動作確認を実施します。
先に説明した内容で設定すれば問題ないと思いますが、リンクがおかしくなってることはたまにあるので、確実に確認しておきましょう。
確認方法は言うまでもなく、記事のプレビューをおしてリンクをクリックするだけです。
意外と設定は簡単なんだね！
そうそう！
これだけ簡単だったらどんどん活用していきたいよね！
「ページ内リンク」の注意点
「ページ内リンク」は便利で記事の見やすさも向上しますが、1点だけ注意点があります。
それは『目次が正しく動作しないことがある』ということです。
詳しく説明します。
目次が正しく動作しないことがある
正しくは「見出しにHTMLアンカー設定をすると、正常に動作しない目次のプラグインがある」ということです。
筆者は『Table of Contents Plus』を使用していますが、こちらは問題なく動作します。
ただ、以前利用していた「Rich Table of Contents」は見出しのHTMLアンカー設定をすると目次が正常に動作しないことがありました。（今は改善されてるかもしれません）
ただ、対処方法もありますのでご安心ください。
対処方法
対処方法は『見出しの一個上に空白のブロックを設置し、そこにHTMLアンカー設定をする』というものです。
以下の画像を参照ください。
要するに「見出しの設定をいじるから目次のプラグインがうまく作動しないのだから、見出しはいじらないでおこう」ということです。
厳密には移動先が1ブロックずれているのですが、見た目はあまり変化ないと思います。
この点さえ、注意すれば「ページ内リンク」をうまく活用できると思います。
まとめ：ページ内リンクは活用しよう
ページ内リンクについてまとめます。
ページ内リンクとは
- 同じ記事内の特定の位置に移動するためのリンクのこと
ページ内リンクを活用するタイミング
- 読者が知りたい情報をすぐに提示したい時
- ページ内で説明した内容を、再度読者に確認してもらいたい時
- 後で説明する内容を事前に告知しておく時
ページ内リンクの設定方法
- STEP1：HTMLアンカー設定
- STEP2：URL設定
- STEP3：動作確認
これで「ページ内リンク」が十分に活用できるようになったと思います。
読者目線で記事を書くのは難しいですが、少しずつ慣れていきましょう！
今回のようなブログ関連の内容を『ブログのノウハウ全て公開』という記事でまとめていますので、お時間がある方は見てみてください。
これからも読者にとって見やすい記事が書けるように尽力していきたいと思います。
では、また！！
りりまん