SEOに役立つCSSテクニック | 無料SEO対策のススメ

SEOに役立つCSSテクニック～画像置き換え～

SEOを考える上で必要となるCSSテクニックはいくつかありますが、その中から今回は画像置き換えについてご説明いたします。テクニックと呼べるレベルのものではありませんが、実行していないサイトも多いので一応紹介しておきます。

CSSの画像置き換えはスパムになるのでは？とお考えの方は、まずは「display:none」や「visibility: hidden」や「text-indent」はスパム？をご覧ください。

ただ、絶対にペナルティは受けないとは言い切れませんので、気になる方はやめておきましょう。

画像置換とは

CSSの画像置き換えとは、ユーザにはイメージを見せてHTMLソース上はテキストにしたい場合などに使用するテクニックです。検索エンジンはイメージリンク（alt）よりもテキストリンクを評価するため、SEOの観点から使用機会は必然的に増えます。

CSSでaタグの背景としてイメージを読み込ませ、その上にテキストを載せる形は画像置換ではなく、テキストリンクです。見栄えにこだわらないのであればこの方が簡単です。

※非表示にするテキストと置き換えた画像が同じでない場合ペナルティを受ける可能性があります。⇒Googleウェブマスターツールによるスパム警告メッセージ

企業ロゴ・サイトロゴ

画像置換で最も使用機会が多いのがサイトのイメージロゴです。ロゴは全ページのヘッダー部分（HTMLソース上部）に位置し、トップページへのリンクとなる事から、SEO上はテキストリンクにするのが最適です

当サイトヘッダー部の「無料SEO対策のススメ～自分でやるYahooとGoogleのSEO～」も画像置換えを使用しています。

ロゴの画像置換えサンプル

SEOウェブネット（ヘッダー部）

【HTML】
<div id="header">
<div class="u_c"><a href="http://www.jweb-seo.com/">
<span class="logo">SEO対策とホームページ制作</span>
</a>
</div>
</div>

【CSS】
#header {
height: 120px;
width: 750px;
padding: 0px;
margin: 0px;
background: url(../img/tmp/02.gif) no-repeat center center;
}
#header .u_c a {
height: 110px;
width: 420px;
float: left;
margin-left: 40px;
display: block;
}
#header .u_c .logo {
visibility: hidden;
}

id="header"で大きな画像を読み込ませて、class="u_c"のaタグでロゴ部分にリンクを持ってきています。そしてclass="logo"にテキストを記述し、 visibility: hiddenでそのテキストを非表示にしています。（aタグにロゴのみを背景設定しても良いでしょう）

やり方は色々ありますが、要はロゴ部分がHTML上テキストリンクになっていて、ブラウザ上はイメージリンクになっていれば良いのです。

グローバルナビゲーション

グローバルナビゲーション（Gナビ）とはサイト内のページに共通しておかれているナビゲーションの事です。Gナビも見栄えを良くする為とSEOの目的で画像置換えが良く使われます。

Gナビのサンプル

SEOウェブネット（ロゴ下のGナビ）

【HTML】
<div id="navi">
<ul>
<li id="btn1" class="btn"><a href="../service/">
<span class="navi">SEOサービス</span></a></li>
<li id="btn2" class="btn"><a href="../web/">
<span class="navi">ホームページ制作</span></a></li>
<li id="btn3" class="btn"><a href="../work/">
<span class="navi">SEO実績</span></a></li>
<li id="btn4" class="btn"><a href="../free/">
<span class="navi">無料診断</span></a></li>
<li id="btn5" class="btn"><a href="../profile/">
<span class="navi">企業概要</span></a></li>
</ul>
</div>

【CSS】
#navi {
width: 750px;
height: 56px;
margin: 0px;
padding: 0px;
}
#navi ul {
width: 750px;
height: 56px;
margin: 0px;
padding: 0px;
list-style: none;
background: url(../img/tmp/navi/02.gif) no-repeat;
}
#navi a {
height: 56px;
width: 150px;
margin: 0px;
padding: 0px;
display: block;
}
#navi .navi {
visibility: hidden;
}
#navi .btn {
float: left;
height: 56px;
width: 150px;
margin: 0px;
padding: 0px;
}
#btn1 a:hover {
background: url(../img/tmp/navi/02.gif) no-repeat 0px -56px;
}
#btn2 a:hover {
background: url(../img/tmp/navi/02.gif) no-repeat -150px -56px;
}
#btn3 a:hover {
background: url(../img/tmp/navi/02.gif) no-repeat -300px -56px;
}
#btn4 a:hover {
background: url(../img/tmp/navi/02.gif) no-repeat -450px -56px;
}
#btn5 a:hover {
background: url(../img/tmp/navi/02.gif) no-repeat -600px -56px;
}