BLOG SEO

ページ内の特定の場所にジャンプする方法【HTMLが分からなくてもOK】

2020年10月30日

記事の途中に飛ばして途中から読めるようにしたい。ページ内リンクを作りたいけどHTMLは必要なの?

 

このような疑問にお答えしていきます。

 

本記事の内容

・ページ内リンクの解説

・ページ内リンクのHTMLの記述方法

 

本記事について

本記事を運営している僕はブログ3ヶ月目で収益5桁を達成した高校生です。

 

今回はページの途中の好きな場所にジャンプする方法を解説していきます。

 

クリックするだけでページ内の好きな位置に移動できる便利なテクニックですが、やり方が分からない場合が多い。

 

そこで、HTMLについての詳しい知識が無い人でも簡単にページ内リンクを作ることができる方法をまとめました。

 

本記事の手順に従えば10分程度で簡単にページ内リンクを作れると思いますよ。

 

ページ内リンクとは?

ページ内リンクとは、クリックするとページ内の好きな位置までスクロールできるリンクのことです。

 

同じページ内だけでなく違うページの途中まで飛ばすこともできるんです。

 

ページ内リンクを作る手順

 

それではページ内リンクを作る手順を見ていきます。

 

やることは上記の画像のようにコードを記述するだけです。

 

ページ内リンクを作る手順

  1. 好きなid名を決める
  2. ジャンプ先のコードを書く
  3. ジャンプ元のコードを書く

 

ページ内リンクのイメージについて簡単に説明するとこんな感じです。

  • ジャンプ元ボタン:記事の中のどこでもリンクを作れる
  • ジャンプ先ボタン:見出しにしかリンクを作れない

 

つまりページ内の好きな場所にジャンプできると言いつつ、ジャンプ先は見出しに決まっているわけです。

 

 

ビジュアルだと上記のような表示になります。

 

それでは実際にページ内リンクを作っていきましょう。

 

好きなid名を決める

 

まずは、ジャンプ元のボタンを作りましょう。

 

exampleの部分に自分が好きな文字を記述します。

 

<h2 id="example">ジャンプ先(見出し)</h2>

 

基本的には英数字を入れておけば大丈夫だと思います。

 

ジャンプ先のコードを書く

 

次にジャンプ先のコードを書いていきます。

 

<h2 id="example">ジャンプ先(見出し)</h2>

 

赤色の部分を見出しのタグに付け加えるだけです。

 

今回はh2で解説をしていますが、h3でもh4の見出しにもジャンプ先を作ることはできるので安心してください。

 

ジャンプ元のコードを書く

 

ジャンプ元のコードを記述していきます。

 

<a href="#example">ジャンプ元</a>

 

先ほどのジャンプ先ボタン同様に作成していきます。

 

赤色の部分を、通常リンクを作るときのaタグに付け加えるだけで大丈夫です。

#exampleの部分は、ジャンプ先(見出し)で設定したものと同じ文字を記入しましょう。

 

ページ内リンクについて

ここまででページ内リンクを作る方法を紹介してきました。

 

ページ内リンクを使うことで、スクロールなどの手間を掛けずに目的のコンテンツへすぐに辿り着けます。

 

これによりユーザー満足度を高めることができGoogleから評価されやすくなることもありますが、いくつか気をつけておくポイントがあるので解説しておきます。

 


ユーザーの混乱を招くことがある

 

ユーザーの頭の中ではリンク=別サイトに飛ぶものです。

 

同じコンテンツの中を何度も行ったり来たりして、同じものを繰り返し読んでしまうことになり逆に時間がかかることもある。

 

ページ内リンクだということが分かるように短くていいので説明書きをいれておきましょう。

 


異なるページに飛ばすのは注意

 

ページ内リンクで、異なるページに飛ばす際は注意が必要です。

 

注意書きなしで異なるページに飛ばされると、ユーザーは自分の現在地が分からなくなります。

 

理由は、記事の途中の見出しにリンクが設置されているからですね。

 

ページ内リンクは便利だけど、見慣れていない人も多いです。

 

終わりに

今回はページ内リンクの作り方と、注意点について解説をしました。

 

うまく使えばユーザビリティを上げてSEO効果も期待できます。

 

ページ内リンクを使う時はひとこと説明書きを加えるようにしましょう。

 

参考記事多すぎると危険。WordPressおすすめプラグインを7つ厳選

参考記事ブログ初心者でも登録できるおすすめASPを10個紹介

-BLOG, SEO

© 2021 HYON BLOG Powered by AFFINGER5