WebサイトのコーディングやSEO設計において、古くから議論され続けているテーマがあります。「サイトのロゴ画像（ヘッダーロゴ）をh1タグで囲むべきか、否か」という問題です。
かつてのWeb制作の現場では、トップページの左上にあるロゴ画像を `<h1>` に設定し、下層ページではページタイトルを `<h1>` に切り替える、あるいは全ページでロゴを `<h1>` にするといった手法が一般的でした。しかし、Googleのアルゴリズムが進化し、HTML5が標準となった現在、この「常識」は通用するのでしょうか。
結論から申し上げます。「h1タグにロゴ画像を設定すること」は、SEOの観点からは『ナシ（非推奨）』、あるいは『条件付きでアリだが、ベストプラクティスではない』というのが、2025年時点でのプロフェッショナルの見解です。
なぜロゴをh1にすべきではないのか。では、h1には何を設定すべきなのか。今回は、検索エンジンの仕組みとHTMLの構造的な意味（セマンティクス）に基づいた、正しいh1タグの扱い方について解説します。
なぜ「ロゴ画像 ＝ h1」が推奨されないのか
まず、h1タグ（見出しタグ）の役割を再確認しましょう。h1は、そのページが「何について書かれているページなのか」をGoogleとユーザーに伝えるための、最も重要な大見出しです。
Googleは「画像」よりも「テキスト」を好む
Googleのクローラーは、画像を認識する技術が向上しているとはいえ、基本的には「テキスト情報」を最優先して解析します。
ロゴ画像を `<h1>` に設定し、`alt` 属性（代替テキスト）に「株式会社CagraPRO」と記述した場合、Googleはそれを認識はします。しかし、生のテキストとして `<h1>株式会社CagraPRO</h1>` と書かれている場合に比べれば、その重要性のシグナルはどうしても弱くなります。
SEOで上位表示を狙うなら、h1タグという最強の武器を、解釈の余地がある「画像」に使うのはもったいないことです。h1は、検索キーワードを含んだ「テキスト」で記述するのが、最も確実な戦略です。
ページごとの「テーマ」がぼやける
これが最大の問題です。もし、サイト内の全ページ（トップページ、会社概要、サービス一覧、ブログ記事…）で、ヘッダーのロゴ画像を `<h1>` に設定していたらどうなるでしょうか。
Googleから見れば、「このサイトは、全ページが『株式会社CagraPRO』というタイトルのページなんだな」と解釈されてしまいます。
本来、会社概要ページのh1は「会社概要」であるべきですし、採用ページのh1は「採用情報」であるべきです。全ページ共通のロゴをh1にしてしまうと、各ページの固有のテーマ性が薄まり、ロングテールSEO（個別のキーワードでの流入）において大きな機会損失を招きます。
トップページであっても「テキスト」が最強
「下層ページはページタイトルをh1にするとして、トップページだけはロゴをh1にしてもいいのでは？」という意見もあります。これは、かつてのSEOでは「王道」とされていた手法です。
しかし、現在ではトップページであっても、ロゴではなく「メインのキャッチコピー」や「事業内容を表すテキスト」をh1に設定するのがトレンドであり、理にかなっています。
ロゴはあくまで「看板」にすぎない
例えば、トップページのメインビジュアルの上に、「BtoB企業のWeb課題を解決する制作パートナー」というキャッチコピーがあるとします。
ユーザーや検索エンジンにとって、このサイトの中身を表しているのは、社名のロゴマークでしょうか？ それとも、このキャッチコピーでしょうか？ 明らかに後者です。
したがって、HTML構造としては以下がベストプラクティスとなります。
■ロゴ画像： `<div>` または `<p>` タグで囲み、トップページへのリンクを張る。あくまで「サイトのホームに戻るボタン」としての役割。
■h1タグ： メインビジュアル内のキャッチコピー（テキスト）に設定する。
これにより、検索エンジンに対して「このサイトはWeb制作パートナーについてのサイトです」と明確に伝えることができます。
条件付きで「ロゴh1」が許されるケース
とはいえ、デザインの制約上、どうしてもテキストの見出しを配置できない場合や、単一ページのLP（ランディングページ）などで、ロゴ以外に適切なh1が見当たらない場合もあります。
その場合は、以下のルールを厳守することで、ロゴをh1に設定することも「許容範囲」となります。
① 必ずalt属性を入れる： `<img src=”logo.png” alt=”株式会社CagraPRO”>` のように、社名を正確に記述する。ここを空欄にしたり、「logo」といった無意味な単語にするのはSEO自殺行為です。
②トップページ限定にする： 下層ページでは、必ず条件分岐（プログラム）を行い、ロゴを `<div>` に、各ページのタイトルを `<h1>` に切り替える仕様にする。
HTML5時代の「正しい構造」
HTML5の普及により、タグの意味付け（セマンティクス）はより厳密になりました。昔のように「ロゴが一番上にあるからh1」という物理的な配置だけで決める時代は終わりました。
スクリーンリーダー（アクセシビリティ）への配慮
視覚障害者が利用する「スクリーンリーダー（音声読み上げソフト）」は、h1タグなどの見出しを頼りにページの内容を把握します。
ここで、すべてのページで「画像、株式会社CagraPRO」と読み上げられるよりも、「見出しレベル1、会社概要」と読み上げられた方が、ユーザーは「今、自分は会社概要のページにいるんだ」と瞬時に理解できます。
SEOだけでなく、Webアクセシビリティ（使いやすさ）の観点からも、h1は「ページの内容を表すテキスト」であるべきなのです。
h1は「飾り」ではなく「要約」である
Webデザイナーの中には、h1タグを「文字を大きくするための装飾タグ」と勘違いしているケースが見受けられます。「デザイン的にここに大きな文字を入れたくないから、ロゴをh1にしておこう」という発想です。
しかし、h1はデザインのための道具ではなく、文書構造の「要約」です。見た目のデザインと、裏側のHTML構造は切り離して考える必要があります。
CSSを使えば、h1タグの文字を小さくすることも、位置を変えることも自由自在です。見た目に惑わされず、論理的に正しい構造をマークアップすることが、Googleに愛されるサイトを作る第一歩です。
CagraPRO（カグラプロ）のコーディング品質は、こうしたSEOの内部構造とアクセシビリティを徹底的に考慮しています。「今のサイトのh1設定がどうなっているか不安だ」「SEOに強い構造にリニューアルしたい」。そのような課題をお持ちでしたら、ぜひ一度お問い合わせください。
見た目だけのWeb制作会社では見落としがちな「コードの品質」で、御社の検索順位を底上げします。
著者：清宮 雄（株式会社カグラ 代表取締役） マーケティング、ブランディングおよび企業経営の領域において20年以上の実務経験を有する。国内外にてIT事業および教育事業を展開。