【もう迷わない】プログラミングスクールをポイント別に紹介

【10秒簡単】ワードプレスでページ内リンクボタンの設置方法【図解付き】

ページ内リンク

ブログにページ内リンクを作りたいなぁ…

ワードプレスでブログを作成していると、「同じ記事内の情報にすぐに飛べるようにページ内リンクを設置したい」と思いますよね

ページ内リンクがあると、ユーザーが求めている情報にすぐに飛べるのでユーザーに親切です

例えば、

  • キャンペーン情報にすぐにユーザーを誘導したい
  • 一つの記事の情報をグルグルみて欲しい

このように感じた経験があるのではないでしょうか?

なので、ワードプレスのcocoonで「ページ内リンクを作成する方法」をこっそりあなただけに教えます
※ワードプレスのcocoonのブロックであるボタンでページ内リンクを作る方法になります

  • ブログの記事にページ内リンクを設置したい
  • ブログの読者が、ページ内のある情報にすぐに飛べるようにしたい
解決

プラグインを使わずに簡単2ステップで、ページ内リンクを設置しましょう

記事の全体像
  • プラグインを使わずにページ内リンクボタンの設置方法をご紹介します
  • ページ内リンクのメリットも書いてます

それでは具体的にみていきましょう

Contents

ページ内リンクボタンとは?

ページ内リンクとは、ユーザーが記事のある情報にすぐに飛べるようにリンクを設置することです

キャンペーン情報をすぐに見たいユーザーがいたときに、すぐにページ内のキャンペーン情報に飛べるようにしているのがページ内リンクです

イメージとしては、以下です

ページ内リンクのボタン

画像の下部にある”すぐにキャンペーン情報を見る”ボタンがページ内リンクボタンになっています

これをクリックすると、

ページ内リンクのリンク先

同じ記事内にあるキャンペーン情報にページが変わることなく飛べます

ユーザーのストレスもなく、ブログを運営しているならぜひとも覚えておきたい技ですよね

それではページ内リンク(アンカー)の設置方法について具体的にみていきましょう

ワードプレスcocoonのページ内リンクボタン設置方法

ワードプレスcocoonのページ内リンク(アンカー)設置方法

いよいよページ内リンクボタンの設置方法について紹介します

やることはわずか2ステップです
※ボタンでページ内リンクを設置する方法

  • ブロック検索より、ボタンを選択
  • 出発点のURLに#AAAと書く
    ※testの記述はお好みで書いてください
  • 到達点のHTMLアンカーにAAAと書く
    ※AAAの部分は、同じ文字にしてください

たったこれだけでページ内リンクが作成できます

それでは具体的にページ内リンクを作ってみましょう

すると以下のようにボタンが作成されます

ボタンが作成されたら、このブロックをクリックし、右に現れるURLに#AAA入力

ジャンプしたい見出しをクリックすると、高度な設定のなかにHTMLアンカーとあるので、ここにAAAと入力

これでさっきのボタンをクリックすると、ページ内リンクボタンの完成です

ボタン以外ではどうやってページ内リンクボタンを設置するの?

ボタンでページ内リンクの設置方法を説明しましたが、ボタン以外ではどのように設置するのでしょうか?

結論として、考え方は基本的に同じです

以下の外部記事が参考になるのでリンクを貼っておきますね

ページ内リンクのメリット

ページ内リンクのメリット

ページ内リンクのメリットは以下の2つです

  • ユーザーがすぐに情報をチェックできる
  • ブログの滞在時間が高まる

ユーザーがすぐに情報をチェックできる

ページ内リンクがあると、ユーザーにとって親切です

なぜなら、記事内の情報にすぐに飛べるからです

ブログを見ているユーザーは、早く情報を求めています
せっかく読んだ記事に欲しい情報がなければ時間の無駄に感じますよね

つまり、ユーザーにとってページ内リンクがあることは、早く情報にたどり着けるメリットがあります

ブログの滞在時間が高まる

ブログを見るユーザーが「この記事には欲しい情報なさそうだな」と少しでも感じれば、記事は読まれなくなります

逆に、欲しい情報がありそうなら、ユーザーは情報を求めて記事を読んでくれます

つまり、「欲しい情報はここにありますよ」と明示する必要があります

ページ内リンクは”欲しい情報”を表すメリットもあるので、結果的に記事の離脱も減り、ブログの滞在時間が伸びるってわけですね

まとめ
  • ボタンブロックのURLには#〇〇、飛ばしたい見出しのHTMLアンカーに〇〇とする
  • ページ内リンク(アンカー)があると、ユーザーにとって親切
  • ブログの滞在時間も増える

この記事を書いた人

コメント

コメントする

CAPTCHA


Contents
閉じる