HTMLのh1ロゴをテキストから画像に変更する際の注意点

HTMLでサイトのタイトルなどを指定するときは<h1>を使用しますが、画像を使用する場合はグーグルのクローラーでもタイトルがわかるようにテキストを入れておくといいとされています。

グーグルのクローラにはテキストを読み取らせ、一般のユーザーには画像を表示するという感じです。

なので<h1>のテキストを用意して、それを隠して代わりに画像を表示するという作業が必要になります。

 

h1のテキストを隠し、画像を表示させる

HTMLは以下のようになります。

<h1>サイト名称</h1>
<h1 class="clear">サイト名称</h1>

 

CSSは以下の通り。

h1 {
  background-image: url("./images/logo.png");
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.clear { 
  text-indent:100%;
  white-space:nowrap; 
  overflow:hidden;
 }

 

画像をクリックできるようにする

ロゴ画像をクリックできるようにする場合は以下のような構造がいいでしょう。

HTML

<h1><span class="clear">サイトネーム</span><a href="index.html"><img src="./images/logo.png"></a></h1>

 

CSS

.clear { 
    display: none;
 }

 

<span class=”clear”>にはサイトネームをテキストで記述し、これをdisplay: noneで非表示にします。

また、サイトロゴは<a>で囲ってクリックできるようにします。

これならグーグルはテキストを読んでh1の内容を理解し、ユーザーは画像をみて直感的に理解することができます。