おはこんばんにちは！ノボルです。
HTMLの『見出しタグ』ってどうやって使い分けるんだろう…。
確かにh1〜h6まであって混同するよね。使い方を解説するね！
そこで今回は、HTMLの見出しタグの使い方を解説します！
Webエンジニアはもちろん、Webデザイナーやブロガーの方も知っておくべきです。
HTMLの見出しタグとは？
HTMLの『見出しタグ』とは、見出しを作成するためのタグです。
以下のように、見出しタグには「h1」から「h6」まで6種類あり、数字が小さいほど大きな見出しとなります。
h1タグ
→ １番大きな見出し
h2タグ
→ ２番目に大きな見出し
h3タグ
→ ３番目に大きな見出し
h4タグ
→ ４番目に大きな見出し
h5タグ
→ ５番目に大きな見出し
h6タグ
→ ６番目に大きな見出し
見出しタグの大きさの違い
見出しタグの大きさの違いは、以下の通りです。
CSSを適応しなくても、フォントの大きさが変わるなんて便利ですね。
See the Pen BaNjyLK by monkey d ruffy (@ruffy126) on CodePen.
当ブログの使用例
当ブログでは、
・記事のタイトルは「h1」
・大見出しは「h2」
・小見出しは「h4」
のように使い分けています。
h1〜h6タグを使い分ける方法
HTMLの見出しの使い方には、いくつかのルールがあります。
それらを順守することで、読みやすくて、SEOにも強い文章を書くことができます。
見出しタグはコンテンツの要所に使う
見出しタグは、コンテンツの要所を強調し、ユーザーに分かりやすく伝えるために使うことが大切です。
Google公式も、意味のある場所で見出しタグを使うことを推奨しています。
見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。
検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ
見出しタグを順番に使う
見出しタグは、必要に応じて、h1からh6タグまで正しい順序でマークアップしましょう。
Google公式も、複数の見出しサイズを正しい順序で使用することを推奨しています。
複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。
検索エンジン最適化（SEO）スターター ガイド – Search Console ヘルプ
h1タグの使用は1回だけにする
h1タグは、最も大きな見出しです。
なので、基本的には、1Webページの内容を表すために一度だけ使うようにしましょう。
h1タグを複数回使用してしまうと、記事のコンテンツが、検索エンジンや閲覧ユーザーにとってわかりづらくなります。
キーワードを見出しタグに無理に詰め込まない
SEO対策として、「見出しにキーワードを入れた方がいい」とよく言いますが、入れすぎるのはやめておきましょう。
Googleは、見出しとコンテンツの関連性を評価しているようですが、近年、キーワードを羅列しているようなサイトが増え、方針が変わってきている可能性があります。
なので、SEO対策のためとはいえ、見出しや本文にキーワードを無理やり詰め込むのはオススメできません。
ペナルティーはないと思いますが、「ユーザービリティの低いコンテンツ」とみなされてしまうかもしれないので、見出しには適度にキーワードを含めるようにしましょう。
見出しタグには基本的に画像を使わない
見出しタグに画像を使用するのは、ユーザビリティの観点からすると、基本的にやめておくべきです。
h2〜h6タグであっても、画像に使うのはオススメできません。
Google公式も、画像ではなくテキストを使用することを推奨しています。
重要な名前、コンテンツ、リンクを表示するときは、画像ではなくテキストを使用します。テキスト コンテンツの代わりに画像を使用する必要がある場合は、alt 属性を使用して簡単な説明テキストを組み込みます。
ウェブマスター向けガイドライン（品質に関するガイドライン） – Search Console ヘルプ
最後に
今回の記事では、HTMLの見出しタグの使い方について解説しました。
HTMLの見出しタグは、Webサイトやブログにおいて重要な要素です。
Webエンジニア・Webデザイナー・ブロガーの方は、ユーザーの利便性やGoogle公式のガイドラインを考慮して使い分けるようにしましょう。
コメント