社長の夢実現への道

SEO対策を考慮したH1タグの使い方

投稿日：

SEO対策を考慮したH1タグの使い方

WordPressなどのCMSを利用すると、タグの意味が解らなくても、ホームページが制作できてしまいます。

しかし、タグの意味が解らないと、細かな設定をしたり、入念にSEO対策をしたりすることができません。

そういったホームページ制作のレベルが上がってくるとHTMLタグの意味や使い方を覚える必要に迫られます。

HTMLタグの使い方を覚える方法としては、ホームページや書籍を見ながら、タグの意味や使い方を一つずつ覚えていくことになります。

H1タグの概要については、ホームページや書籍などのリファレンスをご覧ください。この記事では、H1タグの意味や使い方について、他にはないマニアックなことをご紹介いたします。

H1タグの意味は？

H1タグは、数字の1が入っています。Hは、Headlineの略で「見出し」です。数字は、「何番目に大きな見出しか？」ということです。H1タグは、一番大きな見出しの意味になります。

H1タグの他にも、H2～H6まで、合計6種類あります。それらを総称して、「Hnタグ」と言われることもあります。

H2は2番目、H3は3番目に大きな見出しです。見出しタグはH6の6段階目までありますが、私は6段階目まで使用するような超大作のページを作成したことはありません。

H1が大見出し、H2が中見出し、H3が小見出しという具合の階層構造になっています。

ホームページを学び始めた人によくある勘違いですが、「上から順番にH1からH6まで見出しが入る」と思っている人もいるようです。そういった人からは、「上から7番目や8番目の見出しはどうしたらいいのですか？」と聞かれることがありますが、勘違いを説明するのに苦労します。

H1はSEO対策でどのくらい重要か？

H1タグは、SEO対策で重要なタグなのですが、順位付けをするならば、私個人としては3番目に重要だと思っています。

1番目がTITLEタグ、2番目がMETA-Descriptionタグ、そして3番目がH1タグです。

Googleでネット検索すると、タイトルと説明文が一覧で表示されます。このタイトルと説明文には、必ずと言ってよいほど、ネット検索で用いられたキーワードが入っています。

また、Googleでネット検索をしたときに、TITLEタグに設定された文字ではなく、H1タグに設定された文字が、検索結果のタイトルとして表示されることが散見されます。

そういったことからも、H1タグはSEO対策にとって重要なタグですので、上位ヒットを狙うキーワードをH1タグの中に入れるようにしてください。

TITLEタグとH1の関係は？

例えば、今ご覧になられているこのページでは、TITLEタグとH1タグの内容は、それぞれ次のようになっています。

  • TITLEタグ・・・「SEO対策を考慮したH1タグの使い方｜チームコンサルティングIngIng(WWAVE株式会社)」
  • H1タグ・・・「SEO対策を考慮したH1タグの使い方」

H1タグの使い方をネット検索で調べている人にとっては、『チームコンサルティングIngIng(WWAVE株式会社)』という文字は、あまり関係がない内容です。書いている人が誰であれ、要するにH1タグの使い方を知ることができたら良いわけです。

そこで、Googleは「H1タグの内容を検索結果に表示させた方が、ネット検索者にとって使い勝手が良いのではないか？」ということで、検索結果のタイトルにH1タグの内容を記載するようになったのだと思います。

では、「TITLEタグの内容から『チームコンサルティングIngIng(WWAVE株式会社)』を消したらいいのか？」と言われると、私としては会社を代表して原稿を書いているので消したくありません。

そこで、TITLEタグとH1タグの内容を少し変えると良いかもしれません。例えば、このページであれば、次のような具合です。

  • TITLEタグ・・・「SEO対策を考慮したH1タグの使い方｜チームコンサルティングIngIng(WWAVE株式会社)」
  • H1タグ・・・「H1タグはSEO対策で大事！？SEO対策を考慮したH1タグの使い方」

こうすると、TITLEタグに設定されたページタイトルよりも、H1タグに設定された見出しの方が、キャッチ―な感じです。H1タグの内容がGoogle検索での検索結果画面に表示されたら、ネット検索者は、クリックしやすくなると思います。

このホームページはWordPressを利用しています。WordPressを利用すると、テーマの設定にもよりますが、基本的にTITLEタグとH1タグの内容は、投稿タイトルと同じ内容が入ります。

この例のように、TITLEタグとH1タグの内容を変えたい場合は、カスタムフィールドを利用しIF文で切替をすると良いでしょう。このホームページもそのように設定しています。

トップページにH1がないホームページ

下層ページには、明らかにページ毎のタイトルがあります。そのタイトルがH1タグに設定されるようになっています。

しかし、トップページには下層ページのようなタイトルが存在しません。トップページには、下層ページのようなタイトルが存在しないので、「H1タグは設置しなくても良いのか？」と言えば、そうではありません。

その理由は2つあります。

  1. SEO対策でH1タグを設置しないのはもったいない
  2. トップページには、ホームページ全体のタイトルがある

では、どこにH1タグを設置したら良いのか迷います。私がホームページ制作を担当するときは、メイン画像にH1タグを設置するようにしています。

ロゴのところでも述べたように、トップページのメイン画像には商品名やサービス名が記載されています。そこをH1にします。

ページ中にH1を複数使用しても良いか？

「Living Standard」によると、H1タグの個数については言及されていないので、複数設置しても良さそうです。

