h1タグ複数 OK ？h1 タグ使い方 SEO 対策でのメリットわかりやすく

2022年5月30日
2022年4月27日
seo
web制作, 初心者向け, ノウハウ, ワードプレス, google, SEO, コンテンツマーケティング

h1タグ使い方を解説します。HTML の h1タグは、SEO対策でのメリットも大きいタグです。使わないと損ですが、h1タグ複数使ってもいいの？などの話や、使い方がわからないという方向けに、わかりやすく解説していきます。

h1タグは、HTML という webサイトを作るときに使用されるプログラムのタグです。見出しでもっとも大きいサイズになるため、基本的には、titleタグ同様、重要視されるタグとして扱われています。

そのため、重要なタグであるがため、Google などの検索エンジンのクローラーも、HTML 内にある h1タグは、重要なタグとして認識しており、ここで記載されている文字データなどは、webページのベースとなるキーワードとして認識されています。

しかし、この理屈を元に SEO対策上、この h1タグを頻発すれば、対象のキーワードが、検索結果の上位に表示されると思っている方も多いのが現状です。しかし、本当に SEO対策で効果があるものなのでしょうか？

この記事ではホームページへの集客として重要な SEO対策の要となっている h1タグについて解説をいたします。それゆえ、この記事は、企業の web制作やマーケティング部門の方向けだけでなく経営企画営業企画部 EC web広告代理店 web制作会社とやりとりする方、そして新規事業開発のご担当者にもおすすめの記事となっています。

h1タグについての理解を深めて、検索エンジンとのコミュニケーションを、より優位に進められるようにしていきましょう。

1 h1タグとは
2 h1タグ設定方法
3 h1タグ SEO 効果
- 3.1 検索結果ページの記載が変わる！？
4 h1タグ使い方ノウハウ
5 h1タグ titleタグ比較
- 5.1 h1タグ titleタグ同じ内容でもよい？
6 h1 タグ複数 OK ?
7 h1タグ画像 OK ?
- 7.1 h1タグ画像設定なら ALTタグ
8 見出しタグ h1 ～ h6 解説動画
9 まとめ h1タグ使い方を正しく把握して SEO対策効果を高め集客へ
10 おすすめ SEO対策関連記事

h1タグとは

h1タグとは、ホームページ制作で活用されるレイアウト言語のHTMLにて、見出しタグとして使われ、その見出しタグの中でも、もっとも大きいフォントサイズとして扱われるタグになります。

h1タグの、hは、heading、見出しを指します。

と、見出しのタグはあり、h1から下に重要度が下がっていくような感じです。

h1タグは、webページの内容を要約したタイトルが、h1タグに挟まれるようになっています。titleタグは、表面上見えませんので、h1タグが、実質、ページのタイトルのように設定されることが多いです。

その結果、見出しタグの中で、h1タグがもっとも重要な扱いをされます。

それゆえに、googleを始めとした検索エンジンは、h1タグを重要視しており、このh1タグの中身に入るテキストに対して、情報収集します。そして、h1タグは、SEO上重要なタグの1つとして扱われます。

実際にGoogleは、h1について、

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.
ーー見出しは、あなたとあなたのウェブサイトにとって何が重要かを、Googleとユーザーの両方に伝える機会を与えてくれます。見出しタグの数字が小さいほど、Googleとユーザーの目にはより重要なテキストに映ります。

引用 Google Search Central Blog
Holiday source code maintenance: Website clinic for non-profits
https://developers.google.com/search/blog/2010/12/holiday-source-code-housekeeping?hl=en

と、GoogleのブログでPRしています。

h1タグ設定方法

h1タグの設定方法は簡単です。

＜body＞
＜h1＞見出し、タイトルテキスト＜/h1＞
＜/body＞

というように記載します。

htmlの記述なので、h1タグ書き方は難しくありません。

※＜＞は全角にわざとしています。実際は半角です。

h1タグ SEO 効果

h1タグにおけるSEOの効果について解説します。

上述のようにh1タグは、Googleなどの検索エンジンが重要視するタグなので、SEO対策において、効果が期待できるタグとなっています。

ただ、絶対、h1タグを設置すれば、SEO対策上、効果が出るものではないので、ご注意くださいませ。

検索結果ページの記載が変わる！？

h1タグは、実は、検索結果で表示されるタイトル文言に関係します。

