Home > ウェブデザイン備忘録 > スマホなどの文字込みメイン画像にSEOで重要なタグh1もきちんと入れる方法

スマホなどの文字込みメイン画像にSEOで重要なタグh1もきちんと入れる方法

26.01.29
ウェブデザイン備忘録

スマホのメイン画像（ヒーローエリア）って、地味に悩みませんか？

PC版なら横幅が固定なので、メインビジュアルの中に h1など重要なテキストをそのまま配置 できます。

でもスマホはレスポンシブ。

文字位置が崩れる

余白調整が面倒

デザインが安定しない

…結果、

👉 「もう文字入り画像を1枚作っちゃえ！」

ってなりがちですよね。

ただここで問題。

文字を画像化するとSEOが弱くなる

画像に文字を焼き込むと、h1が使えない

Googleがテキストとして認識できない

altだけではSEO効果は弱い

つまり 検索評価が落ちます。

「画像をh1で囲んでaltに入れればOK？」
と思いがちですが、これはほぼ意味がありません。

解決策：画像＋“見えないh1”を併用する

やり方はシンプル。

① まずは好きに文字入り画像を作る

スマホ用のメイン画像は、普通にデザイン優先でOK。SEOは後から補います。

テキストのh1を別で用意する

SEO用の「本物のh1」画面には表示しない

これがポイント。

visually-hidden を使って非表示にする

このCSSの特徴：

✅ 画面 → 見えない
✅ Google → 読める
✅ スクリーンリーダー → 読める
✅ SEO → 有効

最終形（完成コード）

これで

✔ デザイン自由（文字入り画像OK）
✔ SEOもOK（h1生きてる）
✔ レイアウト崩れなし

全部解決。

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

»

関連記事