h1にロゴ画像は使える？トップページと下層ページで分ける判断

「ロゴはサイトでいちばん大事な名前なので、h1にしておけば検索に強くなりそう」。ヘッダーのロゴをh1で出力するテーマもあるので、テーマの初期設定のままで問題ないと受け取られがちです。ところが、ロゴ画像をh1にしてよいのは、会社やサイトそのものがページの主題になるトップページに限られます。トップページ以外では、ページの主題を書いたテキストをh1にします。

本記事では、トップページとそれ以外のページで判断が分かれる理由から、ロゴのaltの書き方、テンプレートの直し方まで、SEO対策を現状の分析から手がける会社の視点で順を追ってお伝えします。

ロゴ画像をh1にしてよいページの見分け方

ロゴ画像をh1にしてよいかは、ページの主題が会社やサイトそのものかどうかで決まります。MDNは、1つのページには、titleタグと同じようにページの内容を説明するh1を1つだけ置くのが一般的だとしています。

トップページと、トップページ以外の下層ページでは、h1とロゴの扱いが次のように分かれます。

トップページでロゴをh1にしてよい理由

トップページでロゴをh1にしてよいのは、トップページの主題が会社やサイトそのものだからです。HTMLの仕様（HTML Standard）は、会社などを表すロゴをページの見出しとして使う場合を例に挙げ、altにはロゴが表す会社などの名前を書くよう定めています。

<h1><img src="logo.svg" alt="〇〇株式会社"></h1>

Googleも、検索結果に出すサイト名を決めるときに、トップページの見出し要素の内容を考慮すると説明しています。あわせて、構造化データで指定するサイト名と、トップページのほかの場所で使うサイト名を一致させるよう求めています。ロゴのaltに書く名前は、titleタグや構造化データのサイト名とそろえます。

※ 出典：HTML Standard「Requirements for providing text to act as an alternative for images」

※ 出典：Google 検索セントラル「Google 検索に対してサイト名を指定する」

下層ページでテキストをh1にする理由

下層ページで主題のテキストをh1にするのは、ヘッダーのロゴがどのページでも同じ会社名を表し、ページごとの主題を表さないからです。Googleは、検索結果のタイトルを決める材料にh1などの見出しを使い、どのテキストがページの大見出しかを明確にするよう勧めています。その例として挙げているのは、タイトルのテキストを、ページで最初に目立つh1に置くことです。

ヘッダーはHTMLの中で本文より前にあるため、ロゴをh1にすると、どの下層ページでも最初のh1が会社名になります。MDNによると、読み上げソフトの利用者は、見出しから見出しへ移ってページの内容を判断することがよくあります。最初の見出しが会社名だと、利用者はページの主題にたどり着くまでに、どのページでも見出しを1つ余分に聞くことになります。

<header>
  <a href="/"><img src="logo.svg" alt="〇〇株式会社 トップページ"></a>
</header>
<main>
  <h1>会社概要</h1>
</main>

ロゴと記事タイトルの両方がh1になり、1ページにh1が2つある場合の考え方は、h1タグとは？SEO効果と複数使用や画像設定の判断基準を解説で扱っています。

※ 出典：Google 検索セントラル「Google 検索結果のタイトルリンク（見出し）の変更」

※ 出典：MDN「<h1>–<h6> セクション見出し要素」

トップページのh1はロゴかキャッチコピーか

トップページのh1はロゴにしてよく、ファーストビューのキャッチコピーが何の会社かを言い表しているなら、キャッチコピーをh1にしてもかまいません。h1を1つに絞ると、トップページではロゴとキャッチコピーのどちらか一方だけがh1になります。

キャッチコピーをh1にしてよいかは、h1だけを読んだ人に何のページかが伝わるかで決まります。「暮らしに、もうひとつの余白を」のようなキャッチコピーは、会社名も事業も含まないため、h1として読まれても何のページか分かりません。「彦根市で木の家を建てる工務店」のように事業と地域を書いた文なら、会社名を知らない人にも何の会社かが伝わります。

<header>
  <img src="logo.svg" alt="〇〇工務店">
</header>
<h1>彦根市で木の家を建てる工務店</h1>

とりわけ見落とされがちなのが、キャッチコピーを画像で作っている場合です。HTMLの仕様は、文字を画像にした見出しのaltには、画像の中と同じ文字を書くよう定めています。文字で書ける内容なら画像を使うべきではない、とも仕様は書いているので、キャッチコピーはテキストで書き、装飾はCSSで付けます。

※ 出典：HTML Standard「Requirements for providing text to act as an alternative for images」

ロゴ画像のaltの書き方

ロゴ画像のaltに書く中身は、ロゴの見た目ではなく、ロゴをh1の中に置くか、リンクにするか、会社名の文字の隣に添えるかで変わります。

ロゴの置き方ごとのalt

ロゴの置き方は3つあり、altに書くものはそれぞれ次のとおりです。

HTMLの仕様は、画像だけが入ったリンクでは、リンクの目的が伝わる文をaltに書くよう定めています。ヘッダーのロゴのリンクは、トップページへ移るためのものなので、altには会社名とトップページを書きます。ロゴが会社名の文字の隣に添えてあるだけなら、仕様はロゴを補助の画像として扱い、altを空にするよう定めています。

ロゴのaltに入れない言葉

ロゴのaltには、次の3つを入れません。

