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

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

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

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

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

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

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

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

h1タグとは

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

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

  1. h1
  2. h2
  3. h3
  4. h4
  5. h5
  6. h6

と、見出しのタグはあり、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 対策 観点から、まとめていきます!

  1. SEO 対策 キーワード を 設定
  2. ページ 内容 と 整合性 を つける
  3. h1タグ 文字数 は40文字程度まで
  4. hタグの中で、最初に使う
  5. 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 使い方 業務アプリ 開発 を 簡単に モバイルアプリ制作に

おすすめ SEO対策 関連記事

検索インテントとは 検索意図 を 考慮し SEO コンテンツ 制作 調査方法は?
https://saras-wati.net/seo/search-intent/

【SEO】ドメインパワーとは 調べ方 目安 ドメインパワー アップ 方法 を 網羅!
https://saras-wati.net/seo/about-domain-power/

【AI】SEO 自動分析 ツール SEARCH WRITE サーチライト で コンテンツマーケティング強化
https://saras-wati.net/seo/about-search-write-seo/

Chrome キーワードサーファー キーワード調査 選定ツール が SEO対策 に 便利
https://saras-wati.net/seo/chrome-keyword-surfer/

共起語とは|調べ方 SEO対策 ライティング 方法 使い方 かんたん 解説
https://saras-wati.net/seo/co-occurrence-words-seo/

Google 低品質コンテンツ 基準 探し方 ページ削除 の SEO 対策
https://saras-wati.net/seo/google-low-quality-content/

moz seo 対策 ツール 使い方 を 簡単解説!ドメインオーソリティ を 知ろう
https://saras-wati.net/seo/moz-seo-tools-howto/

【無料】Screaming Frog SEO Spider 使い方 webサイト ページ一覧 自動作成
https://saras-wati.net/seo/screaming-frog-seo-spider-howto/

【Google検索に掲載されやすく】robots.txt 書き方 見方 設定方法 SEO ガイド
https://saras-wati.net/seo/robots-txt-setting-howto/

サイトマップ 作り方 ワードプレス SEO で 集客 効果 改善。おすすめ ツールは?
https://saras-wati.net/seo/sitemap-howto/

【ページスピード改善】Lazy Load 使い方 プラグイン メリット デメリット SEO 解説
https://saras-wati.net/seo/lazy-load-howto/

サーチコンソール 使い方 Google 検索 インデックスに 登録 設定 方法も解説
https://saras-wati.net/seo/search-console-knowhow/