見出しタグとは、＜h1＞＜h2＞〜＜h６＞まであるHTMLタグのひとつです。
HTMLタグはWEBページをつくる言語です。
数字が若いほど重要度が高く、並べ方の基本は１ページ内の上部にh1、そこからページ下部に向かって６まで順番に使っていきます。
この見出しタグにはいろいろな役目や働きがあるのですが、
「見出しタグのh1、h2の役割をそれほど考えず、ページの区切りデザインの1つとして使っている」という方も多いと思います。
ブログを書く管理画面にh1タグ、h2タグなどを挿入できるボタンがあることも多く、デザインの一部としてとらえておられる方もいらっしゃるかもしれません。
もちろん、目にわかりやすく読みやすく、記事の区切りとなって読むリズムが付けられるなどの役割もありますが、本来の役目はもう少し広いです。
見出しタグが持つ役割３つ
大きく役割を３つに絞ると以下のようになります。
①ページ内の文章を読みやすくする
②正しくページの構造をコンピュータに伝える
③SEO対策
いちばん大きい役割は、「このページの読みどころ」を読者さんに伝えることです。
このページにはこんなことが書いていると伝えるのはページタイトルですが、さらにその中に書かれていることを複数個に分けて見せて伝えるのが見出しタグの役割です。
そのほか、ページの内容・構造を検索エンジンのクローラー（ページに何が書いているか調べるシステム）に伝える役割や、SEO対策のひとつの方法として見出しタグを使うこともあります。
＜h1＞＜h2＞と簡単に書いていますが、とても幅広い意味を持っているので、今回の記事では見出しタグの役割について少し掘り下げてご紹介していきます。
１．見出しタグの使い方例
見出しタグは【＜h1＞ここに文章＜/h1＞】とタグで文章を囲むことで成立します。
タグだけでは成立せず、必ず文章とセットです。
さて、では見出しタグをどこにどう使うのが正しいのかとGoogleのブログを見てみると、h2タグを記事のタイトルから小見出しまで共通して使っていました。そして、デザインは共通していないですね。
デザインとは切り離されて使われていて、読者以外の目に見えない何か（つまりクローラー）に向かって、＜h2＞タグを使っていることがわかりますね。
また、１ページに＜h2＞はひとつといった数の決まりもなさそうです。
見出しタグの正しい使い方や役割がわかれば、このGoogleの書き方も納得できますので、ぜひ最後までこの記事を読んでいただければ幸いです。
２.見出しタグのおすすめの使い方とNG事項
GoogleのSEOスターターガイドによると、見出しタグの使い方やNG事項は以下のように書かれています。
ポイントを3つピックアップしてみると、読みやすさと構造の両輪で見出しを使うことを推奨しているのがはっきりわかります。
・わかりやすい見出しを使用して重要なトピックを示す
・ページ上のコンテンツの主要なポイントと下位のポイントは何かを検討し、それに応じてどこに見出しを使用するか決定する
・構造を示すためではなく、テキストの書式を整える目的で見出しタグを使用するのはNG
ページの文章を読んでいる方がストレス無く重要なポイントを目で追えることを目標に、うまく見出しタグを使っていきたいですね。
３.見出しタグを重要視しない場合の損失
ここまで説明してきた理由から、ある程度のまとまった文章が載るWEBページなら必ず見出しタグをつけることになりますが、
その作業を重要視せず、見出しに入れる文章を検討しなかったり、見出しを付けなかったりした場合は、損失が起こります。
●損失①ページに何が書いているか理解しづらく、訪問者さまがすぐ帰ってしまう
●損失②ページの構造が正しく成り立っていないことで検索エンジンで上位にならない
見出しタグがついて大きい文字サイズで表示されている文章がよくわからないと、その見出しだけを読んでいる訪問者さまは読む価値なし、自分には関係がなかったと判断してすぐ帰ってしまいます。それにページ内容がコンピュータに正しく伝わらないことで検索エンジンで上位に表示されないなどのデメリットも出てきます。
検索エンジン上の表示順位に見出しタグが関わるのは、検索エンジンの表示順位を決めているコンピュータは日本語を理解しているわけではないため、この＜h2＞など見出しタグを読んで、検索キーワードを紐付けて検討しているからです。
これだけの理由があるので、見出しタグを意識せずWEBサイトをつくることがどれだけ損失を引き起こすかがわかっていただけたと思います。
ではここから、見出しタグを意識したWEBページ作りのコツについて、ご紹介していきます。
４.見出しタグを決めるのは原稿の責任者+構造を正しく理解している人
見出しタグは役割が複数あるので、一人で決めていくのは難しいものです。
WEBページに掲載する原稿が仕上がってきた後に、「どこに見出しをどんな言葉で、どの番号のタグでつけるのがよいか」を複数人で考えるとよりよい効果が生まれます。
ページの原稿を書いた人がWEBページの構造について正しく理解していない場合、「見出しも考えて」とお願いしても、＜h1＞〜＜h6＞のどの数字の見出しをどの数で付けていけばいいのかわかりません。構造が正しくわかる制作側も関わって決めれば、よりよい効果が生まれます。
▲くまWEBのサイトを例に取った場合です。
【原稿を書く】
↓
【読みやすい見出しを考える】
↓
【原稿内に＜h2＞などを挿入するコーディングを行う】
↓
【表示を確認しWEBページとしての完成形へ成長させる】
簡単にまとめても、4つの手順を踏んでいます。
WEBページを訪問して読んでくださっている人たちに、「このページではここを読んでほしい「知ってほしいのはこの内容」といったページの内容を理解している人と、この順番でこのタグを使っていこうと専門的にHTMLタグや構造を知識で理解しているWEB制作者側とが相談しながら決めるのがベストです。
５.見出しタグを意識した原稿の作り方・書き方
見出しタグを意識した原稿のおすすめの作り方は、まず書きたいことを付箋などにピックアップすることです。
慣れているライターさんなら書き出さなくても頭の中でできているかもしれませんが、これから初めて見出しを意識した原稿を書くという方は、この付箋の方法を取り入れるとスムーズです。
それから原稿を書き出すと、文章がブロックに分かれているので、そのブロックの頭に自然と見出しを付けていく流れができます。
どの順番で書いていくと読みやすいか、付箋を動かして構造を決め、そのブロックごとに原稿を書きながら見出しの文章も考えます。
見出しの文章には【キーワード】を含める
＜ｈ２＞や＜h3＞で囲われた文章は、「このページの中で重要な部分」と検索エンジンが理解するので、検索キーワードを意識してつけるとより集客に役立ちます。
見出しタグを抽出して最終確認
見出しを抽出して、しっかりとキーワードが含まれているかチェックする便利なツールがあります。
https://rakko.tools/tools/3/
WEBページ内の見出しをピックアップして、一覧で見ることができるツールです。
これでキーワードの抜け漏れチェックをすると、抜けているキーワードがないかひと目でわかります。
原稿を書くライターさんや、原稿を取りまとめる方、WEBの構造化など専門知識をもった制作側とがしっかりと見出しタグについて考え、WEBページのコーディングに反映させていくことで、より集客ができて読みやすいページになります。
６.まとめ
見出しタグはデザインが重要なのではなく、文章を階層化させること、キーワードを含めてSEO対策に活かすことが大切です。
見出しタグはWEBサイトを引っ越しても使える共通のものなので、一度しっかりとタグ付けをしておけばそのページがWEB上にある間はずっと効果が生きています。
どんな見出しにするか？考えるのは労力も必要ですが、しっかり時間をかけて検討して損はありません。
また、コーディング（WEBサイト制作）のご依頼する際には、この見出しタグについてもきちんと重要性を理解して正しく活用してくれるかどうかの確認をすることも大切でしょう。正しい知識で、最大の効果を生み出していきたいですね。