なぜ、「H1タグはページ中に1個だけ」というルールが言われているのか。それは、XHTMLまでは、「H1はページ中に1個まで」とルールが決められていたからです。HTML5からH1の個数制限が正式になくなりました。

よくよく考えてみると、ページ中で最も大きな見出しは、ページタイトルです。今ご覧になられているこのページのように、タイトルがページ最上部に設置されている場合、このページタイトルと匹敵するような大見出しが、このページ中に別途存在するのかと言われると、存在しません。

つまり、H1タグを複数使用しても良いとしても、H1タグは1個にならざるを得ないのです。

そういったことから、私がホームページ制作を担当するときは、H1タグをページ中に1個しか使用しないようにし、見出しタグは実質的にH2から用いるようにしています。

SEO対策も気になるところですが、このようにH1タグやH2タグなどを使用していても、上位ヒットさせることに成功しているので、そのように使用し続けています。

H1にサブタイトルを入れたい場合の設定方法は？

ページタイトルにサブタイトルを使用したい場合があります。例えば、次の図をご覧ください。

ページタイトルにサブタイトルを使用したい場合

このページのタイトルとサブタイトルは、それぞれ次のようになっています。

  • タイトル・・・「提案力・効果で選ぶならIngIngのWeb集客コンサルティング」
  • サブタイトル・・・「ウェブマーケティング手法を駆使した即効性の高いサービス」

これらにタグを付けると、次のようになります。

サブタイトルの記述例 
<p>ウェブマーケティング手法を駆使した即効性の高いサービス</p>
<h1>提案力・効果で選ぶならIngIngのWeb集客コンサルティング</h1>

ここで、Pタグは段落を表します。この2つの文章は関連性があるので、見出しとサブタイトルを関連付けたい場合は、次のようにHGROUPタグを用います。

HGROUPタグを用いたサブタイトルの記述例 
<hgroup>
<p>ウェブマーケティング手法を駆使した即効性の高いサービス</p>
<h1>提案力・効果で選ぶならIngIngのWeb集客コンサルティング</h1>
</hgroup>

W3C／HTML5では、HGROUPは廃止されていましたが、WHATWG／Living StandardではHGROUPタグが復活しています。

次のように、HGROUPタグではなく、HEADERタグを用いてサブタイトルをマークアップする方法もあります。

HEADERタグを用いたサブタイトルの記述例 
<header>
<p>ウェブマーケティング手法を駆使した即効性の高いサービス</p>
<h1>提案力・効果で選ぶならIngIngのWeb集客コンサルティング</h1>
</header>

HGROUPの方がサブタイトルとして明確なマークアップになるので、私はHEADERタグよりもHGGROUPの方が正しいのではないかと思います。

H1タグの用い方として、次の例文のように、H1タグの中にサブタイトルを入れ込んでしまい、サブタイトルをSPANタグで囲む場合があります。この記述方法は、よく見かけます。

SPANタグを用いたサブタイトルの記述例 
<h1><span>ウェブマーケティング手法を駆使した即効性の高いサービス</span><br>提案力・効果で選ぶならIngIngのWeb集客コンサルティング</h1>

この記述方法は、間違っていると思います。つまり、サブタイトルの内容は大見出しに入らないものがサブタイトルとして記述されており、それを強引にH1の中に入れてしまうことは、明らかに、マークアップとして間違いです。

そして、H1の長さが長くなりすぎてしまい、検索エンジンからの評価が下がってしまう可能性があり、SEO対策としても良くありません。

昔からの名残で、HGROUP内のサブタイトルにPタグではなく、H2タグ（タイトルの見出しタグ番号の次の番号）を使用する場合が見受けられることがあります。次のような具合です。

H2タグを用いたサブタイトルの記述例 
<hgroup>
<h2>ウェブマーケティング手法を駆使した即効性の高いサービス</h2>
<h1>提案力・効果で選ぶならIngIngのWeb集客コンサルティング</h1>
</hgroup>

この記述方法は、見出しタグの用い方が明らかに間違っていると思います。なぜなら、サブタイトルは見出しではなく、あくまでも見出しを補佐するサブタイトルだからです。このタグの使い方ですと、検索エンジンが混乱して、サブタイトルのところを小見出しと認識してしまう可能性があります。サブタイトルは、無難にPタグを用いた方が良いと考えます。

以上、H1タグのマニアックな設定方法をご紹介いたしました。H1タグは、SEO対策でとても大事なタグですので、入念に考えて設定すべきものです。

この記事では、私自身がHTMLタグを正しく用いようとする意気込みと、正しいHTMLマークアップによってSEO対策が強くなることが、お伝えできたかと思います。

正しいHTMLマークアップでSEO対策にも強いホームページ制作なら、当社にお任せください。

この記事の著者

平野亮庵

経営・集客コンサルタント
平野 亮庵 (Hirano Ryoan)

国内でまだSEO対策やGoogleの認知度が低い時代から、検索エンジンマーケティング（SEM）に取り組む。SEO対策の実績はホームページ数が数百、SEOキーワード数なら数千を超える。オリジナル理論として、2010年に「SEOコンテンツマーケティング」、2012年に「理念SEO」を発案。その後、マーケティングや営業・販売、経営コンサルティングなどの理論を取り入れ、Web集客のみならず、競合他社に負けない「集客の流れ」や「営業の仕組み」をつくりる独自の戦略系コンサルティングを開発する。

プロフィール詳細


「社長の夢実現への道」一覧に戻る