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日。