SEO効果と見映えを両立した見出し

皆さま、(X)HTML の見出し（H1, H2, H3, H4…）ってどのようにされていますか？テキスト？それとも画像？見映えやブランドイメージを重視する商用サイトや企業系サイトにとってみれば、画像をつかってできるだけ華やかに、あるいはクールに演出したいところでしょう。その一方で、最近は SEO（Search Engine Optimization: サーチエンジン最適化）効果を狙って、なるべくテキストとしてマークアップしたいという願望もあるのではないでしょうか？なかなか両立しないこの２つの条件ですが、うまい具合にこれを両立させる方法がなくもありません。（といっても、Web 標準の思想的にはちょっと良心が痛む邪道な Tips ですけど。）(^_^;)

最近使われてる手段の中には、たとえば以下のサイトのような手法をよく見かけます。

■Mint: A Fresh Look at Your Site

http://www.haveamint.com/

------- index.htm --------------------------------

<div id="container">

<div id="navigation">

<h1><a href="/"><strong>Mint</strong> A Fresh Look at Your Site</a></h1>
　　　　　：

</div>

</div>

------- base.css ---------------------------------

http://www.haveamint.com/styles/base.css

#navigation h1 a,
h1#txt-intro,
h1#txt-requirements,
h1#txt-demo,
/*
　　　

：

（以下、併称セレクタが延々と続くので中略.. ^^;） 　　　

：

*/
{

display: block;
text-indent: -3000px;

}
#navigation h1 a
{

width: 250px;
height: 64px;
background: url(/images/btn-home.gif) left top no-repeat;
padding: 0;
background-color: transparent;
border: none;

}

------- btn-home.gif -----------------------------

http://www.haveamint.com/images/btn-home.gif

------------------------------------------------

一応、簡単に説明しておくと、hn（ここでは h1）内のマークアップとしては "<strong>Mint</strong> A Fresh Look at Your Site" のようにテキストで行っておきつつ、テキストは外部 CSS で画面外にはじき出しておく。（この辺りが邪道な部分です。）代わりに、hn もしくは hn 内の任意の要素に対して CSS を使って背景画像として見出し用の画像を表示するようにする、って仕組みです。

ごく良識で考えれば非推奨行為ではありますけど、今のところ GoogleBot は外部 CSS までは読みに行ってないようなので、SEO spam としては扱われないみたいです。（あくまで今の段階での話ですけど。）