ブログ

ブログの回遊率と成約率が簡単に上がる2つの小ネタ【知らなきゃ損】

今回はちょっとした一手間で、ブログの回遊率やアフィリエイトの成約率が上がるかもしれない小ネタをご紹介します。

今回紹介する小ネタは

  • リンクを別タブで表示する
  • ページ内リンクの作り方

です。

 

ちなみにそれぞれ、

  • リンクを別タブで表示する=回遊率アップ
  • ページ内リンク=成約率アップ

につながります。

オレンチ
オレンチ

やり方はとっても簡単なので、ぜひ覚えていってね!

なんで「リンクを別タブで表示する」と回遊率が上がるの?

なぜリンクを別タブで表示すると、回遊率がアップするのでしょうか。

ちなみにリンクには

  • あなたのブログの別の記事に飛ぶ内部リンク
  • あなたのブログ以外のサイトに飛ぶ外部リンク

があります。

 

記事の種類にもよりますが、主に自分のブログ以外のサイトへ飛ばす外部リンクは別タブで表示するようにしましょう。

なぜなら外部リンクで別サイトに飛ばされたユーザーは、あなたのブログに戻ってくる可能性は低いです。

これってすごく勿体無いですよね。

外部リンクを別タブで開くように設定すれば、あなたの記事はブラウザに残るので、そこからまたブログを見てもらえる可能性が高くなるんです。

もっと言うと、外部リンクで紹介したいようなサイトは、wikiや郵便番号の検索サイトのような、あなたの記事の内容を捕捉するようなサイトですよね。

別タブで開くことで、ユーザーは交互にサイトを閲覧することができるので、ただリンクを貼るよりも快適に記事を読み進めることができます。

少しでも記事に訪れてくれたユーザーを快適に過ごせるような環境作りに努めましょう。

リンクを別タブで表示する手順

やり方はとっても簡単!

ここからは実際に画像を使って解説していきます。

ワードプレスのバージョンによってエディターのUIが異なるので、今回はクラシックエディーターと新しいエディターの両方で解説します。

クラシックエディターの場合

まずは外部リンクを作成し、鉛筆アイコンをクリックしてください。

するとリンクの編集ダイアログが出るので、歯車のアイコンをクリックしてください。

詳細設定ダイアログが出るので、「リンクを新しいタブで開く」にチェックを入れ、「更新ボタン」をクリックしてください。

  1. 「リンクを新しいタブで開く」にチェックを入れる
  2. 更新をクリック

 

これで完了です。

普通のリンクと見た目は何も変わりませんが、「プレビュー」をクリックしてリンクをクリックしてみてください。

新しいエディターの場合

新しいエディターの場合はもっと簡単です。

まずは外部リンクを作成したら「新しいタブで開く」をクリックしてください。

  1. 「新しいタブで開く」をクリック

 

これで完了です。

普通のリンクと見た目は何も変わりませんが、「プレビュー」をクリックしてリンクをクリックしてみてください。

なんで「ページ内リンク」を作ると成約率が上がるの?

続いてページ内リンクの作り方について解説します。

ちなみにページ内リンクとは、

リンクをクリックしたら記事内の見出しや、画像などを画面の一番上に移動するリンクのことです。

主にランキング記事などで利用すると、成約率アップにつながります。

ランキングを見るときユーザーは、1位〜3位もしくは3位〜1位といった具合に順番に見比べていきます。

迷っているものは、何度も吟味したくなるのが人間です。

そこで見比べをしやすいように、「ランキングトップへ」というボタンを作ってあげましょう。

「ランキングトップへ」ボタンを作ることで、ユーザーはよりシームレスにランキングを比較することができます。

ユーザーの離脱を抑え、うまくいけば成約率アップにもつながってくるはずです。

容量は記事の冒頭に入れる「目次」と同じです。

「目次」を一から作るのはそれなりに大変ですが、ボタン一つなら一瞬です。

では実際に画像を使って解説していきます。

先ほどと同様にクラシックエディターと新しいエディターに分けて解説するので、ご安心ください。

クラシックエディターの場合

では実際のやり方を解説していきます。

画像でも、見出しでも、ただの段落、なんでもOKです。

