記事を書くとき、見た目を見出しっぽくするだけではダメな話

ホームページにはブログや固定ページ（商品案内や会社案内などの）などの記事を書きますが、そのときに読みやすくするために「見出し」を付けると思います。
「見出し」はGoogleから検索結果をより上の方に表示してもらうための重要な部分ですので「見た目」だけではダメなのです。それについて書きます。

人間が見て見やすい見出し

たとえば商品の案内などで

八王子せんべいのご案内

八王子せんべいについて

八王子せんべいは平成○年に当社○○が販売を開始しました。○○産の米を使い、丁寧に焼き上げています。

商品のご購入

商品のご購入は以下の販売店にてお願いします。

販売店
・うさぎ支店
・カメ商店
・ペンギン百貨店1階

こういう文章があったときにWordなどで見やすくしたいと思ったら、

見出しに当たる部分の文字を大きくしたり太字にしたりして構造が分かりやすくすると思います。

ホームページでの見出しを見やすくする対象は人間とプログラム

ホームページを見るの人間だけでなく、Googleなどのプログラムもホームページを見る（？）ことになります。プログラムがホームページを見た結果としてGoogle検索でホームページが表示されるようになったり、順位が決まったりします。

人間が見るだけであれば「見出し」の付け方については「見た目」だけを考えて文字を大きくしたり、太字にしたりすればよいのですがプログラムがホームページを見るときは「見た目」ではなく、「ソース」を見ます。そのため、WordPressのエディタで文字を大きくしたり、太字にしたりしただけではプログラムはその部分を「見出し」と認識できません。

そのために使うのが　H1～H6　というタグです。WordPressのビジュアルエディタでは

見出し１～６という表現になります。

先ほどの文章をWordPressで表現してみると

こんな感じになります。タイトルが自動的にH1タグになります。

プログラムが見る「ソース」は

<h1 class="page-header_pageTitle">
八王子せんべいのご案内</h1>

    <h2>八王子せんべいについて</h2>
<p>八王子せんべいは平成○年に当社○○が販売を開始しました。○○産の米を使い、丁寧に焼き上げています。</p>
<h2>商品のご購入</h2>
<p>商品のご購入は以下の販売店にてお願いします。</p>
<h3>販売店</h3>
<p>・うさぎ支店<br />
・カメ商店<br />
・ペンギン百貨店1階</p>

このようにH1～H3で表現されているので、プログラムから見ても「見出し」という認識ができます。

エディタのテキストタブで見ると、

こんな感じで書いてあります。タイトルがH1になります。

人間の見た目は使っているテーマによってデザインは異なりますが、見出し１は一番目立つようなものになっているはずです。ということでH1～H6を使えば人間にもプログラムにも見やすい「見出し」となります。

また、見た目を変えたければ見出し部分のcssをカスタマイズすれば変えることができます。

まとめ：ホームページの見出しはタグで正しく付けるようにしましょう

ということでホームページの見出しはタグ（H1～H6）で正しく付けるようにしましょう。見た目だけの問題ではないので、デザインがよいからと言う理由で　H2の次にH3でなはくH4を使うなど、順番を飛ばしたりすることもよくないことだと言われています。正しくタグを使うとGoogleの検索結果も上に上がりやすくなりますので、注意するとよいと思います。

もっと詳しく知りたいときは、

google SEO 見出し

などのキーワードで検索すると色々情報を知ることができると思います。

見出しのデザインを変えたい、もっと詳しく教えて欲しい！というような場合はゆーそうとのIT相談などもご利用ください(^^)/

この記事のご依頼・お問い合わせの方はこちら