画像置換とBIR
画像で作ったタイトルに、
H1タグをつけたいとき。
結構あるかと思います。
いままでの経験上1/2くらいはそんなケース。
普通に、
<h1>
<img src="hogehoge.jpg" alt="●●●">
</h1>
と
書くのがおそらくベター。
でも、
SEOを意識しだすと、
h1の中にimgタグなんて入れたくなくなります。
どういうことかと言ったら、
googleやYSTがどんな解釈してるかわからないけど、
h1の中にimgがありそのaltに文字を記述する場合と、
h1の中に文字を記述する場合って、
後者の方がいいと思うですよ。
で、
僕は、CSSで、
text-indent: -9999px;
使ってます。
これは、
画像置換っていう
俗称があるのを
つい先ほど知りました。
また、
BIR(Bob Image Replacement)という
テクニックもあるようで、
------------------------------------------------
<style type="text/css">
body {
background:#d3d3d3;
position:relative;
z-index:1;
}
bir {
background:transparent url('image.jpg') top left no-repeat;
height:100px;
width:400px;
}
.bir span {
position:relative;
z-index:-1;
}
</style>
</head>
<body>
<h1 class="bir"><span>Top-Level Text</span></h1>
------------------------------------------------
こんな感じ。
positionと、
z-indexをうまく使っていうようです。
画像置換の際の、
「画像の表示を切ったら何も表示されない」
というデメリットが克服できているそうです。
-9999pxは、
結構スパム扱いされるんじゃないかっていう
心配が日に日に増してきていたので、
このBIRは
いいネタ。
でも、
これにも問題はあって、
フォントサイズ大きくしたときに、
「フォントサイズもうまくしていしないと、背景の下からはみ出すことがある。」
「MacIEだと画像が表示されない」
っていうのが気がかり。
それと、
positionの設定と、
z-indexの設定が、
bodyにかかっているのが、
ちょっとやっかいれす。
あと、無駄なspanはできれば書きたくない。
ちょっと悩むなぁ。
BIRはあんま実用的じゃないような気がしてるので、
このまま-9999pxかな。。。