HTMLの見出しタグの使い方。KAISETSUKAISETSUhtml&CSS入門リファレンスWEB/インターネットTOPhtml&CSS入門HTMLの見出しタグの使い方。HTMLの見出しタグの使い方。2019/07/08)見出しタグとは、html文書内に見出しを挿入するためのタグです。見出しタグは重要度に応じ<h1>~<h6>までの6種類用意されています。<h1>~~</h1>:1番重要な見出し<h2>~~</h2>:2番目に重要な見出し<h3>~~</h3>:3番目に重要な見出し<h4>~~</h4>:4番目に重要な見出し<h5>~~</h5>:5番目に重要な見出し<h6>~~</h6>:6番目に重要な見出しhtml文書内に見出しが必要な場合は、重要な順にh1から使います。文書内にh1ほど重要でない見出しが必要な場合h2を使い、それよしさらに重要でない見出しが必要であればh3を使う。いう風に、重要度が下がるごとに数字を1ずつ増やして使います。見出しタグを使うことで、ユーザーや検索エンジンに、文章の構造を正確にわかりやすく伝えることができます。ユーザーに正確にわかりやすく伝えるある程度長い文章の場合、見出しがないとメリハリがなく非常に読みづらくなります。下記の例を見てください。文字がダラーっとならんでいて、一見下だけでは何が書いてあるかわからないし、読むのがめんどくさいなと感じさせてしまいます。見出しを入れた例を見てください。見出しが入ることで何が書いてあるかがひと目で分かるようになりますし、読むことについての心理的なハードルを下げることが出来ます。適切な見出しは、文章を読んでもらうためには必須の対応と言えます。検索エンジンに正確にわかりやすく伝える見出しを使うことで、googleなどの検索エンジンに対して、何についての文章なのか、何が重要なのかを正確に伝えることが出来ます。検索エンジンに正確に文章を伝えることで、適切なキーワードでの検索順位の向上などを見込むことが出来ます。このように見出しタグは、ユーザーに対しても、検索エンジンに対しても、文章を正確にわかりやすく伝えるために重要な効果があるんですね。見出しタグの使い方h1タグは1ぺージに1つだけh1タグは最も重要な見出しを表すタグです。そのため同じページ内にいくつも存在するべきではありません。ページ内で1度だけ使うのが理想的な使い方です。HTML5の仕様上、複数回つかっても問題ないのですが、SEOの観点からみると、1つに絞ったほうが重要なことが伝わると考えられているからです。SEOに関してはアルゴリズムが公表されていないので断言はできませんが、一般的には、h1が複数あるとどれがメインになるh1タグなのかがGoogleには判断できなくなるh1タグ(主見出し)としての価値が薄まる参照:今どきの見出しとしてのhタグの正しい使い方という理由から1つにすることが理想とされています。してもh1を2つにしたいという場合を除き(※ほとんどどないと思いますが、)h1は1つにしましょう。h1を使うべき場所h1タグはページ内の一番重要な場所に使います。一般的に多いのは、トップページはサイト名をh1にし、各記事ページは記事タイトルをh1にする方法です。現在のサイトではこの方法が主流になっているので、この方法を使っていれば問題ないでしょう。あるブログサービスや、wordpresssの多くテーマではすでにこのような対応がなされている場合が多いので、あまりきにする機会はないかもしれません。h2〜h6は何回でも使用可能h2~h6のタグは基本的に回数制限はありません。何回でも使うことができます。ブログや記事を書く場合は、h2~h4くらいまでを使うことが多いです。h5、h6を使っても問題はありませんが、文章の構造があまりに複雑になりすぎても読みづらくなってしまうので、h4くらいまでにまとめられるように考えながら書くことが大切です。見出しは重要な順に、h1から順番どおりに使っていきます。次に重要なことが来たらh2、そのつぎに重要であればh3というふうに使っていきます。同じくらいの重要度であれば、同じ見出しを使っても構いません。実際に見出しタグを順番どおりに使った例を見てみましょう。</div>これは最も重要な見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこれは2番目に重要な見出しその1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこれは2番目に重要な見出しその2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこれは3番目に重要な見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこれは2番目に重要な見出しその3テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこのように見出しタグは順番通りに使っていくことになります。デザインを変える目的で見出しタグを使わない見出しタグを使うと、文字が大きく表示されます。これを利用して、「この部分は強調したいからh2を使おう」という理由で見出しタグを使うのは間違った使い方になります。見出しタグは、あくまでの文章中の「見出し」を表すもので、それ以外の部分には使うべきではありません。強調表示したいのであれば、strongタグなどを使い、見た目はCSSを使ってカスタマイズするようにしましょう。見出しは、何についての文章か?が伝わるように見出しはユーザーにとって、そのブロックが自分が読みたい情報かどうかを判断させるための重要なキーワードになります。SEOにとっても適切なキーワードである方が、正確なインデックスが期待できます。そのためには見出しを読んだだけで、その後には何が書かれているのか?がしっかり伝わるものであることが望ましいです。短い言葉で一目で頭に入り、より的確に内容を言い表していることが大切になります。下記のような例を見てみましょう。<p>HTMLは19XX年に生まれ...</p>HTMLについてHTMLは19XX年に生まれ...HTMLはなぜ生まれたのか?HTMLは19XX年に生まれ...HTMLが誕生した理由HTMLは19XX年に生まれ...タイトルが3つ並んでいますが、1つ目より2つ目と3つ目の方が具体的に内容を言い表せていますね。1つ目の「HTMLについて」では漠然としすぎていて何が書いてあるのかわかりません。2つ目と3つ目では、3つ目の方がより短く言い表せているので良いと言えるでしょう。ターゲットが小学生のようにあえて噛み砕いた言葉を使いたい場合は2つ目を選ぶことも考えられます。キーワードを無理して詰め込むのは逆効果SEO的には見出しのキーワードが重要視されると言われています。確かに今でも、タイトルのキーワードで検索順位が上がることが多いです。無理にキーワードを入れ込むのはやめた方が良いでしょう。今や検索エンジンの解析技術も上がり、無理やりキーワードを入れ込みすぎると、逆に評価が下がることもあります。キーワードは続く文章に何が書かれているかを伝えるためのものです。不自然にキーワードを繰り返すのはやめましょう。見出しタグに画像は使わない見出しタグ内に画像を使うことはできますが、重要な情報の部分はなるべくテキストを使う方が良いです。ユーザーの環境によっては画像を表示できない場合があるからです。ネットワークの調子が悪くて画像がうまく表示できない場合もあります。googleの公式ガイドラインでも下記のような記述があります。画像にテキストを埋め込むことは避けてください。ページ見出しやメニュー項目などの重要なテキスト要素は埋め込まないでください。これは、すべてのユーザーがアクセスできるわけではないためです(また、ページ翻訳ツールも画像では動作しません)。形式で作成し、画像に代替テキストを設定してください。ヘルプサイトのロゴなどのように、どうしても画像をh1にしたい場合は、必ずaltにテキストを設定するようにしましょう。することで、検索エンジンにh1の画像が何を表しているのかを伝えることができます。ロゴをh1にしたい場合は下記のように、altにテキストを記述するようにしましょう。/></h1>すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。【初心者】HTML入門!基本やルールをサンプル付きでやさしく解説html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。