見出しタグって苦手なの。だって目立つし、短いと味気ないし、長いとゴチャァって感じがするし・・・。見出しタグは嫌だわ。どうにかならないかしら？
見出しタグって面倒くさいですよね。H1からH6まであるので、使い分けなくちゃいけませんし。本文書くのも面倒なのに、見出しまで付けなくちゃいけないなんて、嫌になりますよね。
今回は「見出しタグってなんだか苦手！」と思っている人やもっと効果的に使いたい人に向けて、見出しタグの基礎から使い方、つけ方まで解説したいと思います。
読んで頂けたら、「見出しタグなんてチョロいわ」と思うかもしれませんよ。
目次にはリンクが張ってありますので、気になるところに飛ぶことができます
見出しタグについて
このブログの見出しタグの見本です。WordPressの場合、<h1>タグはページのタイトル部分になります。通常は1つの記事に1つまでとされています。
見出しとは文章の概要を表す言葉
見出しとは、ページを構成する段落の概要を表す言葉です。見出しによって、次にはじまる段落の内容を把握することができます。
たとえば、新聞の見出しをイメージしてください。重要なニュースのところほど、大きく目立つ見出しになっています。地域のニュースの小見出しや訃報の見出しはあまり目立たない見出しになっています。
新聞の見出しと同じようにホームページにも見出しがあります。見出しタグといいます。タグはラベルで、HTMLというホームページを作るためのコードです。コンピュータに「ここの文章は見出しという特別な文章で、目立たせてください」と意味づけと指示をだします。
見出しタグの役割
見出しタグには1から6の数字で表し、<h1>が1番目立つ見出しタグになります。<h6>は逆に太文字<strong>や強調<em>と見た目がほとんどかわりません。でも、<h6>のように見た目が太文字や強調と変わらなくても、重要な役割があります。
見出しタグには2つの役割があります。
- 伝わる記事のための見出しタグ
- SEOのための見出しタグ
伝わる記事のための見出しタグ
見出しタグはページを構成する文章の概要を表しています。見出しタグを見ただけでページの内容を把握することができます。それによって、読みやすさ・理解しやすさの助けとなります。見出しタグがあることによって、伝えたいことが伝わる記事になります。
また、このブログみたいに見出しタグを目次にすることができます。この記事の目次です。
目次にはリンクが張ってあるので、ページ内リンクとして使うことができます。これによって、読み手が「ここがよく分からないから、もう一度読みたい」と思ったら、すぐに目的の場所にたどり着くことができます。分からない点をなくすことができ、伝えたいことが伝わる記事になります。
伝わる記事のための見出しタグ
・見出しタグを読めば段落の内容を把握できる
・目次になる
・簡単に目的の場所にたどり着ける
SEOのための見出しタグ
見出しタグはSEO対策にも役立ちます。SEOとは「検索エンジン最適化」の略語です。主にGoogleの検索エンジンを対象にしています。Googleの検索サイトで検索順位を上げるための対策をSEO対策またはSEOと読んでいます。
SEO対策については「【みんなに優しいSEO対策】SEOとは検索順位を上げるためにするもの？」で初心者の目線で分かりやすく解説しました。基礎から実践までまとめましたので、よかったら読んでみてくださいね。
見出しタグを<h1>から<h6>まで使い分けることによって、ホームーページに訪れるグーグルののクローラーに知らせます。「ここは特に重要な段落ですよ。」「ここは<h2>タグの中の段落ですよ」と伝えます。クローラーは正しく情報収集することによって、検索サイトのデータベースに正しく登録することができます。
SEOのための見出しタグ
・クローラーに段落の内容を伝えることができる
・クローラーに段落の重要度を伝えることができる
・クローラーに記事に構成を伝えることができる
見出しタグの正しい使い方
ガイドラインより見出しタグの使い方を学びます。SEOスターターガイドには見出しタグの使い方を提案しています。
- 概要を書く場合を想像する
- ページ全体で控えめに見出しを使用する
読み手の読みやすさを気遣う
どんな立派な文章でも、文が続けば見づらくなります。折口信夫の「高御座」から引用します。
折口信夫 『高御座』より 続日本紀を見て、第一に受ける印象は、大倭根子天皇なる称号が、御歴代の御名の上に付いてゐる事である。此は、疑ひもなく、詔旨・宣命のもつ信仰から出たものと思はれる。更に言へば、即位式ののりとが、印象深く、其天子の御一代を掩ふ事になる為と思ふ。即位ののりとと云ふものは、古くは、其が初春で、同時に新嘗の直後に、宣り下されたものと、推論する事の出来る多くの根拠がある。だから、のりと及びよごとが、即位式・大嘗祭・元旦朝賀に共通して用ゐられ、或は、其用途が混同してゐるとさへ、見られるやうになつたのである。 今も述べた様に、私は、元旦を以て、大嘗祭・即位式の、同時に行はれた古代の国家の年中行事を考へてゐる。言ひ換へれば、天子、毎年、新に蘇らせられると言ふ信仰の下に、其産声を意味する祝詞が、御代始めの祝詞ともなり、同じ考へから、時に行はれた大嘗祭の祝詞となり、或は、元旦ののりととも、分れて行つたのであつた。古代には、第一回の元旦ののりとが、其後、毎年、新しい詞章として、繰り返へされてゐた。然も其が、形式化した常用文句としてゞなく、新鮮な、権威ある詞として、常に考へられてゐたのであつた。此が、即位ののりとと、元旦の詔旨との間に、区別の殆どない理由である。
どうでしょうか？見づらくありませんか？
段落の間に余白があった方が見やすいです。一行空けてみます。
続日本紀を見て、第一に受ける印象は、大倭根子天皇なる称号が、御歴代の御名の上に付いてゐる事である。此は、疑ひもなく、詔旨・宣命のもつ信仰から出たものと思はれる。更に言へば、即位式ののりとが、印象深く、其天子の御一代を掩ふ事になる為と思ふ。即位ののりとと云ふものは、古くは、其が初春で、同時に新嘗の直後に、宣り下されたものと、推論する事の出来る多くの根拠がある。だから、のりと及びよごとが、即位式・大嘗祭・元旦朝賀に共通して用ゐられ、或は、其用途が混同してゐるとさへ、見られるやうになつたのである。
今も述べた様に、私は、元旦を以て、大嘗祭・即位式の、同時に行はれた古代の国家の年中行事を考へてゐる。言ひ換へれば、天子、毎年、新に蘇らせられると言ふ信仰の下に、其産声を意味する祝詞が、御代始めの祝詞ともなり、同じ考へから、時に行はれた大嘗祭の祝詞となり、或は、元旦ののりととも、分れて行つたのであつた。古代には、第一回の元旦ののりとが、其後、毎年、新しい詞章として、繰り返へされてゐた。然も其が、形式化した常用文句としてゞなく、新鮮な、権威ある詞として、常に考へられてゐたのであつた。此が、即位ののりとと、元旦の詔旨との間に、区別の殆どない理由である。
見やすくなりました。ここに見出しを設けてみます。
共通して用いられた祝詞と寿詞
続日本紀を見て、第一に受ける印象は、大倭根子天皇なる称号が、御歴代の御名の上に付いてゐる事である。此は、疑ひもなく、詔旨・宣命のもつ信仰から出たものと思はれる。更に言へば、即位式ののりとが、印象深く、其天子の御一代を掩ふ事になる為と思ふ。即位ののりとと云ふものは、古くは、其が初春で、同時に新嘗の直後に、宣り下されたものと、推論する事の出来る多くの根拠がある。だから、のりと及びよごとが、即位式・大嘗祭・元旦朝賀に共通して用ゐられ、或は、其用途が混同してゐるとさへ、見られるやうになつたのである。
さらに見やすく伝わりやすくなったのではないでしょうか？どんな立派な文章でも、文が続けば見づらくなります。内容を意識して段落や改行を設けます。
ホームページの段落の作り方
学校で習った作文では、段落は同じ内容の場合はひとまとめにしました。
ホームページでは、パソコンで見る人・大きなタブレットで見る人、小さなスマホで見る人といろいろな状況があります。作文とおなじように段落を意味で作ったら、小さなスマホの画面は文字ばかりになります。そうなると見づらいですよね？
ホームページの段落を作る場合は2～3文にします。そのためにも、1つの文章は簡潔に分かりやすく書く必要があります。
グーグルでは「モバイルファースト」を推奨しており、スマホで見やすい、使いやすいホームページを作っている方が評価が高まります。そのため、1つの文章の途中で改行をしたほうが見やすい場合があります。
見出しの正しい使い方とは
ガイドラインより見出しタグの使い方をまとめます。
- 段落の前に見出しタグを配置する
- 見出しタグ＜h1～6＞を順番につかう
- <strong>や太文字など装飾のために見出しタグを使わない
- 見出しタグの文字の大きさは統一する
- 見出しタグばかりの記事はおかしい
- 簡素に分かりやすく見出しタグをつける
- 見出しタグはだけでも記事の内容が理解出来るようにする
ガイドラインは、読み手が紛らわしい思いをする使い方を禁止しています。
見出しタグは見出しタグとして使うことに効果を発揮します。文章の飾りや見た目を揃える目的には使いません。
同じ内容の文章の場合、<h2>の次は<h3>、<h3>の次は<h4>というように使います。<h2>の次は<h6>、<h4>、<h5>、<h3>とならないようにします。文章の構造がクローラーや読み手に適切に伝わりません。
見出しタグの数にも注意が必要です。目安として、1つの記事に3～5つくらいの<h2>タグを設け、内容によって、さらに下位の<h3>以下のタグを使います。
また、長い文章をそのまま見出しタグにしては、文章の要点を掴みにくくなります。なるべくシンプルに見出しタグをつけます。
記事の書き方の「【ライティングの基礎】SEOに強く伝えたいことが伝わる記事の書き方」を参考に、構成から見出しを作る方法がシンプルで内容を反映した見出しタグになります。よかったら読んでみてくださいね。
悩まない！見出しタグのつけ方
見出しタグの付け方には2通りの付け方があります。
- 文章を書いてから見出しをつける方法
- 見出しを考えてから文章を書く方法
読まれる記事を書いている人はどちらのタイプだと思いますか？見出しタグを考えてから文章を書いています。見出しタグを考えていると言うよりも、構成を考えた解きの言葉を見出しに使用します。
そうすることで、構造がシンプルに整います。改めて見出しを考える時間を節約できます。見出しタグで悩んでしまう人は、記事を書いてから、改めて見出しタグを考えていませんか？その労力で、「見出しタグって面倒くさい」と思っているのかもしれません。
構成を考える時に使った言葉の再利用を心がければ、見出しタグに悩まなくて済みますよ。ぜひ、試してみてくださいね。
そっかぁ、私、文章を書いてから見出しを考えていたわ。
見出しだけで記事を作るつもりでいればいいのね。