実際に効果があったWordPressで直帰率・回遊率を改善させた施策を解説します

こんにちわ

スイです。

 

ブログ運営をしている方で直帰率を気にしている方は多いと思います。

王道の改善方法はコンテンツの見直し、記事タイトルと内容が一致しているか?などを見直すことですよね。

 

これに関しては他サイトさんが解説してくれてますので、ここではわたしのやり方をご紹介しようかと思います。

 

これから解説する私の考え方、実際にやる施策では概ね6%~10%ほど改善することが期待できます。

直帰率が90%を超えている場合などは、かなりの確率で改善できると思いますよ。

 

ぜひ試してみて頂ければと思います!

では、早速解説していきますね。

回遊させたい記事同士でグルーピングする

直帰率を確認するときは、サイト全体の直帰率は一旦おいておきグループ単位で見ています。

カテゴリーと言い換えてもいいです。

 

グルーピングする理由は、記事によっては回遊率がどうしても悪い記事が出てくるからです。

1記事で完結する記事などは特にそうですね。

 

1話完結型のドラマより、3話完結の方が長く見てくれる。

みたいなイメージです。厳密はちょっと違いますが、あくまでイメージです。

 

だからといって1話完結の方が質が低い、というわけではありませんよね。

ある記事が直帰率90%以上を超えていても、記事の質が高く読者さんが満足して帰っていく。

という可能性もあるからです。

 

ですので私の場合、まず3~5話完結型の記事を想定し(回遊してほしい記事)を先に決めておきます。

多いときは10記事ほど、少なくても3~5記事くらいを1つのグループとしてますね。

 

このときグループ内容は関連性が強い記事、回遊させたい記事同士でグルーピングしましょう。

 

グルーピングした記事同士の直帰率を基準にする

例えばWordPressの設置方法。というグループを想定して回遊させたいとします。

記事A:サーバ、ドメインの取得方法

記事B:テンプレートの選び方とおすすめのテンプレート

記事C:有料テーマと無料テーマどちらがいいのか?

記事D:親テンプレートの設置方法と子テーマの適用方法

やや適当ですがこのような記事があった場合、この4記事でグルーピングするとしましょう。

その後この4記事だけをアナリティクスでセグメントし直帰率を確認し、その直帰率を基準にします。

記事の最初と最後に関連記事を出す

このグルーピングした記事同士を、記事の一番最初と一番最後にテキストリンクでまとめてしまいましょう。

 

こんな感じに

実際に使用している記事はこちら

記事の最初と最後に設置してあるのを確認してみてください。

 

あとすいません、私ブロガーデビューしたてなので記事数が少ないです。

なので今回は適当にグルーピングしちゃいました。ごめんなさい😅

 

これのポイントは、まずグルーピングした記事全体の流れを見てもらい、

「現在見ている記事はこれだよ!まだ続きもあるよ!」

と、読者さんにアピールすることです。

 

学習コンテンツならステップ系にすると特に効果が高かったです。

【WordPressの設置方法】

ステップ1:サーバ、ドメインの取得方法 ←今ココ

ステップ2:テンプレートの選び方とおすすめのテンプレート

ステップ3:有料テーマと無料テーマどちらがいいのか?

ステップ4:親テンプレートの設置方法と子テーマの適用方法

これを記事の最初と記事の最後の2箇所に設置することで回遊率が高まり、直帰率が下がりました。

ステップ1の記事からステップ4の記事まで同じものを入れて、リンクでつなぎましょう!

 

場合により切りですが、記事内にヘタに内部リンクを入れるより効果が高いです。

 

またサイドバーなどでも同じことが出来ますが、現在はスマホが主流ためサイドバーなかったり、一番下にサイドバー部分が表示されたりしますよね。

なので記事内で目立たせた方が回遊してくれます。

記事コンテンツの修正は後回しでOK

他サイトさんでは、記事のタイトルの見直しや記事コンテンツの質を上げるとあります。

確かにかなり重要で絶対必須ですが、私の場合は後回しにします。

 

まずはグルーピングした記事から先にドンドン設置して行き、それが終わったら記事コンテンツの修正に入ります。