通常、Googleなどの検索エンジンの検索結果では、

titleタグをベースに、Googleが、検索結果に表示されるタイトルを作成します。

しかし、Googleが、webページ内から、titleタグを見つけられなかったり、そもそも、titleタグがなかった場合、h1タグをベースに、タイトル名を自動で作ります。

また、wordpressやムーバブルタイプなどのCMSの設定によっては、h1が検索結果に表示されるタイトルになるケースもあります。

h1タグで使用するテキストは、クリックされやすくなるような文言を入れておくことを推奨します。

検索結果でのクリック率をあげて、自社サイトや自社ブログへの誘導効果を高めてくれる可能性が大です！！

h1タグ使い方ノウハウ

h1タグ使い方を SEO 対策観点から、まとめていきます！

SEO 対策キーワードを設定
ページ内容と整合性をつける
h1タグ文字数は40文字程度まで
hタグの中で、最初に使う
CSSでデザイン

というのが、h1タグの基本的な使い方です。

個別にh1タグの使い方を解説します。

SEO 対策キーワードを設定

h1タグは、Googleなどの検索エンジンが重要なタグとして扱っています。

それゆえ、h1タグの中には、集客したい！検索後にアクセスして欲しいキーワードを入れましょう。

たとえば、接骨院のwebページなら

接骨院肩こり膝改善などのキーワードや、地名キーワードをいれましょう。

検索キーワードと、h1タグに記載されているキーワードの一致で、アクセスしてきてくれたユーザーにとっても、コンテンツを読む気にしてくれます。

なお、キーワードの詰め込み過ぎはやめましょう。また、不自然な日本語にならないようにも注意しましょう。

同じキーワードを2回以上入れるのはやめましょう。

良くあるミステイクとしては、

東京で接骨院に行くなら、XX接骨院

みたいなh1タグですが、接骨院、重複しています。やめておきましょう。

下手をすると、Googleから、SEO対策用のスパムとして認定されてしまい、Googleペナルティをもらう可能性もあります。

ページ内容と整合性をつける

h1タグは、最上位の見出しです。

当然ですが、見出しなので、ページと内容が一致していないとおかしくなります。

それゆえ、ちゃんと、コンテンツの内容と、h1タグの内容は整合性を持たせましょう。トレンドキーワードを無理やりh1タグに入れようとするなどは、スパム行為になりかねませんので、ご注意ください。

h1タグ文字数は40文字程度まで

h1タグは、titleタグとは、異なります。しかし、Googleのクローラーが、titleタグを見つけられなかった場合、h1タグをベースに、タイトル名を自動で作るので、基本的には、titleタグと同じように考えましょう。

そうすると、スマホでの集客を意識すべき時代ですので、おのずと、h1タグの文字数の最大値は決まってきます。

スマホファーストで、h1タグの文字数を考えると

スマホ（モバイル）の場合、30～41文字程度が最適となります。

実際に、スマホで、Googleなどの検索結果の文字数をカウントしてみるといいと思いますよ。

半角は0.5文字、全角は1文字としてカウントされるようなので、ベースとして、h1タグの文字数は、その程度にしておきましょう。

hタグの中で、最初に使う

hタグは、見出しのタグです。HTMLの構造上、それゆえ、h1タグは、最初に使うタグとして設定されています。

これを踏襲することで、文法的にもOKなので、Googleも情報を探しやすくなります。

ゆえに、基本は、h1からh6まで順番に入れ子構造で、htmlファイルの記述をするように心がけましょう。

もちろん、h6まで、全部書かないといけないわけではなく、h3まででよいです。

Google などの検索エンジンクローラーも、基本的には、h3までしか重要視していなさそうですしね。

ちなみに、入れ子構造とは、見出しの中に、小さな見出しを複数含めるような構造のことを指します。

CSSでデザイン

h1タグは見出しの最上位です。それゆえ、見やすい場所に置かれます。

ということは、UIを良くしておくことは、そのページを読む人にとって、そのページを継続して読み続けよう！というモチベーションにつながります。

ゆえに、CSSで、h1タグのデザインをしておくべきです。

見映えが悪いサイトは、UIが悪い⇒UXが良くない⇒アクセスが減る⇒Googleが評価を落としていく、という悪いスパイラルにはまります。

h1タグ titleタグ比較

よく似ている役割のh1タグ titleタグ。今回は、h1タグ titleタグ比較してみます。

