何かのサイトを閲覧するときに、記事を長々とスクロールして目的の内容を探すのって面倒ですよね。実は記事スクロールのわずらわしさを、あなたの記事を読むユーザーも感じています。
そこで、この記事ではページ内ジャンプで記事の途中に飛ばす方法(正式名『 ページ内リンク:In-page links 』)を解説します。 かんたんな HTML を記述するだけで設定ができて、 UI(ユーザーインターフェイス)が向上するため記事の離脱率が下がる可能性があります。 設定方法は超かんたんなので、記事を読めば一瞬で使いこなせますよ。 ブロックエディタならコード入力なしにページ内リンクを設定することができます。 とりあえずリンクを試してみる人は以下のボタンをクリックしてみてください。飛びます。 タップできる目次 まず、ページ内ジャンプ(ページ内リンク)の仕組みを簡単に解説します。 ページ内ジャンプの仕組み リンクの記述方法 このように HTML コードを記述すれば、目的のコンテンツまでジャンプすることができます。 ページ内ジャンプの種類は2種あります。 テキストリンクが多いですが、場合によってはボタンリンクも使います。 この記事では、わかりやすく冒頭でボタンリンクを使用しました。このあとの項目で、テキストリンクも使用しているので参考にしてみて下さい。 ページ内ジャンプのSEO・ユーザーへの効果ページ内ジャンプ(ページ内リンク)は、UX(ユーザー体験)が向上することで間接的に SEO 効果が得られます。 ページ内ジャンプの効果
最近はスマホでのブログ閲覧が多いので、スクロールの手間をなくすだけでユーザーのストレスをかなり軽減できます。 ページ内ジャンプの設定方法では、ページ内ジャンプの設定方法を解説します。 冒頭のボタンリンクですでに試した方もいると思いますが、ここではテキストリンクでジャンプしてみましょう。 先頭の見出しに戻る方はこちらをクリックしてください。 そしておかえりなさい。 ページ内ジャンプの概要がわかったら、次は実際にページ内リンクを設定する手順です。 ページ内リンクの設定手順
このような2ステップで解説します。 STEP ジャンプ先に id を入力する ページ内ジャンプ先のアンカーに、 HTML コードで『id=”id名”』を記述する必要があります。 <p id=”test”>アンカーポイント<p> 上の記述は<p>にしていますが<div>でもOK! STEP ジャンプするためのリンクを作成する ページ内ジャンプするには、ジャンプ元のアンカーに HTML で『#id名』の記述が必要です。 <a href “#test”>アンカーリンク</a> リンクを張るためには『a href』の記述が必要ですが、エディターから簡単に挿入できます。 リンク設置ボタン ページ内ジャンプを設定するためのリンク場所リンクしたいテキストを選択して、上記のアイコンをクリックするだけで『a herf』の記述になります。 では、実際にリンクしてみましょう。 ここをクリックする はい、飛べました!! これで、ページ内ジャンプで記事の途中に飛ぶことができます。 次にちょっとした応用テクニックで、別記事の途中にジャンプする方法を解説します。 別ページの途中にジャンプする方法基本的にはページ内ジャンプの設定と同じですが、少しだけ違いがあります。 STEP 飛ぶページのジャンプ先にidを入力する 飛びたいページのジャンプ先に、 HTML で『id=”アンカーポイント”』を記述します。 <p id=”test”>アンカーポイント<p> ここはページ内ジャンプの設定と同じですね。 STEP 別記事へジャンプためのリンクを作成する ページをまたいで別ページの途中にジャンプする場合は、以下のような HTML の記述になります。 <a href=”https://chiyo-blog.com#test”>ここをクリックする</a> 『飛びたいページのURL#id名』にすると指定したページ内へ行き、 id タグのついた位置まで一気にジャンプすることができます。 ページ内ジャンプがうまくいかない原因ページ内ジャンプがうまく飛ばない原因は、以下の3つが考えられます。 属性値が間違っている属性値は『id』や『a href』のことで、この記述に間違いがあるとうまくページ内ジャンプできません。
記述ミスがないかをしっかりと確認しましょう。 プラウザが id に非対応のまま現在ページ内ジャンプの記述は『id』ですが、以前は『name』でした。 『name』の場合の記述は以下のとおり
今はプラウザが『id』に非対応とは考えづらいですが、もしうまくいかなければ『name』を記述してみましょう。 ページ内リンクが重複しているページ内ジャンプが重複している場合には、うまくジャンプすることができません。 例えば一番注意が必要なのは、以下のような『見出しタグ』です。
見出しタグは、ほとんどの場合で目次からリンクされています。 見出しタグにページ内ジャンプしようとしても、目次からのリンクが優先されるためうまくジャンプできないことがあります。 もしも見出しタグにページ内ジャンプしたい場合は、以下のような記述にします。 見出しタグにページ内ジャンプしたい場合 見出しタグにページ内ジャンプする HTML 記述見出しタグの直上に、<p id=”アンカーポイント”></p>を設定します。 ページ内ジャンプの設定方法まとめページ内ジャンプを設定して、記事スクロールの手間を減らす方法をまとめます。 ページ内ジャンプの方法
別ページにジャンプする方法
ページ内ジャンプを設定することで UI(ユーザーインターフェイス)が良くなり、結果として SEO 評価も上がります。 かんたんな HTML ですぐに設定できるので、ぜひ活用して SEO にもユーザーにも優しいサイトを作りましょう。 UI(ユーザーインターフェイス)をさらに向上するプラグインの紹介ページ内ジャンプはもちろんのこと、ページの読み込み速度は UI(ユーザーインターフェイス)を大きく高めます。 SEO 評価にも直結するポイントなので、サイトスピードを神速にするプラグインを少し紹介します。 WP Rocket (ワードプレスロケット)WP Rocket は、 CSS や Javascript を最適化する有料プラグインです。 有料というとネックになるかもしれませんが、1サイトにつき月額換算500円程度で、アマゾンプライムと同程度。 WP Rocket を導入している僕の所有サイトの1つの Lighthouse スコアは以下のとおりです。 Core Web Vitals のスコアWP Rocket だけで上のようなスコアになっているとはいえませんが、大きく寄与していることは間違いありません。 Core Web Vitals(コアウェブバイタル)を改善することで、SEOの検索順位や CVR にも影響します。 Cloudflare と互換性があるため、併せて使用してみると効果を体感できますよ。
WP Rocket 公式 ※2022年12月1日(木)まで ※14日間100%返済保証あり >> WP Rocket の設定・使い方 コメントページ内リンクの設定方法は?1. ページ内リンクの書き方
まず「ここにジャンプしたい!」というタグにidを指定します。 次に <a href="#id名"> の形でリンクを作ります。 これだけでジャンプボタンの完成です。 リンクをクリックすれば、指定したidのタグの位置までジャンプします。
アンカーリンクの設定方法は?アンカーリンクを設置したいブロックで設定したい個所をクリックし、アンカーボタンをクリックします。 アンカーボタンをクリックすると、「アンカー(リンクの到達点)」のポップアップが表示されますので、半角英数字でアンカー名を設定してください。 「OK」をクリックすると設定位置にアンカーマークが表示されます。
サイト内リンクのアンカーは?ページ内のアンカーへリンクする
<a name="アンカー名">や<要素 id="アンカー名">でアンカー名をつけた場所にリンクします。 ファイル名#アンカー名のように指定すると、別のページのアンカー名をつけた場所にもリンクできる。
HTMLのリンクの飛ばし方は?1.文字からリンク先に飛ぶ
<A HREF="n">~</A> リンク先のページ"> テキスト</A>と書くと、リンクできます。 実際にリンクの例を表示してみましょう。 <A HREF="jump.html">ここ</a>をクリックすると、 jump.htmlに行くことが出来ます。
|