【SEO対策tips】最適化された(x)html-img要素

画像などを表示する為のimg要素はwebサイトをビジュアル面で支えるなくてはならない要素です。

SEO上またユーザービリティ・アクセシビリティ上alt属性を記述することが望ましいです。

<img src="logo.jpg" alt="とあるWEBクリエイターのblog" />

alt属性は代替テキストなので、ロゴに対して『とあるWEBクリエイターのロゴ』のように画像の説明を記述するのは好ましくなく『とあるWEBクリエイター』と画像の内容を記述する必要があります。
どうしても画像の説明を記述したい場合はtitle属性を利用して記述すようにしましょう。

<img src="logo.jpg" alt="とあるWEBクリエイターのblog" title="logo" />

alt属性に長い文章が入っているとSEO効果が全くなくなる為、IEで表示されるツールチップ1行分(40byte位)に収める必要があります。

画像上に長い説明などが記述されている場合は、img要素を使用せずCSSの画像置換やBIR（Bob Image Replacement）などを利用してテキストとして記述するのが好ましい。

豆知識-画像置換

html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事

html上のソース

<p class="logo">とあるWEBクリエイターのblog</p>

CSSソース

p.logo{
width:370px;
height:60px;
text-indent:-9999px;
background:url("/img/logo.gif") top left no-repeat;
}

img要素を使用しない為、携帯電話などのCSSを解釈しない環境では(x)htmlの内容のみが表示されるので、内容によっては携帯用のサイトを別途作成しなくてもよいなどのメリットがある。

cssをonにした状態で画像表示をoffにすると内容が表示されないというデメリットがあるとされている。

豆知識-BIR

html上に記述されているテキストをbody要素の背面に表示して背景画像のみを表示する技術の事

html上のソース

<p class="logo"><span>とあるWEBクリエイターのblog</span></p>

CSSソース

body {
background:#FFFFFF;
position:relative;
z-index:1;
}
p.logo {
background:transparent url('image.jpg') top left no-repeat;
width:370px;
height:60px;
}
p.logo span {
position:relative;
z-index:-1;
}

画像置換に比べてcssをonにした状態で画像表示をoffにすると内容が表示されないというデメリットが克服されている。

position:relativeを使用している為、他の要素への影響等も考慮して制作をしなければいけない

スポンサードリンク

«【SEO対策tips】最適化された(x)html-a要素 | メイン | 【SEO対策tips】最適化された(x)html-あまり重要ではないが意識したほうがよい要素»