HTMLの見出し要素である「h1」はSEOのためにも非常に重要な要素です。であるにもかかわらず、かなり多くのサイトにおいて、良くない使われ方を見ます。ここでは、あるべき使い方と、良くない例をご説明します。

h1タグの使い方とSEO効果、よくある良くない使い方

h1とは

WordPressで編集したことがある方なら画像のようなメニューを見たことがありますでしょうか?

WordPressには見出しをつけるための「見出し」ブロックがあり、H1~H6まで選べるようになっています。これがそれぞれ、HTMLのh1~h6に対応しています。h1が一番最上位で、数字が大きくなるにつれ、次の階層ということになります。

次に示すようなことです。

  • – h1
    • – h2
      • – h3
      • – h3
      • – h3
    • – h2

上記に「h1とは」と見出しをつけてますが、これはh2にしています。ではこのページにおけるh1はどれかというと、タイトルの「h1の使い方|多く散見される見出し要素「h1」の良くない使い方」です。画像になってない?と思った方いるかもしれませんが、目次のところのタイトルにも同じ文言が来るようにしていて、このサイトのブログでは、トップに記事用の画像を用意している場合は、画像中にタイトルを書くようにして、目次のところに書いている同じ文言のタイトルをh1にしています。

記事用の画像を用意できてない状況では、目次のところのタイトルをh1にするのはやめて、画像の近くに大きくh1でタイトルを文言で示す、という形になるプログラミングをベースに施しています。

私はこのタイトルの文言をつける際に、ユーザーがこの記事に到達するとすれば、どういうキーワードで検索するだろうか?ということを必ず念頭に置いて決めます。

h1の定義に関する変遷

HTMLはW3Cという組織が仕様を定めてきましたが、現場として不満を持ったApple社、Mozilla社、Opera社によってWHATWGという団体が設立され、HTML5の仕様はWHATWGが先導してきました。そして2021年1月28日にHTML5は廃止となり、WHATWGによって定められる「HTML Living Standard」と呼ばれる仕様が正式に正しいものとなりました。

HTML5が定められた当所、h1は各ページに1つまでとされていました。この仕様が頭に残っていて、現在の仕様をご存じない方がおそらくプロの方でも多くいます。

現在、h1はページにいくつあっても問題ないという仕様になっています。

このあたりの変遷が、h1の使われ方がバラバラな現状の要因の一つだと思われます。

h1とSEOとの関係

HTMLには見出し要素「h1」~「h6」とは別に、「title」タグがあります。「title」はページ内には示されないのですが、ブラウザのタブのところや、検索結果画面のタイトルに表示されます。そしてこの「title」がキーワードレベルでSEOに直結する唯一の個所で、非常に重要な部分となります。まずh1よりも先にtitleが重要、ということは把握しておいてください。

HTMLは、文書です。文書構造を考えなくてはいけません。ページにはtitle(タイトル)があり、次の見出しとしてh1がくる、という定義になっているのです。このh1をGoogleがどのくらい重視しているかというのはブラックボックスのため議論が絶えない話ではあるのですが、最近は検索結果画面で表示されるタイトルにtitleタグの中身ではなく、h1タグの中身が採用されるケースを多く見ます。Googleは検索結果画面のタイトルに、ページの中身と一致したものを出そうということを考えています。h1の中身はかなり重視して見られていると考えた方が良いと言えます。
また、こういったことを考えるときに立ち戻りたいのがGoogleが常に言う「ユーザーにとってわかりやすいかどうか」です。h1はユーザーが見た時に、そのページが何を示しているかわかりやすい内容になっていることがSEOにとっても重要であるはずです。

多く散見される「h1」の良くない使われ方

さすがにプロが制作したであろうサイトで、h1が一つもないページというのはあまり見たことがありませんが(たまに見ますが・・)、多く散見されるのが、h1のテキスト内容が全ページ同じという状態です。どういうことかというと、ヘッダーの左上に大体配置される、その会社のロゴ。画像が使われているケースが多いと思いますが、この画像に次のような書き方でh1を与えることができます。

<h1><img alt="会社名" /></h1>

これは、記述方法として間違ったものではありません。トップページでは、会社名をh1として示すことになるケースも自然だと考えます。しかし、全ページ会社名をh1にするのはどうでしょうか?

会社名はまず、titleに入れます。それ以上にh1で繰り返し用いる必要はないですし、文書構造としてみた時も、

株式会社○○

株式会社○○

となっているような感じで、おかしいといえます。
SEO対策として見た時にも、非常にデメリットが大きいと言えます。
先ほど、h1はページに2つ以上あってもよいという話をしたのは、ここに繋がります。もし、ロゴにh1を与えたいのであれば、トップページ以外は各ページもう一つh1があるべきと言えます。

私は、ロゴにはトップページで他にh1に相当する文言がないときくらいしかh1を与えません。定義として問題ないことにはなってますが、h1は1つである方が自然だと考えるからです。Googleはユーザーにとってわかりやすいかどうかを基準にしているので、とにかくそのことを念頭に考えるべきです。

h1の使い方

ここまで読んでいただけた方はわかるかと思いますが、h1はそのページの内容を表す文言であるべきです。titleも、会社名を入れるだけでなく、そのページの内容を表す文言を入れるべきなので、会社名以外の文言は重複しても構いません。位置づけとして、titleとh1は一部重複しているべきです。

titleは、あまり長くても表示されないので、その観点で適切な長さというのを意識する必要がありますが、h1はそれよりは長くても問題はないかと思います。

そしてきちんと、そのページに訪れたユーザーにパッと目に入るレイアウトにしましょう。そうすることで、そのページが検索意図に合ったページかどうかをユーザーが判断できますし、検索意図に沿っていると思えば読み始め、そうなるとGoogleが、そのページがそのユーザーの検索意図に沿っているんだな、という判断をする(=そのページの評価が上がる)という循環を生みます。

まとめ

h1の使い方について説明しました。h1の使われ方は、サイトの診断を依頼いただいた際のチェック項目の一つです。ご自分のサイトがどうなのか気になった方はぜひお問い合わせください。
SEOの基本を知りたい方はこちらをご参照ください。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。