h1タグとは、ページの見出しを表す「hタグ」の中で最も上位のタグである。ページの最初に一番大きな文字で配置され、ページのタイトルを意味することも多い。
h1は最上位の見出しであり、ユーザーと検索エンジンが「ページに何が書かれているか」を把握するために最も重要なテキストと言える。
この記事では、h1タグの概要やタイトルタグとの違い、おすすめの使い方まで詳しく説明していく。
結論からいうと、h1とタイトルタグは全く同一のテキストを設定して良い。その理由を、Google公式回答を交えながら解説していく。
h1タグの使い方に迷いがある方はぜひ最後まで読んで参考にしてほしい。
目次
1. h1タグとは
まずはh1タグとは何か、理解していこう。
1-1. h1タグは「最上位の見出し」のこと
h1タグは「見出しタグ(hタグ)」のひとつであり、見出しタグで一番最初(一番数字が小さい)の見出しのことをいう。
バズ部の「コンバージョンを獲得するために「知覚価値」を高めよう」という記事では、以下のような見出し構成となっている。
この記事の場合は、大見出しがh1タグで、中見出しとなるh2タグが3つあり、さらに中見出しを補足する役割として小見出し(h3タグ)がある構成となっている。
見出しタグはh6タグまで使うことができ、h1→h2→h3→h4→h5→h6の順番に階層が深くなっていく(ただし、実務上はh5やh6はほとんど使われない)。
ページの構造から定義すると、「h1タグは、ページの構造において最も上位の見出しである」といえる。
1-2. h1はGoogleとユーザー両方にとって最も重要なテキスト
h1タグはコンテンツの一番上に表示され、ユーザーが最初に目にするものである。また、一般的に、h1タグは他のどの要素よりも大きな文字で表示される(Googleもそれを推奨している)。
そしてGoogleがコンテンツの構造を把握する際にも、大きく目立つテキストは重要視される。
そのためh1は、Googleとユーザー両方にとって、そのコンテンツに何が書かれているかを把握するために最も重要なテキストと考えて良いだろう。
また、2021年夏頃から、タイトルリンク(検索結果に表示されるページタイトル)にh1タグの内容が使われる事例が増えている。そのことも考えると、SEOにおいてもh1の重要性は高まっているといえる。
2. h1タグとタイトルの違い|表示場所や役割が異なる
h1タグとタイトル(titleタグ)の特徴や違いをまとめると、以下のようになる。
h1タグ |
タイトル(titleタグ) |
|
表示場所 |
Webページに表示される。読者がページのタイトルと認識することが多い。 |
検索エンジンの検索結果に表示されることが多い。ページに遷移した場合は、ブラウザのタイトルバーに表示されるが、ほとんど目立たない。 |
HTMLでの記述 |
body要素の<h1></h1>の部分 |
head要素の<title></title>の部分(メタ情報) |
役割 |
ページを読んでいる読者に、ページの内容を分かりやすく伝える。 |
検索エンジンがページの内容を理解するために重要。また、検索結果を見ているユーザーがクリックしたくなるテキストに最適化するべき。 |
文字数 |
特に制限なし |
パソコンでは30文字程度、スマホでは35文字程度しか表示されない |
このように、本来、h1タグとタイトルは、表示場所も記述場所も役割も違う。
しかし先ほども説明した通り、タイトルに設定したテキストがh1タグに自動挿入されるWordPressテーマが多く、「h1タグ=タイトル」としているコンテンツも多い。
3. h1タグとタイトルタグのテキストは同一で問題ない
さらに踏み込んで、h1タグとタイトルタグに全く同一のテキストを設定しても良いのかについて解説していく。
結論としては、h1タグとタイトルタグのテキストは完全に同じで問題ない。バズ部でも、基本的にh1タグのテキストとタイトルタグのテキストは同じにしている。
同じでなければならないわけではないし、使い分けても問題ないが、どちらかというと同じの方が良いのではないだろうかと考える。その理由を解説していく。
3-1. 同一で良い理由1:どちらもページの主題を伝えるものだから
h1とタイトルタグが同じで良い理由は、どちらもページの主題(主なテーマ)が何であるかを伝えるものであるからだ。そう考えた時に、h1とタイトルが全然違う内容になる方が不自然だろう。
ただし、h1の内容が長くなり過ぎる場合(例えば30文字を大きく超える場合)には、タイトルタグの内容は短くするという判断もできる。なぜならば、Googleの検索結果に表示できる文字数には限りがあるからだ。
タイトルタグの文字数については、「タイトルタグの文字数は28~36文字を狙おう!理由とGoogle見解を解説」の記事を参照してほしい。
3-2. 同一で良い理由2:異なる場合タイトルリンクが書き換えられる可能性がある
h1とタイトルが同じで良い2つ目の理由は、h1とタイトルタグが異なる場合、Google検索結果のタイトルリンクが書き換えられる可能性があるからだ。
タイトルリンクとは、Google検索結果一覧に表示される、各ページのタイトルのことである。
Google検索結果に表示されるタイトルリンクには、Webページのタイトルタグが表示されるのが基本である。しかし、Googleが2021年8月に新しいシステムを導入した後、タイトルがページ内容を適切に示したものでない場合、h1タグに書き換えられる現象が多く報告されるようになった。
Google検索セントラルには、タイトルリンクはtitleタグだけでなくh1タグなどページ内の要素から自動的に決定すると書いてある。
Google 検索のタイトルリンクの作成方法
Google 検索では、次のソースを使ってタイトルリンクを自動的に決定します。
・<title> 要素内のコンテンツ
・ページ上の主な視覚的なタイトルや見出し
・<h1> 要素などの見出し要素
・スタイル処理によって大きく目立つように作られたその他のコンテンツ
・ページ内のその他のテキスト
・ページ上のアンカー テキスト
・ページを指すリンク内のテキスト
実際に書き換えられた事例を調査した結果、h1タグとタイトルタグに違うテキストが設定されていて、h1タグの方がページ内容を示している場合に、書き換えられる傾向が見られた。
タイトルリンクの書き換えを防ぐためにも、h1タグとタイトルタグは同一がおすすめだ。
4. h1タグ最適化による直接的なSEO効果はない
この記事を読んでいる方が最も気になるであろう「h1タグの最適化はSEO効果があるか」について解説していこう。
結論としては、h1タグを最適化したからといって直接的なSEO効果があるわけではないと考えられる。直接的なSEO効果が無いというのは、h1タグを最適化することで順位が上がるわけではないということだ。
ただし、h1タグやその他のhタグを最適化し、適切な見出しを設定することで、検索エンジンのクローラーにページの内容を理解しやすくなるのは事実だろう。また、何よりもページを読んでいるユーザーが、そのページに何が書かれているのか理解しやすくなる。
また、hタグは検索エンジンから重要なテキストと判断され、特にh1タグは最も重要なテキストと判断される。
Google Serch Central(英語)にも、「見出しタグの数字が小さいほど、Googleとユーザーの目から見て重要なテキストである」と書かれている。
Another quick fix is to assure your website makes proper use of heading tags. In our non-profit study, nearly 19% of submitted sites had room for improvement with heading elements. The most common problem in heading tags was the tendency to initiate headers with an <h2> or <h3> tag while not including an <h1> tag, presumably for aesthetic reasons.
Headings give you the opportunity to tell both Google and users what’s important
to you and your website. The lower the number on your heading tag, the more important the text, in the eyes of Google and your users. Take advantage of that <h1> tag! If you don’t like how an <h1> tag is rendered visually, you can always alter its appearance in your CSS.
つまり、h1タグに対策キーワード(上位表示させたいキーワード)を入れることには、一定のSEO効果があると考えられる。
5. h1タグの数についてのGoogle公式見解
次の章からh1タグのおすすめの使い方を解説していくが、その前にGoogle公式見解をまとめておこう。
SEO効果のあるh1タグの使い方についてさまざまな議論がされているが、Googleのジョン・ミュラー氏はウェブマスター向けの動画で以下のように語っている。
・h1要素は、1ページの中で何回でも使って構わない 参考:English Google Webmaster Central office-hours from September 27, 2019 |
つまりGoogleの検索順位を決める要因としては、h1タグが複数あっても、h1タグが1つもなくても影響はないということだ。
ただし、動画内でも「ユーザビリティの観点から見ると改善した方が良いかもしれない」としている。ユーザーやクローラーが構造や内容を正しく理解するためには、やはりh1タグは一つの方が無難といえるだろう。
6. h1タグのおすすめの使い方
ここからは、バズ部が推奨するh1タグのおすすめの使い方をお伝えしていこう。
6-1. h1タグは1ページに1つにしよう
先ほどのGoogle公式見解では「h1タグは複数でも問題ない」とあったが、それでもバズ部ではh1タグはページ内に1つが良いと考えている。
なぜならば、h1タグはページのテーマを伝える重要な要素だからである。h1タグが2つ以上あると、同じページで違うテーマを扱っていることになり、ユーザーも混乱してしまうだろう。
そのため、h1タグは最初に一回だけ使おう。
6-2. h1タグはタイトルタグと同一にしよう
「3. h1タグとタイトルタグのテキストは同一で問題ない」で述べた通り、h1タグとタイトルタグのテキストは同一で構わない。なぜならば、どちらもページの主題を伝えるものだからだ。
h1タグとタイトルタグが異なる場合、検索結果のタイトルリンクがタイトルタグではなくh1タグに書き換えられるケースがある。そのため、できればh1タグとタイトルタグは同一にしておくと良いだろう。
苦労して考えたタイトルタグが書き換えられてしまうのはもったいない。
6-3. h1タグはページの最初に大きな文字サイズで配置しよう
h1タグをページ内で最も重要な要素としっかり位置づけるためにも、h1タグはページの最初に配置し、フォントサイズを最も大きくしよう。
これについては、公式のGoogle検索セントラル内でも触れられている。
ページのメインの見出しを明確にする。Google は、メインの視覚的タイトル、見出し要素、その他の大きく目立つテキストなど、タイトルリンクを作成する際のさまざまなソースに注意を払います。複数の見出しの視覚的重みと視認性の高さが同じであることは、混乱につながる可能性があります。メインの見出しは、ページ上の他のテキストと区別でき、ページで最も高い視認性を持つ見出しとして目を引くようにすることを検討してください(例: フォントを大きくする、見出しをページで最初に目立つ <h1> 要素に配置する)。
なお、h1タグの装飾(文字サイズの変更など)はCSSで自由に設定できる。
6-4. できればh1タグは画像ではなくテキストが望ましい
h1タグに画像を使用することも可能だが、hタグはページの構造を表すものなので、画像よりはテキストが自然である。
ユーザーがページを開いた時、ページ上部にテキストがあった方が、それをページのタイトルと認識しやすい。
もしh1タグに画像を設定する場合は、必ずimgタグのalt属性に「画像の内容を適切に表すような代替テキスト」を設定しよう。alt属性が空白(またはalt属性を設定しない)だと、クローラーにh1タグの内容が伝わらない。
alt属性については、「alt属性とは?適切な設定方法と具体的な書き方をキャプチャ付きで解説」の記事を参照してほしい。
6-5. h1タグのキーワードを含めて簡潔に記述しよう
h1タグには、上位を狙いたいキーワードを含めて、簡潔にページの内容を表現する文章を入れよう。ユーザーにも、検索エンジンのクローラーにも伝わりやすいテキストが理想的である。
h1タグには文字数制限はないが、キーワードの詰め込みにならないよう注意しよう。
なお、h1タグ=タイトルとする場合には、以下のバズ部記事もぜひ参考にしていただきたい。
・数字で証明!5倍以上のクリック率を叩き出した「タイトルのつけ方」
・10個の実例から学ぶ!読まれるブログ記事タイトルの6つのルール
・タイトルタグのSEO効果と読まれるタイトルの書き方
7. h1タグについてのQ&A
最後に、h1タグについてのQ&Aをまとめて紹介する。
7-1. h1タグにサイト共通のロゴマークを設定してもいい?
【回答】全ページ共通で設定することはおすすめしない。
古いサイトテンプレートの中には、h1にロゴを設定し、各ページの見出しはh2からスタートするものがある。このテンプレートのように、全ページのh1がロゴマーク画像というのはあまりおすすめしない。なぜならば、全ページのh1タグが同じになってしまうからである。
h1タグにはページの主題を表すテキストが入っているべきであり、全ページが同じというのは良くない。できればh1タグに固有のテキストまたは画像を設定するよう、サイトを改修してみてはいかがだろうか。
7-2. h1タグを見えなくする(隠す)のはOK?
【回答】h1タグを隠すような手法は、やってはいけない。
h1タグはフォントサイズが大きく、デザイン面から邪魔になるという理由で、h1タグを見えなくさせているサイトがある。
例えば、CSSで「text-indent: -9999px;」や「display:none;」を設定すると、画面上から見えなくなる。
しかし、これは「隠しテキスト」にあたる行為なのでおすすめしない。隠しテキストはGoogleのガイドライン違反となり、SEOに悪い影響が出かねない。
まとめ
この記事では、h1タグの基礎知識からおすすめの使い方までを紹介してきた。h1タグとタイトルタグの使い分けなど、参考にできる箇所があったのではないだろうか。
なお、hタグ(見出しタグ)の使い方については、ぜひ「hタグ(見出しタグ)の使い方と絶対に知っておくべき注意点」を参考にしてほしい。
SEOをより深く理解したい方へ。バズ部のノウハウを全て詰め込みました。