読者です 読者をやめる 読者になる 読者になる

SEOカフェ

〜 SEOで悩んだらコーヒーブレイクしたら良いと思うんだ〜

【5分で完了】はてなブログで記事上に関連記事を入れるソースコード

【5分で完了】はてなブログで記事上に関連記事を入れるソースコード

記事上に関連記事とかおすすめ記事を追加したいな〜

シンプルなやつが良いな〜

そして導入が簡単な関連記事が良いな〜

・・・パクリました!笑

関連記事を入れるとかなり見やすい!

超シンプル!!

設置は5〜10分くらいで終わります。

※設置したい記事が決まっていて慣れている人なら5分もかかりません。

確認しながら〜とかだと時間かかっちゃうかも。

関連記事を導入する方法

基本的には、管理画面の「デザイン」→「カスタマイズ」→「記事」→「記事上」や「記事下」にソースコードを入れれば完了しちゃいます!

最もシンプルなタイプ(梅)

この形は多くの場所で見受けられますね! 

ソースコードです↓

<p>👍人気記事セレクション</p>
<ul>
<li><span style="color: #000"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #055db5;" href="記事のURL">●●記事タイトル●●</a></span></li>
</ul>

こんな感じですね〜♪

ちょっとオシャレにしたい(竹)

文言テキストにアンダーラインと枠線の角をちょっとだけ丸くしたバージョン、さらに・ではなく数字にしているところも良いですね!

ソースコードです↓

<div style="border:1px solid #000; border-radius: 7px; padding: 1px;”>
<p><span class="fontb" style="font-size: 120%; background: -webkit-linear-gradient(transparent 70%, #FF847C 100%); margin-left: 8px;"> 👍●●好きな文言テキスト●●</span></p>
  <ol>
  <li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
 </ol>
</div>

 

この関連記事のフォーマット?を参考にしようと思ったのは、50キロのダイエットに成功し健康的な食事をモーレツにアップしまくっている田中さんのブログの影響が大きいです。

f:id:kiyopiko-business:20170227232742p:plain

めっちゃ良い!!

f:id:kiyopiko-business:20161121003147j:plain

素直にそう思いました。

私の場合は記事下ではなく記事上ですけど・・・パクってみました(笑) 

もうちょっとSEO寄りにする(松)

一つ上の「2. ちょっとだけオシャレにしたい」と見た目は変わりませんが、Googleからは好まれている記述がこちらです。

<div class="pr">
 <p><span class="fontb catch"> 👍●●好きな文言テキスト●●</span></p>
 <ol>
  <li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
  </ol>
</div>

「記事上」の欄に上記ソースコードを入れるだけではなく、もう一手間かかります。

それは「style.css」に記述を行うことです!

/* 記事上に関連記事やPR記事を入れる */

.pr {
 border:1px solid #000;
 border-radius: 7px;
 padding: 1px;
}

.catch {
 font-size: 120%;
 margin-left: 8px;
 background: -webkit-linear-gradient(transparent 70%, #FF847C 100%);
}

.prcolor {
 color: #055db5;
}

.fontb {
 font-weight: bold;
}

style.cssに一手間加えるのが手間ではないという人はこちらを設定したほうが良いとされています。

竹と松の違いは装飾となるcssをHTML上に直書きしているかどうかです。

人間の目には同じであってもGoogleはソースコードを解釈します。

比較してもらうと分かると思うのですが、

<div style="border:1px solid #000; border-radius: 7px; padding: 1px;”>
<p><span class="fontb" style="font-size: 120%; background: -webkit-linear-gradient(transparent 70%, #FF847C 100%); margin-left: 8px;"> 👍●●好きな文言テキスト●●</span></p>
  <ol>
  <li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span style="color: #1464b3;"><a style="color: #1464b3;" href="記事のURL">●●記事タイトル●●</a></span></li>
 </ol>
</div>

<div class="pr">
 <p><span class="fontb catch"> 👍●●好きな文言テキスト●●</span></p>
 <ol>
  <li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
  <li><span class="prcolor"><a href="記事のURL">●●記事タイトル●●</a></span></li>
  </ol>
</div>

では、スッキリさが違いますね。

f:id:kiyopiko-business:20170110152404j:plain

Googleは基本的にシンプルなソースコードを好みます!

マンガ風なタッチでわかりやすく説明しているの記事もあるので???な人は見てみましょう!


関連記事を設けるメリット

目立つ場所(記事直前や直後)に設置しておくと「あ、こっちも気になる」とユーザーを誘導しやすくなります。

関連記事ではなくてもオススメ記事でも良いし、ランキング記事としても良いですね!

ただ注意点としては、アフィリエイトブログやサイトを運営していて無理やり関係ないページへ誘導しようとするのはNGです。

リンクはあくまで「関連性のあるもの」が原則ですし、「やらせ」のような構成になっているとGoogleからの評価を損なう恐れもあります。

注意してね

ページやサイトの中で関連性のある「本当に伝えたい内容」であれば問題ないと思います。

まとめ

簡単にまとめるよ!

・記事上に関連記事やオススメ記事を導入するのは良い!
・導入には5分くらい
・金(アフィリエイト)目的の誘導は控える

サイトを通じて見てもらいたいページをユーザーにとってメリットがある内容を関連記事に持って来る方がよいですね!!

スポンサーリンク