渚ナギサコーポレーションSEO・LLMO・AEO・AIOのお悩み、全部お任せください。

全国対応打ち合わせから納品まで
メール・チャットで完結します

LINEで
相談する
サイトを
見てもらう
サイトを見てもらう(無料)LINEで相談
COLUMN 72 / サイト設計

h1タグと見出しの付け方:製品ページで主題と本文の階層を伝える方法

公開 2026.10.22文・ナギサコーポレーション

この記事の答え

  • h1はページの主題、h2は主な節、h3は節の中の話題として、本文の関係を示す
  • Googleに理想の見出し数はない。個数をそろえるより、読む順番と内容を確かめる
  • 文字を大きくするだけでは見出しにならない。保存後のHTMLと読み上げも確認する
目次

h1タグとは、HTMLで最も上位の見出しを表し、ページの主題を伝えるために使う要素のことです。h2・h3などの見出しタグと組み合わせ、本文のどこに何があるかを示します。

製品ページを直すなら、見出しだけを上から書き出してください。何の製品か、仕様はどこか、相談前に何を確かめるかが分かるかを読みます。検索語を足す前に、主題と本文の関係を整えます。

h1の個数だけを採点する作業ではありません。題名が製品名なのに、次の見出しが会社の理念ばかりなら、読む人は仕様を探せません。まず製品を選ぶ順番に沿って、今ある説明の置き場所を決めます。

h1・h2・h3は、どう使い分ける?

本文全体の題をh1、主な節をh2、その節に属する小さな話題をh3にします。数字が大きいほど、下位の見出しです。HTMLにはh6までありますが、短い製品紹介なら深い階層を無理に作る必要はありません。

要素 製品ページでの役割 見出し名の例
h1 ページの主題 搬送装置向け樹脂ガイド部品
h2 主な確認事項 材質と使用条件
h3 確認事項の内訳 材質の選定で確認すること

表は見出しの設計例です。特定の製品仕様や自社の製作実績を表していません。見出しに「使用条件」⁠と書いたら、その下には担当者が確認した条件が必要です。

下位の節が終わり、別の大きな話題へ移るときはh2へ戻ります。h3を使った後、次は必ずh4にするという連番ではありません。目次の大項目と小項目の関係で考えます。

HTMLの形は次のようになります。実際の本文を省略した、構造だけの例です。

<h1>搬送装置向け樹脂ガイド部品</h1>
<h2>材質と使用条件</h2>
<h3>材質の選定で確認すること</h3>
<h3>使用環境を伝えるときの項目</h3>
<h2>製作相談に必要な資料</h2>

「材質と使用条件」⁠の本文が一段落で済むなら、h3へ分けず、そのまま説明できます。階層を深くするために、短い説明を細切れにしないでください。

Googleは見出しの数を順位の基準にしている?

GoogleのSEOスターターガイドは、見出しの数と順序について、理想の個数はないと説明しています。数をそろえれば順位が上がる、という説明ではありません。

公式文書の表現は次のとおりです。

There's also no magical, ideal amount of headings a given page should have.

見出しに魔法のような理想の個数はない、という意味です。同じ節は、意味に沿った順序が読み上げソフトに役立つことも述べています。検索で処理できることと、人が迷わず読めることを区別して設計します。

「h1が一つ増えたから順位が下がった」⁠と⁠、個数だけで原因を決めることも避けます。このガイドの説明を「すべての見出しをh1にしてよい⁠」⁠と読み替える理由もありません。読み手にとって主題と各節を見分けられるかを確かめます。

私たちが通常の製品ページを編集するなら、本文の主題を一つのh1で示し、仕様や相談条件をh2以下に分けます。これは編集上の方針で、Googleが定めた順位獲得の個数ではありません。

読み上げでは、なぜ階層が必要?

W3Cの見出しの解説は、見出しが内容の構成を伝え、支援技術によるページ内の移動に使われると説明しています。目で太い文字を探す人だけでなく、見出しを順にたどる人にも本文の構成を伝えるためです。