経験上、これを設置しただけでも直帰率、回遊率は結構改善しますからね。

 

細かくグルーピングして、グループごとに直帰率を下げることで全体の直帰率を下げる。

これが私のやり方です。

ただ適当にグルーピングしちゃ駄目ですよ。戦略的にユーザーを誘導しましょう!

テキストリンクの設置は編集しやすいようにしておく

テキストリンクはあとで変更することになったとき、全ての記事を変更しなければなりません。

これが面倒なので、編集しやすいようにしておくと便利です。

 

単純な施策なので、WordPressのテンプレによっては簡単に導入できたりやり方は色々ありますので、お好きなようにやって頂いて問題ありません!

 

ですが次では私のやり方をご紹介しますね。

少しソースコードをいじるので面倒ですけど、最初にやっておけば後は楽です。

この手のプラグインあればいいのにな。

グループリンクを設置する方法

単純なHTMLとCSSが分かる方はカンタンだと思いますが、さっぱりの方は少し難易度が高くなるかも。

ですが、ならべく簡単にできるように解説してみます!

 

ちなみに私のやり方は結構ゴリ押しで強引なやり方です。

詳しい方は色々いいたいことがあると思いますが、気にしないでもらえると助かりますヾ(。>﹏<。)ノ゙✧*。

もっとスマートなやり方があったら教えて欲しいです。

 

ともかくさっそく解説に入ります。

プラグインのShortcoderを導入しよう

まずはWordPressのダッシュボードから、プラグイン→新規追加を選びます。

検索窓にShortcoderと入れましょう。

インストールしたら有効化します。

有効化したら一旦おいて置きます。

 

グルーピングしたい記事を選びパスとタイトルを控える

私が今使っているのは、先程ご紹介した3記事です。

これですね。

 

この記事タイトルとURLをメモっておきましょう。

この時、相対パス(URLのお尻の部分)を控えます。

 

URLには絶対パスと相対パスの2種類があるんですね。

 

例:「どんな教材を選べばいいの?」記事の絶対パスはこうなります。

URL
https://piano-flavor.com/study/

これは絶対パスと言われるURLです。

そして相対パスとは、/study/の部分を指します。

 

URL
https://piano-flavor.com/category/piano/

この場合は/category/piano/が相対パスになります。

 

URL
https://piano-flavor.com/category/piano/hoge/

この場合は/category/piano/hoge/が相対パスになります。

 

先程の画像の3記事分の相対パスはこれです。

/study/

/hanon/

/finger/

となります。

 

コードを生成

これをメモったらこちらに行きましょう。

下記のように入力してコードを生成します。

 

コードが出力されます。↓

とりあえず10記事まで生成出来るようになっています。

今回は3つなので、いらない部分を選択して↓

削除!

最終的なソースコードはこれです。

HTML
<div id="artcre_group">
<p class="artcre-title">【初心者向けコンテンツ】</p>
<ul class="group_list_arcre">
 	<li><i class="far fa-hand-point-right"><span class="imako0"><a href="/study/"> どんな教材を選べばいいの?</a></span></i></li>
 	<li><i class="far fa-hand-point-right"><span class="imako1"><a href="/hanon/"> ハノンのメリット</a></span></i></li>
 	<li><i class="far fa-hand-point-right"><span class="imako2"><a href="/finger/"> 姿勢と指使い</a></span></i></li>
</ul>
</div>

コードをShortcoderにコードを登録する

先程インストールしたプラグイン、Shortcoderを使います。

有効後にはダッシュボードの左側にあるメニュー欄の設定→Shortcoderというのが追加されているはずです。

それをクリック!↓

 

遷移後は一番上の方にある「+ Create a new shortcode」をクリック↓

 

「Code editor」を選択↓

先程生成したコードをペーストします。

 

名前をつけて保存しましょう。↓

一旦これでOKです。

CSSを貼り付ける

今後の作業はできるだけ子テーマを使用して作成しましょう!

子テーマについて、テンプレートがsangoの方はこちらを参照

そうでない方はこちらがいいかと思います。

 

では、ダッシュボードから外観→テーマ編集→スタイルシートを選びましょう。

