SEO対策に効果的・表示領域外にテキスト1

サイトのタイトル部分に画像リンクを貼っているのをよく見かけます。使いやすいし、いつでもHOMEに戻れる安心感があります。

通常(X)HTMLならば、

<h1><a href="HOMEのURI"><img src="画像のURI" alt="画像の代替テキスト" width="700" heght="100" /></a></h1>

こんな感じです。上記でも問題はありませんが、(X)HTMLの量が増えてあまりスマートではありません。下記は、(X)HTML上ではテキストで、画像はCSSなのでSEOに効果的な方法があります（と思われる）。

(X)HTML

<div id="header">
<h1><a href="HOMEのURI" title="サイト名">サイト名</a></h1>
</div>

CSS

#header {
  text-indent: -9999px;
  width: 700px;
  height: 100px;
  margin: 0;
  padding: 0;
  background: #FFF url("画像のURI") no-repeat left center;
}
#h1 a {
  display: block;
  width: 500px;
  /* 文字の大きさによって適宜変更 */
  height: 100px;
  /* 画像の大きさによって適宜変更 */
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline-width: 0;
  /* Firefox対策 */
}

ここでのポイントはtext-indent: -9999px;です。数字は-1000ぐらいでもかまいません。それとFirefox対策のoutline-width: 0;は、リンクをクリックした際、細かい点線が表示されます。その点線がはみ出ないようにするための指定です。

サンプルを見る

関連記事
SEO対策に効果的・表示領域外にテキスト2

2006-05-16 12:45 | CSS

Page Top