« 『英辞郎』の検索プラグインは自作したものの私的使用でもアウト? | トップページ | 工藤拓氏が IT Pro で Ajax の連載記事 »

2005-11-11

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

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

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

■Mint: A Fresh Look at Your Site

http://www.haveamint.com/

Mint: A Fresh Look at Your Site

------- 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

btn-home.gif

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

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

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

|

« 『英辞郎』の検索プラグインは自作したものの私的使用でもアウト? | トップページ | 工藤拓氏が IT Pro で Ajax の連載記事 »

[Web]XHTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/139017

この記事へのトラックバック一覧です: SEO効果と見映えを両立した見出し:

« 『英辞郎』の検索プラグインは自作したものの私的使用でもアウト? | トップページ | 工藤拓氏が IT Pro で Ajax の連載記事 »