H1見出しのSEO強化：ロゴ画像にaltを入れるだけではもう古い？最新の最適解を解説

投稿日: 2026年3月10日

カテゴリー：ホームページブログ（WordPress) SEO

Webサイトの「顔」とも言えるロゴ部分。多くのWordPressサイトや制作現場で、

ロゴ画像をh1タグで囲み、alt属性にキーワードを詰め込む手法が長年使われてきました。

しかし、検索エンジンの進化に伴い、「画像altのみのH1」はSEO的に最強とは言えなく

なっています。 今回は、当サイト「HCZ.JP」の事例を参考に、見た目を損なわず、

かつGoogleから最高評価を得るための最新H1最適化テクニックを詳しく解説します。

1. なぜ「画像alt ＝ H1」の方法はSEO的に弱いのか？

まずは、以前からよく使われている以下のコードを見てみましょう。

<h1><a href="https://www.hcz.jp/" title="HCZ.JP ゼファー1100 カスタム カワサキ ZEPHYR"><img src="logo.png" width="147" height="40" alt="HCZ.JP ゼファー1100 カスタム カワサキ ZEPHYR" /

この構造は「H1の中に画像があり、その説明（alt）にキーワードが入っている」状態です。

決して間違い（SEOスパム）ではありませんが、現在のGoogleの評価基準では以下の

ような序列が存在します。

Googleの評価優先度通常のテキストH1（直書き）＞画像のaltテキストH1

GoogleのAIは画像の内容やalt属性を高度に理解しますが、それでも「テキストとして

ページ上に存在している言葉」の方が、そのページのテーマを示す強いシグナルとして

処理されます。今のままでは、SEO評価としては　「60点」　といったところです。

2. 実は意味がない？「title属性」の真実

上記のコードに含まれている title="HCZ.JP ゼファー1100 カスタムカワサキ ZEPHYR" という記述。

実は、これにはSEO効果がほとんどありません。

title属性： マウスをホバーした時にツールチップとして表示される補足情報。
Googleの見解： title属性をランキング要因（順位決定の判断基準）として重要視していない。

SEOを意識してキーワードを盛り込むなら、title属性ではなく、次に紹介する

「隠しテキスト（スクリーンリーダー用テキスト）」に注力すべきです。

3. SEO評価を90点に引き上げる「アクセシブルな隠しテキスト」

見た目はロゴ画像のみのスマートなデザインを保ちつつ、検索エンジンにはしっかりと

「ここはHCZ.JPのトップページです」と伝える方法があります。

それが、<span>タグを用いたテキストの追加です。

以前主流だった手法（注意が必要）

かつては left: -9999px; を使ってテキストを画面外に飛ばす手法が流行しました。

.visually-hidden { position: absolute; left: -9999px; }

しかし、現在この手法は推奨されません。

Googleのアルゴリズムが進化し、あまりに極端な画面外への配置は

「ユーザーに見せず、検索エンジンだけを騙そうとする隠しテキスト」

と判定されるリスクがゼロではないからです。

4. 【最新版】Google公認の安全な実装コード

現在、最も推奨されるのは「アクセシビリティ（視覚障がい者向けの音声読み上げ等）」に対応した

隠し方です。これならばGoogleからペナルティを受ける心配もなく、SEO効果を最大化できます。

推奨されるHTML構造

<h1 class="site-title">
<a href="https://www.hcz.jp/">
<img src="../images/logo.png" alt="HCZ.JP ゼファー1100 カスタム カワサキ ZEPHYR">
</a>
<span class="seo-text">HCZ.JP ゼファー1100 カスタム カワサキ ZEPHYR</span>
</h1>

推奨されるCSS

.seo-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

この方法のメリット

ユーザー視点： スッキリとしたおしゃれなロゴ画像だけが見える。
Google視点： 「HCZ.JP ゼファー1100 カスタムカワサキ ZEPHYR」というテキストをH1として明確に認識。
安全性： アクセシビリティに配慮した手法（スクリーンリーダーでは読まれる）であるため、不当な隠しテキストとは見なされない。

h1　に指定している　class="site-title"　自体は、

「SEO効果を高めるため」という目的だけであれば、必須ではありません。

しかし、「サイトのデザインを崩さず、正しく隠しテキストを配置する」という実用的な

面では、あった方が非常に便利です。その理由と、推奨されるCSSの記述を解説します。

なぜ `class="site-title"` があると良いのか？

このクラスが必要な理由は、主に「positionの基準点にするため」です。

今回紹介した「SEO用の隠しテキスト（.seo-text）」には、

CSSで position: absolute;（絶対配置）を指定しています。このとき、

親要素である <h1> に何も指定がないと、隠しテキストの配置がページ全体の

左上などを基準にしてしまい、予期せぬ余白やレイアウト崩れが起きる可能性があります。

<h1> にクラスをあてて基準を作ることで、安全にテキストを隠すことができます。

CSSにはなんと記述すべきか？

WordPressのテーマ（SWELLやLightningなど）をすでにお使いの場合は、元々のロゴの

大きさを維持しつつ、以下のように記述するのがベストです。


/* 親要素（H1）の記述 */
.site-title {
  position: relative; /* 隠しテキストの配置基準にする */
  display: inline-block; /* ロゴのサイズに合わせる（または block） */
  margin: 0;
  padding: 0;
  line-height: 1; /* 余計な上下余白を消す */
}

/* ロゴ画像自体の調整（必要に応じて） */
.site-title img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 以前お伝えした隠しテキスト用のCSS */
.seo-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

もしクラスを使いたくない場合

もしHTMLを極力シンプルにしたい場合は、クラス名なしで h1 と直接指定しても機能は

しますが、他のページの h1（記事タイトルなど）にも影響が出てしまいます。

そのため、「ロゴ専用のH1ですよ」と区別するために、やはり site-title や header-logo

といったクラス名は付けておくのが制作現場での「正解」です。

アドバイス

もしWordPressのテーマ独自のクラス名（例：SWELLなら .c-logo など）が既に

<h1> に付いている場合は、新しく site-title を追加しなくても、その既存のクラス

に対して position: relative; を書き足すだけでOKです。

5. まとめ：H1を最適化して検索順位を底上げしよう

今回のポイントをまとめると以下の通りです。

項目	旧来の方法	最新の推奨方法
構造	画像のaltのみ	画像＋隠しテキスト
SEO評価	60点（普通）	90点（非常に高い）
リスク	特になし	適切に実装すれば安全
ユーザー体験	変化なし	音声読み上げにも対応