h1タグとは、Webページの見出しを記述するHTMLタグのことです。ここでは、h1タグとは何か、h1タグの使い方、そしてh1タグがSEO対策において重要である理由について解説します。
h1タグとは?
h1タグとはHTMLの見出しタグのことで、ウェブページの見出しを記述するときに使用します。ウェブページのコードで、<h1></h1>タグに囲まれているのがh1テキストです。
ここでは、あるブログ記事を例にして、HTMLコード上でのh1タグの見え方と、実際のページ上での見え方を確認していきましょう。
この記事では、h1タグについて以下を解説します。
- SEOでh1タグが重要な理由
- ページにh1タグを追加する方法
- h1タグの適切な使い方
- h1タグの診断方法
SEOでh1タグが重要な理由
h1タグは、検索順位に影響する要素として正式に認められていませんが、SEOを考える上で重要なことには変わりありません。
その理由は主に3つあります。
1.h1タグがあると、検索エンジンがコンテンツを理解しやすくなる
読者と同じように、検索エンジンもh1を読むことでページやコンテンツの内容を理解できます。
Googleのジョン・ミューラー氏は、「自分のコンテンツを検索上位にランクインされたいのなら、コンテンツの理解しやすさが重要になる」と述べています。
つまり、コンテンツの中身がわかりやすい見出し(h1)になっていればいるほど、望ましいことになります。
このブログ記事のh1が良いお手本になるでしょう。
「初心者のためのキーワード検索ボリュームの解説」という見出しがあることで、読者がこの記事でどんな情報を得ることができるのか、正確に伝えることができます。
コードの中にコンテンツの内容を説明するようなh1タグを入れておくと、Googleがページの内容を認識しやすくなります。
2.h1タグはユーザーエクスペリエンスを向上させる
h1タグを使うと、読者がひと目でページの内容を知ることができるので、ユーザーエクスペリエンス (UX) の向上につながります。大半のウェブサイトでは、h1タグがそのページ内で一番大きなテキストになっています。
この「UXの向上」は、SEOの観点においても欠かせません。Googleは、UXがランキングファクター(検索順位に影響する項目)に入っていることを強調しています。
さらに、その下に続く補足的な見出し(h2タグやh3タグなど)を流し読みすることで、読者はページ全体をじっくり読む前にどんな内容が書かれているのかを知ることができます。そうすることで、コンテンツの価値を最初に評価できるのです。
h1タグをうまく活用できれば、ページ全体に階層構造ができ、探している情報がこのサイトにあると訪問者に知らせて、安心してもらうことができます。
ページ全体の階層構造は、以下のようになります。
左側の例は、ページにはっきりとした構造や秩序がありません。何がテーマなのか、非常にわかりづらくなっています。
右側の例では、このページ内で最も重要な見出しとしてh1タグを使っており、その下にh2、h3タグ、と続きます。
拾い読みをしつつ、内容をきちんと追いながら理解できる構造になっています。
3.h1タグはアクセシビリティを向上させる
h1タグ(そしてその他の見出し)を使うと、スクリーンリーダーを使用している視覚障害者の方々がページのコンテンツを理解しやすくなります。
スクリーンリーダーとは、コンピュータがテキストを読み上げるプログラム、または点字ディスプレイのことを指します。
こちらは、構成が整っていて、スクリーンリーダーが見出しを表示できるようになっているブログ記事の例です。
何億人という人々が視覚に何らかの障害を持っており、ウェブサイトの閲覧にスクリーンリーダーを使用しています。
WebAIMの調査では、スクリーンリーダーを使用しているユーザーに、ウェブページで情報を探すときにどのような方法を使うと便利かを質問しました。その結果、回答者の67.5%が、見出しを確認するのが便利であると答えています。
内容が伝わりやすいh1タグを作成し、見出し構造を整理することで、サイトのアクセシビリティをすぐに改善することができます。
ページにh1タグを追加する方法
ほとんどのコンテンツ・マネジメント・システム (CMS) で、h1タグを簡単に追加することができます。実際、CMSの多くがメタタイトルを自動的にh1に設定できるようになっています。
しかし、必ずしもメタタイトルをh1にしたいわけではありませんよね。
例えば、メタタイトルに自分の会社の名前を入れたとします。
あるいは、メタタイトルにセール内容(例えば「お買い得のローンチェア」など)が含まれていて、同じ文言をページ最上部でh1として繰り返すとスパムのように見えてしまう、といった場合もあるでしょう。
ここでは、WordPress、Squarespace、Wix、HTMLでh1タグを変更する方法を説明します。
WordPressでh1タグを追加する
WordPressテーマのほとんどは、ページタイトルをh1として使用するようコーディングされています。
見出しを変更したい場合は、自分でコードを編集する必要があります。
フォーマットし直したいテキストをクリックするか、ハイライトします。選択したブロックの上にツールバーが表示されます。
以下のようになります。
ツールバーの一番左にある段落マークをクリックします。それから「見出し1」を選択します。
WordPressでは、自動的にh2タグが選択されます。
見出しタグをh1に変更するには、ツールバーの「h2」をクリックして「h1」に変更します。
これで完了です。
Squarespaceでh1タグを追加する
Squarespaceで(ブログ記事に)h1タグを追加するのは、「記事タイトル」を入力するのと同じくらい簡単です。
ページのh1タグを変更したい場合はまず、h1にしたいテキストを選択します。
その後、ツールバーの一番左にある書式ボタンをクリックします。
次に「見出し1」を選択します。
以下のようになります。
これで完了です!
Wixでh1タグを追加する
すでにご紹介した他の2つのCMSと同様、Wixでも自動的にブログ記事のタイトルがh1タグになります。
他のページと同じように、h1に変更したいテキストを編集できます。
まず、編集したいテキストを選択します。
次に、上にある「テキストを編集」ボタンをクリックします。
ドロップダウンメニューの「スタイル」をクリックします。
以下のようになります。
次に「見出し1」を選択します。
これで完了です!
h1タグの適切な使い方
ここからは、SEOの改善に役立つh1タグの適切な使い方を6つご紹介します。
1.1ページで使用するh1は1つのみ
ページ内で使用するh1を1つだけにすると、階層秩序が生まれ、ページの論理構造が明確になります。
そうすることで、読者(とスクリーンリーダを使用している人たち)がページを拾い読みして内容を理解しやすくなります。
h1はメイントピック、もしくは見出し用です。h2はその他の重要な小見出し用です。h3は、h2を補足する小見出し用です。h3以降も同様に続いていきます。
各ページには、メイントピックと見出しが1つだけになるようにしましょう。そして、それがページ内で唯一のh1になるようにします。
2.重要なページすべてにh1があることを確認する
h1タグは最も重要な見出しにつけますので、重要なページにはすべてh1を入れておくほうがよいでしょう。
サイト内で、重要なページとはどれでしょうか?それを決めるのはあなた次第ですが、「Googleの検索上位にランクインさせたいページ」と考えてみるとよいかもしれません。
以下の方法で、h1がない、または空になっているページを見つけることができます。
- SemrushのSite Auditツールを開く
- ホームページのURLを入力し、「診断を開始」をクリックする
- 「問題」タブをクリックする
- 検索バーに「h1」と入力する
- h1がないページに関する警告をクリックする
3.ターゲットキーワードを含める
Googleのランキングファクターに関する研究では、h1タグに主要キーワードを含めることもランキングファクターになっていることが示唆されています。
Googleは、コンテンツが検索者のクエリに関連しているかどうかを判断するのにメタタイトルとh1を利用しています。
つまり、検索クエリと関連性の高いh1があると、そのページはそのクエリの検索結果として上位にランクインする可能性が高くなります。
また、ターゲットキーワードを含めることで、ページのトピックが読者に分かりやすくなります。
4.h1タグを60文字以内に収める
見出しはわかりやすく簡潔に書かれているものが望ましいです。それがh1タグなのか、他の見出しなのかは関係ありません。
メタタイトルタグと同じく、50文字~60文字の間に収めることが理想です。
なぜでしょうか?
CMSの多くが、h1タグとtitleタグで同じ文言を使用しています。また、前述したように、Googleはtitleタグをh1タグに入れ替えることがあります。
それに、下の図のようにGoogleの検索結果で見切れた表示になってしまうことは避けたいですよね。
技術的には、h1タグの長さに文字数制限はありません。しかし、60文字以内に収めるのがベストです。
5.h1タグをTitleタグと似たものにする
メタタイトルタグは、ウェブページのタイトルを決めるのに使用されるHTML要素です。サイトのコードの<head>セクションの下に<title>として記述されているのがタイトルタグです。
titleタグはh1タグと混同されることが多いです。これは、どちらのタグもページの内容を表すものだからです。
この2つのタグの一番大きな違いは、どこで使われるかです。
Titleタグは、検索エンジン結果ページ (SERP) で使われます。そして、ウェブブラウザーのタブの一番上に表示されます。このタグはそれ以外には使われず、ウェブページでは表示されません。
ブラウザーのタブとSERPでは、メタタイトルはこのように表示されます。
h1タグは、ユーザーが実際にウェブページ上で目にするもので、大きなテキストで表示されることが多いです。このタグは、SERPには表示されません。
こちらは、h1を使用した当社ブログ記事の一つです。
検索結果に不正確な記事タイトルが表示されないよう、Googleはh1タグとtitleタグの文言を一致させることを推奨しています。
一言一句同じにする必要はありませんが、類似の文言にしておくほうがよいでしょう。
以下のようになります。
ユーザーがページを訪問し、検索した内容とまったく違う(そして関連していない)h1を見たら、だまされたと感じてしまうでしょう。それだけは避けるのがベストです。
6.検索意図を満たすh1タグになるよう最適化する
検索意図とは、ユーザーが何かを検索するときの最初の目的のことです。
h1は、検索意図を満たすページであることが読者にすぐに伝わるようなものにする必要があります。つまり、読者が求めているコンテンツを提供できることが重要です。
検索意図を満たすことは、Googleの第一目標にもなっているくらい重要な要素です。つまり、検索上位にランクインしたいなら、検索意図を満たすことが一番の目標になります。
キーワードごとに検索意図を特定するには、Googleでそのキーワードを入力し、どんな情報が表示されるかを分析します。
例えば、“コンテンツマーケティング”という検索結果で上位に出てくるのは、コンテンツマーケティングとは何かを説明するページです。
ここで出てくる記事には、深掘りした内容のものはありません。また、何かの商品を販売しようとしているページもありません。この結果からわかるのは、このキーワードの検索意図は情報収集であり、初心者向けに書かれた記事が求められていることがわかります。
つまり、「情報収集」という検索意図を満たすh1(そしてそれに続く内容)を書く必要があります。
もっと素早く検索意図を特定できるのが、キーワードの概要ツールを使ったやり方です。
キーワードを入力し、「検索」をクリックします。
入力したキーワードについて、意図を含むさまざまな情報が表示されます。
h1タグの診断方法
h1タグ関連のエラーについて、ウェブサイトをまとめてチェックする場合は、サイト診断が便利です。
Site Auditを開きます。ホームページのURLを貼り付け、「診断を開始」をクリックします。
このツールでは、お客様のサイト全体の健全性がダッシュボードに表示されます。「問題」タブをクリックすると、エラーのリストが表示されます。
h1タグに関連したエラーだけを表示させたい場合は、検索バーに「h1」と入力します。
これで、h1関連の問題があるページをすべて確認することができます。まずはエラーを修正しましょう。完了したら次は警告、その次に注意を修正していきます。
月に1回診断を行い、確認すべき新しい問題はすべて通知を受け取れるようにしておくことをお勧めします。
以下の方法で定期的なレポートを設定できます。
Site Auditダッシュボードの右上にある「設定」ボタンをクリックします。
Site Auditの設定画面を下にスクロールし、「スケジュール」に移動します。
以下のようになります。
次に、ポップアップが表示され、レポートを実行する頻度を選択できます。
お好みの日程に設定します。スケジュールを設定したら、ポップアップの一番下にある「メールを送信」オプションを忘れずにクリックします。「保存」をクリックします。
こうすることで、あらゆる問題を修正し、SEO対策を順調に進められるようになります。