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

SEOカフェ | アクセスと売上UPを目指して

〜 SEOにお悩みの方は是非コーヒーブレイクしてみてください 〜

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

カスマイズ関連

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

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

 

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

 

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

 

・・・パクリました!笑

 

 

 

 

超シンプル!!

 

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

 

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

 

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

 

 

 

シンプルな関連記事やPR記事を入れてみる

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

 

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

 

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

 

ソースコードです↓

<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>

 

応用性のある形ですのでどんな形にも変えられます!

 

赤色が良ければ、「<a style="color: #e53d27;"〜」の「color: ここを変える」と変更できますのでお好みですね。

<li><span style="color: #000"><a style="color: #e53d27;" href="記事のURL">●●記事タイトル●●</a></span></li>

 

こんな感じですね〜♪

  

2. ちょっとだけオシャレにしたい(竹) 

 

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

 

ソースコードです↓

<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

 

素直にそう思いました。

 

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

 

3. もうちょっと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に一手間加えるのが手間ではないという人はこちらを設定したほうが良いとされています。

 

2と3の違いは装飾となる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からの評価を損なう恐れもあります。

 

 

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

 

オススメ商品〜とかPRしてます〜も嘘くさいと逃げちゃいます。まぁこれは押し売りするしつこい営業マンでもそうですね(笑)

 

っていうか、はてなブログってどうしてもcss直書きになっちゃうのは記法を変えないとダメなんだろうか・・・。

 

振り返ると直書きばっかりになっているので修正したいけど、今更全記事変えるのはな〜骨が折れるな〜(笑)