ヨス(@yossense)です。今回はHTMLを勉強していると必ず突き当たる「<h1>タグ」とか「<h2>タグ」とも呼ばれる「見出し」について紹介します。「見出し」って何?さて、ブログやWEBサイトの中で使われる「見出し」という言葉は、何を指すのでしょうか?口で言うよりも見たほうが早いと思うので、下記画像を見てください。簡単にいうと、上の画像のオレンジの帯部分のように、文章中の重要なキーワード(要約した短いキャッチフレーズ)を文章の前に目立つように配置している部分です。これを「見出し」と言います。あ、ちなみに上の画像で「見出し2(h2タグ)」と書いてあるのは気にしないでください。あとで説明しますので!ヨスオレンジなのはこのブログ上だけです。デザインはCSSで自由に変更できますよー。見出しの重要性では、なぜブログ記事の中に「見出し」を入れる必要があるのでしょうか?その理由をまとめてみます。文章が読みやすくなる見出しがない文章だと、メリハリがないため非常に読みづらい。読みづらいとすぐに読者はページから離脱します。内容を理解しやすい見出しは、あとに続く文章群の内容を要約しているため、流し読みをするときに内容を理解しやすくします。理想は見出しを読むだけで記事内に何を書いているかがある程度理解できること!目印になる見出しはデザイン的に目立つため、後から読むときに「どこまで読んだか」の目安になる。どこに書いてあったかを探すときの印になる。検索順位の指標になるGoogleが、その記事の検索順位を付けるときに「見出し」を頼りにする。最後の「検索順位の指標になる」というのは補足が要りますね。こちらは後ほど詳しく書いてあります!ブログではこんなふうに見出しを付けるよブログで「見出し」を作りたいときは、こんなプルダウンでできます。「段落」のプルダウンで「見出し」を付けるこれはWordPressでの例ですが、どの無料ブログでも大体同じだと思います。HTMLで、こんなふうに<h2>のようなコードではさむと見出しになります。<h2>ここに見出しが入ります</h2>WEBサイトには6種類の見出しがある!WEBサイト上の「見出し」には優先順位があって、6種類の見出しが存在します。見出し1(<h1>)見出し2(<h2>)見出し3(<h3>)見出し4(<h4>)見出し5(<h5>)見出し6(<h6>)......のように、数字の1~6まであるんですねー。わたしは使っても見出し4(<h4>)までですが。「見出し1」が最も大きな見出しで、2、3......になるにつれ、小さな見出しになっていきます。ヨスいや......まだよくわかんないんだけど??ええ、もっと図を元にわかりやすく説明します。包括されるもの」の順にではこちらの「おしながき」を見てください。レストランのメニューですね。この「おしながき」の中の見出しはどれでしょうか?この「おしながき」の「見出し1(<h1>タグ)」「見出し2(<h2>タグ)」「見出し3(<h3>タグ)」はどれ?(正解はこちらです(アニメーションになっています)!アニメーションで見る「見出し1(<h1>タグ)」から「見出し3(<h3>タグ)」まで上の画像はアニメーションになっているのでじっと見ていてください。なんとなく、「見出し」の優先順位がわかってきましたか?ブログの中での見出しの例ブログで使う「見出し」はこういうものです。ブログでの見出しの例もうちょっとわかりやすい例を出します。本当は記事タイトルをもっと考えるべきですが)。書くとしたらこんな感じの「見出し」を付けるでしょうね。【見出し3】ウエハース系チョコ【見出し4】キットカットは毎日食いたいほかにも「見出し2」には「好きなキャンディ」とか「好きなグミ」といろいろ出てきますね。ここまで広がるのなら記事を分けたほうがいいんですけど(笑)。ヨスちなみに、各「見出し」のあとには必ず文章がきます。その使い方を紹介します。上の例では<h2>から<h4>までふんだんに見出しを使っていますが、物事を体系的にまとめた記事でない限り、通常は<h2>ぐらいを使っていればオッケーです。<h3>とか下位層の見出しは使う必要はありません。「見出し2」の例なぜ<h1>ではなく<h2>から使うのかというと、実はブログではたいていの場合、記事タイトルが「見出し1(<h1>)」になっているからです。「はてなブログ」では「大見出し」を選択しても「<h2>タグ」ではなく「<h3>タグ」が入るそうです。無料ブログを使っている方はご注意ください。1つの記事内に「見出し1(<h1>)」を複数使うのは良くないので、記事内には「見出し2(<h2>)」から使うというわけです。ヨスWordPressの場合、良質なテーマだったら何も考えなくてもそうなっています。」とかゴリ押しですよー。ルールに従って「hタグ」を使う先ほど「見出しは優先順位があって、順番に使う」と書きました。ブログ初心者の方にはこういうミスをする方がいらっしゃいます。見出しタグを使わずに文字を大きく装飾するまず多いミスは「見出し2(<h2>)」を使わずに、<span>などで文字を大きくして装飾すること。font-size:30px;">私の好きなチョコレート</span>たしかにこう記述すると、こんなふうに見かけ上は文字が大きくなって赤くなって目立ちます。×あと、こういうものも見かけます。それは「見出し5(<h5>)」のデザインが好きだからと言って本来<h2>を使うべきところに<h5>を使うというミスです。デザインが好きだからと言って本来「見出し2」のところに「見出し5」を使うのはダメ!ヨスデザインはもう少し慣れてきたらCSSの勉強をして、いくらでも変更できますのでご安心を!ということで、デザインのことはさておき、<h2>から使っていってください。<h5>のデザインが好きなら、後日勉強してから<h2>のデザインを<h5>のデザインに変更できますので!「見出し」は検索順位に関わってくるでは、なぜ「見出しタグ」を付けてまで、Googleに「ここが見出しだよ!」ということを伝えたいのでしょうか?実は検索順位に関わってくるからです。「hタグ」を使わないとGoogleに「見出し」と伝わらないGoogleのコンピューターは、どのキーワードでどの記事が上位に来るのが望ましいかを、ネット上を徘徊しながらランク付けしていっています。「Google」での検索結果その際に重視するのが、「何について書かれているか」です。そのための重要な指標が「記事タイトル」と「見出し(<h1>~<h6>)」なんですね。装飾的に文字を大きくして赤くするだけでは、Googleのコンピューターに「ここが見出しだよ!」ということが伝わりません。するかというと、「<h2>」のような「見出しタグ」を使う以外の方法がありません。ないとGoogleには「見出し」と認識されないから。人間向けとGoogle向けの「読みやすさ」つまり、見出しを表すコードの<h2>は、Googleが読みやすくするための印なんです。ヨスGoogleが読みやすくする??......どういう意味?......と思われそうなので、こちらで人間向けの「読みやすさ」とGoogle向けの「読みやすさ」を説明します。上の画像のように、人間向きの「読みやすさ」は、ほかの文章と区別させる装飾を加えることです。見出しの背景を赤くして、文字を大きくするなどの装飾を施し、ほかの文章群に埋没させないデザインにすることで読みやすくなります。Googleに対しては、色を変えることや文字の大きさを変えることでは伝わらず、代わりに<h2>のような見出しタグを使うんです。ヨスGoogleに装飾は見えないんですね。<h2>のようなコードでしか判別できません。これで、Googleにどれが見出しなのかが伝わり、その記事が何について書いてあるのかが明確になり、検索順位も上がってくるわけ。見出しを使うときの注意点では、Googleに「この記事が何について書かれているか?」を伝えやすくするために、見出しで気をつけるべきことをまとめます。見出しはその文章群を端的に要約した「キャッチコピー」のようなものです。いうことで「見出し」は「見出し」のあとに続く文章群を要約して書きましょう。【サッカーのルール「オフサイド」について】ふと思ったが、グラノーラは美味い。毎日食っても飽きない。いうか、わたしは実際に1年間毎朝グラノーラを食べ続けたことがある。......(略)ヨスいやームチャクチャですね。「サッカーのルール」という見出しなのに、グラノーラについて語っている!2見出しは端的に記事タイトルと同じで、見出しが長くなりすぎるとGoogleに何が言いたいのか伝わりにくくなります。端的にそのパートを凝縮した見出しにしましょう。意識したいのは見出しは文章ではないこと!あくまで「見出し」で、「キャッチコピー」のようなものです。」で区切って2文になるのはやめましょう。ヨス長い「見出し」はGoogleに伝わらないだけでなく、人間の目にも読みにくくなりますよ~。3見出しは具体的によく見かけるのが抽象的な見出しです。「種類」とか「外観」みたいな見出しですね。人間は文脈でわかってもGoogleには伝わりにくいです。吉野家丸亀店の外観みたいな感じで、確実にGoogleに伝わるように具体的にしましょう。4場合によっては数字を入れる手順を示すときなどは頭に数字を入れたほうが読者にとってわかりやすいです。以前書いた「見出しには数字を打て」にもありますが。「あなたが犬を飼うべき10個の理由」というタイトルなら......<h2>【3】犬は癒しをくれる</h2>みたいに数字を入れたほうが「今は10個のうち3個目だ」というのがわかりやすいです。ヨス数字は必要なときだけ入れましょう。なんでもかんでも見出しに数字を入れるのは逆に不自然なのでやめましょう。5見出しのあとには文章を入れる「見出し」はあくまで要約した文章です。見出しが連続で続かないようにします。<h2>犬の種類</h2><h3>柴犬</h3>上のようにするのではなく、「犬の種類」に関する文章を記述しましょう。うしろに文章が来て初めて「見出し」になりますよー!長くなりましたが、これがHTMLでいうところの「hタグ」こと「見出し」についてです。「見出し」は検索順位のためにあるわけではありません。適切な部分を見出しにすることで読者にとって読みやすくしてくれます。慣れてくると簡単にできるようになりますので、ひたすら書くのみ。現在、私の運営するオンラインサロンでは、メンバーを募集しております!本気の本気でブログのアクセスを増やしたい方下記からどうぞ!文章の校正ポイントパートナーこの記事、おもしろかったわ。ほかに似た記事ないん?ヨス「ブログ文章の書き方のカテゴリ」にあるきん、そっち見てや。この記事が気に入ったらいいねしよう!最新記事をお届けします。オレンジメールプロフィールTwitterFacebook香川県在住。ブログで飯食っているプロブロガー(月間125万PV達成)のヨスです。効率化オタクが講じて、KADOKAWAから書籍も出版しました。英語学習メディア「英語びより」編集長。ブログを本気で書く人のためのオンラインサロン「ヨッセンスクール」を運営。夫婦別姓を実行してて、何度か新聞からも取材を受けてます。ジェンダーや言語学の話になるとうるさい人です。iPadを使い倒してます。