h2の直後を、字を小さく見せたいという理由でh4にすると、間の階層があるように受け取られます。W3Cは、可能な限りこうした段階の飛びを避けるよう案内しています。h3の節を閉じて次のh2へ戻ることとは違います。

見出しの文字が同じでも、「特徴」「特徴」「特徴」⁠と続くと移動先を区別できません。「取付部の形状」「材質の選び方」「図面の送付方法」のように、読む内容が分かる名前にします。

大きな文字を置いただけの段落も点検します。見た目では見出しでも、HTMLが普通のp要素なら、見出し一覧には入りません。反対に、文字を小さくしたいだけで本文へh3を使うと、見出しとして読み上げられます。

製造業の製品ページなら、どんな見出しにする?

次は、樹脂ガイド部品の製品ページを想定した構成例です。公開済みの製品や受注条件ではなく、説明を並べるための例です。

h1 搬送装置向け樹脂ガイド部品
  h2 対応する用途と、相談が必要な条件
  h2 材質と使用環境
    h3 材質の選定で確認すること
    h3 使用環境を伝えるときの項目
  h2 寸法図と取付部の確認
  h2 製作相談に必要な資料

営業が問い合わせのたびに使う資料と照合し、実際に載せられる節だけ残します。材質ごとの説明がまだ確認できないなら、見出しだけ作って「幅広く対応」⁠と埋めないでください。技術担当へ確認する項目として戻します。

「製品の特徴」だけでは、仕様を確認できるか判断しにくくなります。特徴の中身が取付形状なら、その名前を見出しにします。会社の評価を繰り返すより、設計者が探す対象を示します。

ただし、見出しを「樹脂ガイド部品 材質」「樹脂ガイド部品 寸法」⁠と単語列にする必要はありません。h1で対象が分かるなら、下の節では自然な文で確認事項を伝えられます。

見出しだけで性能を約束しない

「どんな環境でも使える」⁠と書く前に、本文で示せる条件を確かめます。技術担当が確認していない性能や公差を、見出しの言葉で補わないでください。

h1とtitle、説明文は同じ文章にする?

役割を分けて、内容をそろえます。h1は公開ページの主題、titleはブラウザなどで使われる題名です。メタディスクリプションはページ内容の説明で、本文の見出しとは違います。

Googleのタイトルリンクの説明は、検索結果の題を作る情報源として、titleやページ上の主な見出しなどを挙げています。大きく目立つ見出しが複数あり主題が不明だと、最初の見出しが使われることもあります。

たとえばtitleは製品名なのに、最も目立つ文字が全ページ共通の「ものづくりで未来をつくる」⁠な⁠ら⁠、その製品の主題が伝わるかを見直します。会社の標語を消すかどうかではなく、製品名が本文の題として見分けられるかを確認します。

説明文まで同じ単語列にそろえる必要はありません。製品名と、本文で確かめられる仕様や相談資料を短く伝えます。書き方はメタディスクリプションの製品ページ例⁠にまとめています。

今ある表の情報は、見出しへ移すべき?

比較する値なら表に残し、説明を読む必要がある話題なら節に分けます。表を減らすためにすべての数値へ見出しを付ける作業ではありません。

私たちの暦のメディアでは、神社の特色を表の一行に押し込み、詳しい内容が探しにくくなっていました。見出し付きの節へ直した範囲は47ページです。出典は2026年8〜9月⁠の自社メディアの作業記録です。

これは、h3を増やしただけの順位実験ではありません。持っていた説明を読める場所へ出した修正です。製品ページでも、仕様表の備考欄に長い取付上の注意が入っているなら、独立した説明として読めるかを考えます。

その節に写真や図面を置くなら、見出しと画像が同じ対象を指すかも確認します。画像の説明は製品写真と図面のalt属性⁠で扱います。

CMSで保存した後は、どこを見る?