最大の違いは、

h1タグはユーザーが画面で見る
titleタグはユーザーはあまり見ない

という違いです。

このほかにも、HTMLの記述方法として

h1タグは HTML bodyタグ内にマークアップ
titleタグは HTML headタグ内 meta として記述

という記述方法の違いもありますね。

ここらへんは、理解しておくと、h1タグが重要なことがわかります。

h1タグ titleタグ同じ内容でもよい？

たまに、相談される話で、h1タグ titleタグ同じ内容でもよい？という話。

答えは、ややYESです。

同じでも、問題はないです。

役割的には、似ていますから。

ただ、実際は、変えておいた方がいいケースも多いです。

たとえば、titleタグには、社名を入れるケース。

h1タグに、社名をわざわざ入れることは少ないと思います。

こういう観点から、本来的には、別にしておいた方がいいといえます。

h1 タグ複数 OK ?

たまに、webページ内で、h1 タグ複数設置しているケースがあります。

これは、OKなことなのでしょうか。

結論から言うと、h1 タグ複数 OK は OK です。

ただし、あまりたくさんh1タグを入れると、ペナルティとなる可能性があります。SEO上、スパム行為とみなされるかもしれないためです。

h1タグが複数だとSEOで不利になるわけではないですが、入れ過ぎはだめです。

また、入れ子構造をおかしくするような、複数のh1タグも、SEO対策上、不利になりかねません。なぜなら、Googleなどの検索エンジンのクローラーによる情報取得がわかりにくくなるからです。

1ページに使う h1 要素は1つだけにする方が、シンプルでいい気がします。

ただ、HTML5では、ページ上で複数の h1 要素を使うケースもありますので、そこらへんは、意識して、取り組んでいった方がいいかもですね。

h1タグ画像 OK ?

h1タグに画像を使っても、SEO上、問題がないかどうか？

これもよく相談されます。

基本的にはh1タグに画像を使っても問題ありません。

ただし、Googleなどの検索エンジンのクローラーが、読みやすいのは、テキストです。そのため、h1タグに、画像のimgタグを設定するよりも、テキストをh1タグとする方を推奨はしています。

ページレイアウト、UI上、仕方ないケースもあるかもですけどね。

h1タグ画像設定なら ALTタグ

h1タグに画像を設定するなら、ALTタグは、必ず入れましょう！

alt（オルト）タグは、画像のimgタグで、画像が表示されないとき、代わりに表示されるテキストです。

ユーザーにとって、プラスになるものですので、検索エンジンも、ここのテキスト情報は情報収集するようになっています。

なので、ぜったい、h1タグ画像設定なら ALTタグをいれましょう！

見出しタグ h1 ～ h6 解説動画

今回は HTML入門講座の動画から、見出しタグ h1 ～ h6についての解説動画をご紹介させていただきますね。

正しい、HTMLの知識は、SEO対策でも重要ですからね。

クリエイターのための動画かもですが、

この動画は、再生回数も5,000回を突破している、HTMLについての動画です。SEO対策上の話はおいておいて、見出しタグ h1 ～ h6 の基礎知識が手に入ります。

まとめ h1タグ使い方を正しく把握して SEO対策効果を高め集客へ

h1タグの使い方について、解説しました。h1タグ正しい使い方、イメージできましたでしょうか？

SEO では h1タグは hタグ(見出しタグ)の中で最重要なものです。Googleなどの検索エンジンでの検索ランキングにおいて、上位に表示されるためには、重要な知識といえましょう。検索順位を上げるためには、h1タグ使い方を把握して、しっかりと、ホームページ内の各ページで活用していきましょう。

この記事では、h1タグとは何かといった基礎知識、SEO効果などについて解説してきましたので、活用イメージがついていれば幸いです。

h1タグの使い方の事例としては、大手企業サイトなどを見ていくと、こういう使い方しているんですね！というかんじでわかってくると思います。

webページにも、当然、さまざまな事例がありますので、ソースから、h1タグ使い方を見ていくのもいいと思いますよ。こういった具体的な事例をもとに、h1タグへの理解を深めていきましょう。

ノーコード Platio 使い方業務アプリ開発を簡単にモバイルアプリ制作に

h1タグ複数 OK ？h1 タグ使い方 SEO 対策でのメリットわかりやすく

h1タグとは

h1タグ設定方法