スタイルシート内に以下のコードを貼り付けます。

CSS
/* 今ココCSS */
#artcre_group {
 padding: 20px!important;
}
#artcre_group {
 padding: 0.5em 1em;
 margin: 2em 0;
 border: double 5px #364e96;
}
.artcre-title {
 text-align: center;
 font-size: 20px;
 font-weight: bold;
 color: #364e96;
 padding: 0.5em 0;
 border-top: solid 2px #364e96;
 border-bottom: solid 2px #364e96;
}
ul.group_list_arcre {
 border: none;
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: 16px;
}
@media screen and ( max-width:767px ){
ul.group_list_arcre {
  border: none;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
 }
}
.basic_group {
 font-size: 16px!important;
 padding-bottom: 5px!important;
}
.group_list_arcre li a {
 line-height: 1.7em!important;
 color: #0000EE!important;
}
.group_list_arcre li a:hover {
 color: red!important;
}
#imako {
 color: red;
 font-weight: bold;
 display: none;
}
p.artcre-title {
 padding: 10px 0;
 margin: 0px 0 20px 0;
}

single.phpにjavaScriptを入れる

同様にsingle.phpを展開します。

single.php内の1番下か、<?php get_footer(); ?>の上あたりに以下のコードを貼り付けます。

javaScript
<script>
//URLのパスを取得
var articreUrl = location.pathname ;
//artcre_groupを取得し、
var koko = document.getElementById('artcre_group');
//li要素を取得
var koko2 = koko.getElementsByTagName('li');
//空の配列を用意
var kaiyuuarray = [];
//hrefの値を配列に入れる
for ( var g = 0; g < koko2.length; g++ ) {
 kaiyuuarray[g] =  koko2[g].getElementsByTagName('a')[0].getAttribute('href');
 }
for ( var i = 0; i < kaiyuuarray.length; i++ ) {
 //URLと配列の文言を照合
 if( kaiyuuarray[i] === articreUrl ) {
 //monにタイトルを代入
 var mon = koko2[i].textContent + " ←今ココ";
 //クラス名をimako_Class_Nameに代入
 var imako_Class_Name = "imako" + [i];
 //特定のspanタグをendに代入
 var end = document.getElementsByClassName(imako_Class_Name);
 //文言の書き出し
  for ( var s = 0; s < end.length ; s++ ) {
   end[s].textContent = mon ;
   end[s].style.color = 'red';
   end[s].style.fontWeight = 'bold';
  }
 }
}
</script>

Font Awesomeを導入する

Font Awesomeを導入するとこのようなアイコンが使えるようになります。

かわいいアイコンなども無料で使えるので、ぜひとも導入しましょう。

[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒テーマヘッダー[header.php]

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
こちらのコードをheader.phpの<head>~</head> の間に入れます。

これだけで使えるようになっちゃいます。

▼詳しくはこちらを参照

参考 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おうサルワカ

 

グルーピングした記事にタグを貼り付ける

作成したショートコードを貼り付けたい記事に行きます。

そうするとこんなものが追加されているはずです。

これをクリックした後、こんな画面が出てくるので、

これで好きな場所にコードを追加できます。

 

ショートコードをグルーピングした全ての記事の一番最初と一番最後に入れ込めば完了です!

アクセスしたらこんな感じのが出てくるはず↓

全ての記事に入れれば互いにリンクされ、今どの記事なのか?他にどんな記事があるのか?が一目瞭然になります!

編集したい場合は「Shortcoder」に行き、作成したグループを編集すればOKです。

 

ショートコードで貼り付けてあるので、Shortcoderを編集するだけで全ての記事編集内容が適用されます。

 

またCSSとjavaScriptは一度設定すればもういじる必要はなく、HTMLコードだけ生成してグループを量産すればOKです。

おわりに

これは私のやり方ですが、他のやり方はいくらでもあると思います。

大事なのは

記事同士をグルーピングして、グループの直帰率を基準とする。
細かくグルーピングして、全体の直帰率を下げる。
グルーピングした関連記事は記事の最初と最後に持ってくる。

要するにこれだけです。

色々と応用できると思いますので、ぜひ色々やってみてもらえればと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)