研Q6.ブログ記事に見出しをつけて読者にもクローラーにも読みやすくする。

2012年07月31日｜ブログノウハウ｜コメント(0)｜トラックバック(0)｜Edit｜

見出しの装飾も枠囲いのHTMLタグで表示しています。

photo:The Evil Daughter by malias

長めのブログ記事を書くときに、記事の中に適切な見出しをつけると、劇的に読みやすくなります。

人間にとって読みやすいばかりでなく、クローラーにとっても読みやすくする方法もあります。

　クローラーとは？グーグルなどの検索エンジンが、ウェブサイトを巡回してキーワードを拾うためのロボット（プログラム）をクローラーといいます。

人間（読者さん）に優しく

記事の中に適切な見出しをつけておくと、本文を読む前に何が書いてあるのか概要を把握することができます。

概要を把握してから本文を読むと、頭の中をそっち方向に切り替えてから読めるので、
読者さんの負担が大幅に少なくなり、理解しやすくなります。

別な言い方をすると、読者さんの頭を記事で伝えたいことに誘導することができるということです。

ブログは読者さんに伝えてナンボです。

伝わなければ書く意味がないし、伝えることができればビジネスブログでは成果につながります。

書き手にも優しく

目次をつけて記事を書く習慣をつけると、内容を整理しながら書くことができるようになります。

僕の経験では、見出しを使った書きかたをするとライティングが非常に楽になります。

自分の頭も記事の枠組みに誘導することができるということですね。

クローラーにまで優しく

クローラーはウェブサイトのHTMLタグを読んでいます。

グーグルは最近、書いてある「内容」を理解する方向で進化しつつあります。

グーグルの目的は、検索ユーザーが探しているものに最適なウェブサイトを提示することです。

書いてある内容をできるだけ正確にクローラーに伝える努力は、これからの最強のSEO対策になってきます。

そこで、見出し部分にhタグをつけると、「この部分が見出しです」とクローラーに伝えてあげることができます。

せっかく見出しを使って記事を書くのなら、見出しにhタグをつけない手はありません。

僕は見出しにhタグをつける作戦を2年近く続けています。

その成果かどうか、因果関係ははっきりしませんが、検索ではかなりの高確率で上位表示されるようになりました。

hタグとは？その使い方は？

hタグは見出しタグです。

hタグには、h1からh6までの段階があり、h1が最重要な見出しです。

h1から順に使っていく。
というのがhタグのルールです。

以前はh1タグはひとつのページにひとつだけというルールがありましたが、HTML5になってからh1タグを複数使ってもいいことになりました。

ほとんどのウェブサイトではサイトタイトル（ブログならブログタイトル）が<h1>タグになっています。

当ブログが使用しているKAETENテンプレートでは、個別記事ページのタイトルも<h1>タグになっています。

記事タイトルの部分はh2タグが使ってあります。

そこで当ブログでは、記事のサブタイトルをh3。

記事内の見出しをh4にしています。

（さらに小見出しがある場合はh5。）

hタグを使う方法は、たとえばh3タグの場合、
テキストを<h3>と</h3>で囲みます。

<h3>テキスト</h3>

ただし、テンプレートによってはh3タグやh4タグに
CSS（スタイルシート）で画像装飾がついていたり文字サイズが設定してあることがあります。

当ブログで使っているKAETENテンプレートでは、初期状態で

h3タグには↓この画像が、

h4タグには、

←この画像が設定してありました。

今は、この記事でもサブタイトルと見出しに使っている装飾を使うために、CSSを編集して画像を外して文字サイズも自分で設定してあります。

見出しの装飾のつけ方

↑この装飾は、当ブログの研Q5.に書いた枠囲いHTMLタグと同様のstyle属性で表示しています。

タグコードは、↓こうです。

<h4 style="border-left:8px solid darkorange; border-bottom:2px solid darkorange; padding:0px 0px 1px 5px;">見出しの装飾のつけ方</h4>

<h4>タグを使っていますが、<div>タグでも同じような表示ができます。

<div style="border-left:8px solid darkorange; border-bottom:2px solid darkorange; padding:0px 0px 1px 5px;font-size: 1.2em;font-weight:bold;">見出しの装飾のつけ方</div>

CSSで<h4>タグに設定してある
font-size: 1.2em;
font-weight:bold;
は、<div>タグでは、HTMLに直接設定してあります。

サブタイトルをつけている意味

この記事のサブタイトルは↓こうなっています。

見出しの装飾も枠囲いのHTMLタグで表示しています。

この方法は、元もとビジネス系のアメーバブログでよく使われている
本文にも記事タイトルを書く作戦
の応用版です。

おそらくは、パワーブロガー養成講座！

の田渕隆茂さんが考案して始められたのが広がったのだと思います。

田渕さん方式では、頭に●をつけて太字にするだけで、
記事タイトルとまったく同じことを書いています。

田渕さん方式の目的は、アメブロを携帯で見たときに記事タイトルが見にくいので、本文の最初にも記事タイトルを書く。ということです。

　アメブロを携帯で見ると記事タイトルの表示は携帯画面の１行だけで、１行に入りきれないときは文字が横に流れるマーキー表示されます。

ミナムラ方式では、
記事タイトルとちがうことを書いて、装飾と<h3>タグをつけています。

ミナムラ方式の目的は、
・記事を読む前に記事タイトルの補足を読んでもらいたい。
・重要なキーワードを強調したい
ということです。

キーワードについては、シーサーブログだとメタタグに埋め込むキーワードをユーザーが自分で記入できるのですが、アメブロやFC2ブログではそれができないようです。

ということで、記事タイトルにキーワードを入れ込むわけですが、記事タイトルだけでは埋め込むスペースが足りない。

それでサブタイトルにもhタグをつけてキーワード埋め込みスペースとして使ってしまおうという作戦です。

読者さんに読んでいただくためのサブタイトルなのですから、SEO目的の不自然なキーワード埋め込みとは判断されないのではないかと考えてのことであります。

外部リンク：
・パワーブロガー養成講座！お店ブログ集客法

当ブログの関連記事：
研Q2.KAETENテンプレートをベースにブログカスタマイズしています。
　　無料版KAETENテンプレートの入手方法をご説明します。
研Q5.文章を枠で囲む方法（style属性で色､太さ､線種など自由自在に）
　　ブログの文章の一部をいろいろな枠で囲むHTMLタグ。