公開ページを開き、見出しの見た目とHTMLを比べます。CMSによっては記事タイトルが自動でh1になり、本文欄にもう一度入れた題と重なることがあります。制作担当には、どの入力欄がどのタグとして出るかを確認してもらいます。

本文の見出しだけを一覧にし、主題、主な節、小さな話題の順が伝わるか読み直します。文字サイズはCSSという表示の設定で調整し、見た目の都合でh2をh4へ替えないようにします。スマホでも、見出しの途中で不自然に切れていないかを確認します。

ページ内の見出しと、サイト全体の階層も分けます。h2を付けただけでは製品一覧からそのページへ進めません。ページどうしの親子関係はハブページと階層構造の作り方⁠、行き先を伝える文言は内部リンクの付け方⁠へ進めます。

サイト設計の点検では、主力製品の一ページから確認してください。見出しだけを読んで必要な仕様へ移れ、その下に正しい答えがある状態を、編集の完了条件にします。

仕様・出典の確認日:2026年10月22日⁠。

よくある質問

h1タグとは何ですか?

HTMLで最も上位の見出しを表す要素です。製品ページなら、そのページで紹介する製品名や用途など、主題が分かる名前にします。

h1とtitleタグは同じですか?

違います。h1はページ本文の見出し、titleはHTMLのheadに置くページの題名です。Googleは検索結果のタイトルリンクを作る際に両方などを参照しますが、設定したtitleが必ずそのまま出るとは限りません。

SEOのために見出しを何個にすればいいですか?

Googleは理想の見出し数を定めていません。節として分ける内容があるところに置き、数を増やすために同じ説明を分割しません。

h2の次にh3を使うのはなぜですか?

h2の節の中にある小さな話題だと伝えるためです。読み上げソフトなどで見出しをたどる利用者が、本文の関係を把握できます。文字の大きさを理由に段階を飛ばさないようにします。

製品名を全見出しに入れますか?

すべてに繰り返す必要はありません。h1で製品を特定し、h2以降は材質、取付条件、相談資料など、その節で分かることを示します。

あわせて読みたい

SEO / COLUMN 62サイト設計メタディスクリプションとは:書き方と、製品ページ・技術記事の例

メタディスクリプションは、ページの内容を簡潔に伝えるHTMLの説明です。固定の文字数制限はなく、Googleが本文から説明文を作ることもあります。製造業の製品ページと技術記事の書き換え例、ページ別に書く手順を説明します。

解説を読む
SEO / COLUMN 05サイト設計ハブページとは?サイトの階層構造とパンくずの作り方を製造業の例で

ハブページとは、テーマの全体像を説明し、その下の分類や記事へ案内する親ページです。1つ⁠の一覧に並べただけの技術コラムを、ハブ→カテゴリ→記事に組み直す手順とパンくずリストの設定を説明します。

解説を読む
SEO / COLUMN 06サイト設計アンカーテキストとは?内部リンクの付け方とGoogleの指針、張り忘れの防ぎ方

アンカーテキストとは、リンクとしてクリックできる文字の部分です。内部リンクは「こちら」⁠で⁠は⁠な⁠く⁠、リンク先の中身が分かる具体的で簡潔な言葉で張ります。Googleの公式な指針と、私たちが3回やった張り忘れの失敗、その防ぎ方を説明します。

解説を読む
SEO / COLUMN 66サイト設計alt属性とは:製品写真・図面・グラフで画像の代替テキストを書く方法

alt属性は、画像の内容や役割を文字で伝える指定です。検索と読み上げでの役割、製造業の製品写真・図面・グラフの記入例、装飾画像を空にする判断、キーワードの詰め込みを避ける書き方と公開後の確認手順を説明します。

解説を読む

いきなり契約する必要はありません。

御社のサイトを見て、「検索とAIから問い合わせを増やすなら、まず何をするべきか⁠」⁠をお伝えします。営業電話はしません。相談だけでも構いません。

自社サイトを見てもらう LINEならURLを送るだけ 打ち合わせから納品まで、メールとチャットで完結します
サイトを見てもらうLINEで相談