Bloggerに関連記事を表示 LinkWithinの導入と効果

自動で関連記事を表示してくれるLinkWithinの使い方です。
Bloggerに導入するときに、エラーが出たときの対処法や、個別記事だけに表示する方法、タイトルの変更方法も記録しています。

また、LinkWithin導入前と後のPV数の変化を比較しました。

LinkWithinを使用するとこのような表示になります。



関連記事のタイトルと画像が一緒に表示されるため、文字だけのときより目を引くつくりになっています。

設定方法

ページ右にある入力欄にメールアドレスやブログURLなどを入力していきます。
Email:メールアドレス
Blog Link:ブログURL
Platform:Bloggerを選択する
Width:関連記事の表示数
My blog has light text on a dark background:ブログの背景が暗くテキストが明るい場合はチェックを入れる

入力ができたら「Get Widget!」をクリックします。

ウィジェットのインストール説明ページに移動します。「Install Widget」をクリックします。

ページ要素を追加画面が開きます。
説明を読んで納得できたら、タイトルを入力して「ウィジェットを追加」ボタンをクリックします。

通常は、これでレイアウト画面にLinkWithinのウィジェットが追加されて完了です。

エラーで追加できない場合の対処法

次のエラーが見つかりました。
widget.content: 必須項目が未入力です
引き続き問題が発生する場合:

ブラウザのキャッシュと Cookie をクリアして、もう一度お試しください。
と書かれています。この通りにしてもエラーが出る場合の対処法です。

最初に「Blogger」を選択したところで、「Other」を選択し「Get Widget!」をクリックします。

スクリプトコードが表示されるので、コードをコピーします。

次に、Bloggerのレイアウトで「HTML/JavaScript」ガジェットを追加をします。
ここにコピーしたコードを貼り付けます。
保存を押したら表示されます。

個別ページでは特に問題ありませんが、このままだとトップページのレイアウトが崩れてしまいます。

個別記事にだけ表示

テンプレートからHTMLの編集を行います。編集前に必ずバックアップを取っておいてください。
参考:テンプレートをバックアップする方法

HTMLの編集で、「HTML/JavaScript」ガジェットを追加したときのタイトルを検索します。

今回は、上の画像のようにタイトルに「linkwithin」と入力したので、HTMLの編集で「linkwithin」を検索します。
<b:widget id='HTML5' locked='false' title='linkwithin' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
上のコードの
<data:content/>
部分を下記のコードで挟みます。
<b:if cond='data:blog.pageType == "item"'>
上のコード
</b:if>
これでトップページの表示が消えてレイアウトが崩れることはありません。

タイトルの変更

設置しただけの状態だと、タイトルが「You might also like」となります。
これを、「関連記事」など任意の文字に変える方法です。

スクリプトコードを貼り付けた後、下記のコード
var linkwithin_text = "関連記事";

<script>
var linkwithin_site_id = ********;
var linkwithin_text = "関連記事";
</script>
のように追加します。

この場合、タイトルが「関連記事」になります。

参考サイト:LinkWithinがトップページにも表示されてしまう時のBlogger対処方法

LinkWithin導入前と後のPV数の変化

サイト内回遊率を上げて、PV数を伸ばすために、記事の下にタイトルだけを表示する関連記事を設置していました。 しかし、思うようにPV数が伸びなかったため、Linkwithinで画像も一緒に表示するように変更しました。

変更前

下の画像が変更前の表示です。タイトル(あわせて読みたい)は別として、Bloggerを使っている方の一般的な関連記事の表示になっていると思います。
禁煙に関する記事の関連記事です。

この表示方法のときの「訪問別ページビュー」「訪問時の平均滞在時間」「直帰率」はこのようになります。
変更直前約2週間(2014年3月27日から2014年4月10日まで)のデータです。
訪問別ページビューが1.39
訪問時の平均滞在時間が1:16
直帰率が81.30%

変更後

下の画像が変更後の表示です。記事タイトルと共に画像を表示するようしました。
変更前と同じ禁煙に関する記事の関連記事です。

この表示方法のときの「訪問別ページビュー」「訪問時の平均滞在時間」「直帰率」はこのようになります。
変更後約2週間(2014年4月11日から2014年4月25日まで)のデータです。
ページ/セッションが1.48
平均セッション時間が1:16
直帰率が80.82%

※アナリティクスの仕様変更により、訪問別ページビューがページ/セッションに、訪問時の平均滞在時間が平均セッション時間に変わりました。

比較結果

グラフの青が変更前で、オレンジが変更後です。これはユーザーサマリーでの比較です。

画像の通り、比較対照にしたそれぞれの数値がわずかながら改善されました。

ページ/セッションが1.39→1.48
平均セッション時間が1:16→1:16
直帰率が81.30→80.82

この結果により離脱率も減少しました。
離脱率が71.87%→67.55%になり、6.39%も減少しました。これは行動サマリーの数値です。

比較期間が約2週間と短いため、今回はたまたま改善した可能性もあります。

変更後1ヶ月の比較結果

せっかくなので、1ヶ月でどれくらい改善されたのか比較してみます。
ページ/セッション(訪問別ページビュー)が1.42から1.50に上昇
平均セッション時間(訪問時の平均滞在時間)が1:19から1:26に上昇
直帰率が80.72%から80.46%に減少

前回の比較結果より更に改善されています。画像つきの関連記事表示はPV数アップに効果があると言えそうです。

追記

この投稿から1年が経ちました。テンプレートも変更し、記事数も増えた現在のページ/セッションや滞在時間と比較します。

2014年4月11日から2014年4月25日までと、2015年4月11日から2015年4月25日までの比較です。(追記ここまで)

関連記事をクリックするたびにリダイレクトされる?

Bloggerの統計でトラフィックを確認すると、
widget3.linkwithin.com
widget5.linkwithin.com
widget6.linkwithin.com
からアクセスがありました。

下の画像はあるときのトラフィックを表示したものです。
これは関連記事がクリックされるたびにリダイレクトされているようです。

上記URLにアクセスすると「404 Not Found」と表示されます。

サイト内リンクに見える

関連記事にマウスを乗せると、一見サイト内にリンクしているように見えます。

が、関連記事の上で右クリックして、リンクのURLをコピーて貼り付けると、URL内に「redirect」が含まれています。

リダイレクトの影響

一説によると、リダイレクトすることで、SEOにも効果があるとか。真偽のほどはわかりません。

まだ導入して1ヶ月ほどですが、このブログでは今のところマイナスの影響はありません。

使えなくなる?

Linkwithinは、たま~に使えなくなるときがあります。

いつ表示されなくなるのかはわかりませんが、グーグルアナリティクスのオーガニック検索を見てみると、2014年6月4日に「linkwithin 無くなった」のキーワードからアクセスがあり気付きました。

ブログを開いてみると、今まで関連記事があった場所は何も表示されていません。

エラー

Linkwithinのサイトにアクセスしてみると、エラーで「このウェブページにアクセスできません」となります。
このときは一時的なもので、数日後に何事もなく復活していました。

停止中は、Linkwithinをガジェットで追加していた部分が下の画像のように表示されて、見栄えも良くないのでひとまず削除することにしました。
このように、画像のリンク切れのようになっていました。削除する前に、コードをメモ帳などに保存しておくと、復活したときすぐに設置でき便利です。

再設置

停止中にガジェットを削除すると、テンプレートが上書きされ表示がおかしくなることがあります。そんなときは、上の設定方法から設置しなおすと問題なく表示されます。
スポンサーリンク
関連記事
スポンサーリンク