ウェブデザイナーの日記

「h1タグはサイトの大見出しなのだからそこには正しいキーワードを含ませてbody直下に置け」

というのが大前提としてあるわけですが、昨今は効果が薄いように思われます。hタグをスッ飛ばして書かれたようなページが上位に表示されることはとても多いので。「それでもなおやはり私はこれについていきたい」という人だけお読みください。

通常の商用サイトでの話。ヘッダ部には企業ロゴやカテゴリのリンクボタンやFlash等の装飾的な画像が並んで次に見出しが来るというパターンが多いですよね。これだと、h1タグがヘッダの下にきてしまいます。昔は企業ロゴをh1で囲んでaltに適切な文字列を入れとくという方法でみんなやっていましたが、さいきんはaltテキストの重要性が底落ち気味なので悩む。ではどうするかというと、たぶん次の2パターンのどちらかになると思います。

方法その1: インデントで隠す。

body直下に<h1>〜</h1>を配置するが、これをcss指定にてindent:-10000px;でブッ飛ばす。するとブラウザには見えないようになります。このやり方は一見すると、グーグルが禁止している「意図的に文字を隠す」というペナルティに相当するように見えますが、昨今流行のcss + javascriptによるオンマウスオーバーのメニューでは画像転換にこれを使ってるケースが多いので、indent:-10000px;でブッ飛ばすのをペナルティとするならば多くのサイトがその対象になってしまうのだからギリギリオッケーであろうという世間の（どの世間じゃ？といいたくなるけど）認識でしょう。

ここで問われるのは「文字を隠しているか」ではなく「その見出し語がサイトの内容に正しくあっているか」であり、それがアクセシビリティを想定してなされたものであるならば、それをスパムとみなす検索エンジンの怠慢である。だからありえない。というエクスキュ−ズが与えられます。

方法その2: 絶対配置指定を使う。

body直下に<h1>〜</h1>を配置するが、これをcssによるposition指定で下の方にずらす。よってブラウザ上では見出しは下にあるけれど、htmlソース内では<h1>〜</h1>はbody直下にある。

このやり方は上に比べてたいへん公明正大な世間の（どの世間じゃ？）印象を得られます。メインコンテンツが3カラムあったとして真ん中のカラムに見出し語を配置したいというときなんかでも使えるのでグレートです。ただ短所もあって、見出しの長さがページに応じて変わる場合だと、絶対配置で行っているのでマージンが一定ぶんしか空けられず、1行でおさまるつもりが2行になってしまったなんていう場合には文字が重なって醜悪になります。phpで文字数に応じてマージンを可変するという方法もありますが、ブラウザ環境によって表示フォントの大きさが異なってしまうことを考えるとけっこうバギーです。

上のどちらの場合においても、細かい人なんかは外部cssファイルをrobots.txtでクロールされないようにするというところまで気を遣うようです。ごくろうさまです。.htaccessで禁止すると「見るなコノヤロ」という挑戦的な態度になるので、robots.txtの方がジェントルマンだよという認識があるんでしょうか。

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

めんどくさいっすよねぇ。ここまで気を遣っていったいどこまで効果があるものやら不明なわけですが、ま、できるところでジタバタしておくという性分なので考えだすととまりません。「こんな女々しいことにウツツをぬかしておるんじゃない〜！」といわれてしまいそうですが ... 。