• 「ロゴ」という語（alt="〇〇株式会社 ロゴ"）
• 画像のファイル名（alt="logo.png"）
• 会社名に並べた検索キーワード（alt="〇〇株式会社 彦根 工務店 注文住宅"）

HTMLの仕様は、会社を表すために置いたロゴのaltに、「ロゴ」という語を入れてはならないとしています。伝えるのはロゴであることではなく、ロゴが表す会社そのものだからです。MDNもaltにファイル名を書くべきではないとしており、Googleは、altにキーワードを並べるとサイトがスパムとみなされる要因になる場合があると説明しています。

※ 出典：HTML Standard「Requirements for providing text to act as an alternative for images」

※ 出典：Google 検索セントラル「Google 画像検索 SEO ベスト プラクティス」

ロゴがh1のテンプレートの直し方

ロゴがh1になっているテンプレートは、トップページのときだけロゴをh1で出し、ほかのページではトップページへのリンクで出すように書き換えます。ヘッダーは全ページで共通なので、テンプレートの1か所を直せば、すべての下層ページのロゴが変わります。

Web担当者

ロゴがh1のままだと、検索順位が下がるのでしょうか。下がらないなら、テンプレートまで直す必要はない気がしています。

Writers-hub
編集部

Googleは、見出しが順番どおりでなくてもGoogle検索にとっては問題なく、理想的な見出しの数も無いと説明しているので、直したから順位が上がるとは言えません。直すのは、検索結果のタイトルの材料と読み上げで、ページの主題が最初の見出しとして伝わるようにするためです。ヘッダーを触る機会があれば、一緒に直しておくのがおすすめです。

header.phpなどのPHPのファイルでテンプレートを書くテーマ（クラシックテーマ）のWordPressでは、表示中のページがトップページかどうかを判定するis_front_page()という関数を使い、ヘッダーのテンプレートでロゴを出し分けます。

<?php if ( is_front_page() ) : ?>
  <h1 class="site-logo"><img src="logo.svg" alt="〇〇株式会社"></h1>
<?php else : ?>
  <a class="site-logo" href="/"><img src="logo.svg" alt="〇〇株式会社 トップページ"></a>
<?php endif; ?>

テーマのファイルを直接書き換えると、テーマを更新したときに変更が消えます。子テーマに同じ名前のテンプレートを置いて書き換えます。子テーマで書き換えた分は、親テーマを更新しても残ります。

※ 出典：Google 検索セントラル「検索エンジン最適化（SEO）スターター ガイド」

※ 出典：WordPress Developer Resources「is_front_page()」、WordPress Theme Handbook「Child Themes」

h1とロゴのよくある質問

h1とロゴについて出てきやすい疑問を4つ取り上げます。

SVGのロゴはどう書けばいい？

img要素でSVGのファイルを読み込むなら、ほかの画像と同じくaltに会社名を書きます。HTMLの中にsvg要素を直接書く場合はalt属性が無いため、Googleはsvg要素の中にtitle要素を書く方法を挙げています。

<h1>
  <svg aria-labelledby="logo-title">
    <title id="logo-title">〇〇株式会社</title>
  </svg>
</h1>

CSSの背景画像でロゴを出してもいい？

ロゴは、CSSの背景画像ではなくimg要素で置き、altに会社名を書く方法をおすすめします。Googleは、CSSで指定した画像をインデックスに登録しません。背景画像にしてh1の文字を画面の外へ出す作り方は、Googleのスパムポリシーが隠しテキストの例に挙げる「CSS を使用してテキストを画面の外に配置する」と同じ形です。ポリシーが問題にするのは検索エンジンを操作することだけを目的に隠す場合ですが、img要素とaltで同じことができるので、誤解される形を選ぶ理由はありません。

LPでもロゴをh1にしていい？

ページ1枚で完結するLPも、トップページと同じく、ページの主題でh1を決めます。商品やサービスの名前がロゴになっているなら、ロゴをh1にしてaltに名前を書きます。商品で何ができるかを書いた見出しの文があれば、トップページのキャッチコピーと同じく、見出しの文をh1にしてもかまいません。

検索結果にロゴを出すにはh1が要る？

検索結果にロゴを出すために使うのは、h1ではなく、トップページに書く組織（Organization）の構造化データのlogoプロパティです。Googleは、logoプロパティを書くと、検索結果やナレッジパネルに表示させたいロゴをGoogleが正確に把握するのに役立つと説明しています。

※ 出典：Google 検索セントラル「Google ウェブ検索のスパムに関するポリシー」

※ 出典：Google 検索セントラル「組織（Organization）の構造化データ」

まとめ｜ロゴをh1にするかはページの主題で決める

ロゴをh1にするかは、ページの主題が会社そのものかどうかで決めます。トップページは会社やサイトそのものが主題なのでロゴをh1にしてよく、トップページ以外では、ページの主題を書いたテキストをh1にします。下層ページのロゴは、altに行き先を書いたトップページへのリンクにします。

トップページでも、何の会社かを言い表したキャッチコピーがあればキャッチコピーをh1にしてよく、h1に入れたロゴのaltには会社名だけを書きます。クラシックテーマがロゴを全ページでh1にしているなら、子テーマでヘッダーのテンプレートを直し、トップページだけロゴをh1で出してください。

私たち合同会社Writers-hubは、滋賀のSEO対策で、サイトの現状の分析と設計から、毎月の報告と見直しまでを受け持っています。