Web Artisan Blog - ウェブ アルチザン ブログ

SEO対策の基本中の基本として、
キーワードをtitleタグとh1タグに埋め込むというのがあるが、
この対策と画面の見栄えを考えた場合、ネックになるのが、h1タグである。

h1タグのデフォルト属性では、文字の大きさも大き過ぎるし、
CSSで文字サイズや文字色を変える事で、ごまかす事はできるが、
この方法では、
検索エンジンが「スパムサイト」
（SEO対策で不正にレイアウト調整しているとみなされ検索対象から外す）
と判断するとの説もある。

そこで、現状の対策として他サイトでも行われている方法の一つに、
バナーのimgタグとしてh1タグを持つ方法がある。

下記は、当サイトのソース。

・h1タグ部分

<h1 id="banner">
<a href="http://www.res-system.com/weblog/" 
accesskey="1" title="WEB Artisan">
<img 
src = "http://www.res-system.com/weblog/skins/rssskin/img/logo.gif" 
alt="WEB Artisan" title="WEB Artisan" width="728" height="90" />
</a>
</h1>

・CSS側のbanner部指定

#banner {
width : 728px;
float : none;
border : 0 solid #808080;
margin-left : auto;
margin-right : auto;
margin-top : 0;
margin-bottom : 0;
padding : 0;
font-size : 180%;
background-color : #ffffff;
text-align : center;
}

まず、h1タグとしてTOPページへのaタグ付きのimgタグを定義する。
ここで重要なのは、imgタグにalt属性を指定し、
そこにキーワードを定義している点。（当サイトの場合、”WEB Artisan”）
また、a、imgタグのtitle属性にもキーワードを指定する事も必要。
更に、h1タグにはid属性を持ち、
CSS側で、そのid属性に対してのサイズ指定などの設定。
これにより、
レイアウト的にもhtml的にも自然で、
且つSEOにも有効なhtml定義となる。