オレンチ
オレンチ

今回は見出しを例にして解説します。

画像の通りに移動先の見出しとリンクを作ってください。

  1. 移動先の見出しを作る
  2. リンク用の文字を書き、全て選択状態にする
  3. リンクアイコンをクリックする

 

するとリンクになった文字に「URLをペーストまたは入力して検索」という入力欄が出るので、「#1」と入力して「完了アイコン」をクリックしてください。

 

次にテキストモードにして、移動先にIDを付与します。

見出し2の場合、<h2></h2>というタグに文字が囲われています。

頭の<h2>を<h2 id=”1″>と書き換えてください。

<h2>ここを画面の一番上にする</h2>

<h2 id=”1″>ここを画面の一番上にする</h2>

となります。

これでページ内リンクが完成です。

 

もっと詳しい説明は「新しいエディターの場合」を解説した後に、詳しく説明します。

すぐに解説を見たい人はコチラをクリックしてください。

新しいエディターの場合

新しいエディターでも基本的にやることは同じです。

画像でも、見出しでも、ただの段落、なんでもOK。

オレンチ
オレンチ

新しいエディターも見出しを例にして解説します。

画像の通りに移動先の見出しとリンクを作ってください。

  1. 移動先の見出しを作る
  2. リンク用の段落を作る
  3. リンクアイコンをクリックする

 

するとリンクになった文字に「検索またはURLを入力」という入力欄が出るので、「#1」と入力して「完了アイコン」をクリックしてください。

 

続いて画像の通り、コードエディターを開き、移動先にIDを付与します。

  • 設定アイコンをクリック
  • エディター欄のコードエディターをクリック
  • 見出し2の場合、<h2></h2>というタグに移動先の文字が囲われているので、
  • 頭の<h2>を<h2 id=”1″>と書き換える

<h2>ここを画面の一番上にする</h2>

<h2 id=”1″>ここを画面の一番上にする</h2>

となります。

これでページ内リンクが完成です。

もうちょっと詳しく説明します

画像の通りにやれば、ページ内リンクはできますが、仕組みを少しだけ理解しておくと応用が利くのでもう少しだけ説明します。

ブログの記事は全てタグと呼ばれる<></>の記号で囲われています。

先の<>を開始タグ、後ろの</>を閉じタグなんて呼びます。

見出しなら「hタグ」

  • <h1>見出し1</h1>、<h2>見出し2</h2>、<h3>見出し3</h3>

段落なら「pタグ」

  • <p>段落</p>

リンクなら「aタグ」

  • <a href=”リンク先URL”>外部リンク</a>

画像なら「imgタグ」

  • <img src=”” />

こんな感じです。

オレンチ
オレンチ

画像の場合、挟む文字がないので閉じタグは必要ありません。

これらのタグにはたくさんのオプションをつけることができるのです。

例えば、

リンク用のaタグのリンク先URLを指定できる「href」や、imgタグの画像を指定する「src」などがオプションです。

ちなみにこれらのオプションは正式には属性といい、好きなだけ設定することが可能です。

 

ページ内リンクは全てのタグに設定できる「id」というオプションを利用しています。

要するに移動先をaタグがわかるように目印をつけてあげてるんです。

つけた目印に飛ぶには、aタグの「herf」属性に「#+ID名」を指定すればOKです。

なので、id=”1″じゃなくても、自分がわかりやすいものならなんでもOKです。

ただし以下のことに注意してください。

  1. 日本語(全角)は使えない
  2. 同じ記事内に同じid名は1つだけ

同じ記事内に複数ページ内リンクを作りたい場合はそれぞれ別のid名にしてください。

いかがでしょうか。

よくわからない人は上記の注意点だけしっかり気をつけてくださいね!

まとめ

以上でブログの回遊率と成約率が上がるかもしれない小ネタは終了です。

何よりも上記のような一手間を加えることで、記事に訪れてくれた人がより快適に求めていた答えにたどり着くことができます。

何よりもユーザーファースト。

自分のブログを読んでくれている人が快適に過ごせるように記事を作りましょう!

ここまで読んでいただきありがとうございました!

それでは〜!