フロム「ずくだす」

レイアウトのために使っているテーブルの場合、枠線を表示しないことが多いため、テーブルの入れ子に誤りがあっても気がつきません。ＨＴＭＬに手を入れていくうちに、tr や　/tr、td、/tdが混乱するのはよくあることです。

枠線を表示してやればテーブルの入れ子関係が分かりやすくなります。ただし、ブラウザは入れ子に間違いがあっても強引に表示してしまうので、ブラウザ画面だけではなく、ＨＴＭＬソースと比較しながらチェックすることになります。たいていは、tdがダブっていたり、tdの前にtrが書かれていたり　という単純なミスです。今回も入れ子を修正しただけでプラスの３６点まで回復しました。

テーブルのsummaryを書いてソースのドキュメント性を高める

summary属性も減点の対象となります。別に実害はないから、書かずに済ますこともできますが、各テーブルの構造をsummaryとして書くことでＨＴＭＬソースの見通しを良くすることにしました。table summary="全体を囲むテーブル" とか　table summary="左商品群説明テーブル１"とか、table summary="右メニュー用テーブル"と書いておくだけで、ＨＴＭＬを変更するときに参考になると思ったからです。さらに table summary="左店舗用黒板紹介テーブル"などと、商品名を入れておくとＳＥＯ的にも有利になるかもしれません。

summary属性を入れたら４５点になりました。

画像にalt属性を入れるとＳＥＯで有利になる

alt属性は画像の上にカーソルを持っていったりときに表示されたり、画像が表示できないときに画像に変わって表示される説明文です。目の不自由な方にとっては、画像に代わって読み上げられる重要な情報となります。「画像１」や「タイトル画像」というような分ではなく、画像の内容が分かるような説明を書く必要があります。画像を説明するということは、画像が表現している商品や店舗に関する情報が書ける！ということです。検索エンジンはalt属性を読んでいるという説もあり、きちんとしたalt属性を書くということはＳＥＯ的にも有利となります。img src=....... alt="ディスプレイ用イーゼルで演出された素敵な店舗の画像"　などと書けば、イーゼル・店舗・素敵・演出などというキーワードを散りばめることができますし。

リンクはキーワードを含んだテキストで

リンクも大事です。画像でリンクするのはSEOとしては勿体ない話ですが、テキストならなんでもＯＫとはいきません。　「詳細はこちら」　でリンクするのではなく、リンク際の内容が分かるようなテキストを書きます。「店舗を素敵に演出するイーゼルの詳しい情報はこちら」などと書けば、飛び先に何があるか明示できるだけでなく、リンクを重視している検索エンジンに対し　店舗。演出・イーゼルなどのキーワードを読ませることができます。画像とリンクでキーワードの二重奏です。

最後にスタイルシートを整理して満点となりました

ＨＴＭＬ内からデザインに関する要素を追い出してスタイルシートとして定義することはＷ３Ｃの勧告に準拠している対応ですが、ＳＥＯ的にも検索エンジンが重要視しているＨＴＭＬ上部にキーワードを含んだテキストを配置できるというメリットがあります。

今回は、background や width、height　などの定義をスタイルシートに移行しました。これでデザインとコンテンツが分離されたすっきりしたページになりました。文法的にも１００点満点となりました。

このようにスタイルシートは便利なのですが、その場の思いつきでスタイルを定義していくと収集がつかなくなります。id で定義するのか、class で定義するのか？　名前をどうつけるのか？　定義する順番は？　・・・・。いったんページが出来上がったら、ＨＴＭＬだけでなくスタイルシートも見直して、整理しておくことが重要です。名前の不統一や使っていない定義があるかもしれません。それらを整理しておくと、次に変更するときに頭を悩ませずに済みます。明日の自分は他人になります。いつまでも記憶が残っていると思ったら大間違いです。

スタイルシートの例

ご参考までに、今回作成したスタイルシートを抜粋して表示しておきます。

/***********************************************/
/* イーショップ　クレモナ用スタイルシート      */
/* cremona.css                                 */
/***********************************************/
/***********************************************/
/* HTMLタグへのスタイル                        */
/***********************************************/
/*
body{
	color: #333333;
	margin: 0px;
	padding: 0px;
	width: 740px;
	background-color: #FFFFFF;
}
a:link, a:visited {
	color: #330000;
	text-decoration: underline;
}
*/
/* コンテンツ見出しのリンクには下線を表示しない */
/*
h3 a:hover {
	text-decoration: none;
}
*/
/***********************************************/
/* 画面の構成要素へのスタイル                  */
/***********************************************/
/* 全体テーブル　横幅 */
/*
.all {
	width:740px;
}
*/
/* タイトル　背景画像・文字位置 */
/*
.title {
	height:60px;
 	background-image:url(image/head02.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	vertical-align:middle;
}
*/
/*********    end of cremona.css      **********/

正しいＨＴＭＬの効果

Ｗ３Ｃの勧告や文法的な正当性の話については、さまざまな意見や立場があるようです。「別に文法的に間違っていても表示されているから問題ない！」　「文法的に間違いがあるサイトでも検索エンジンの上位にランクされているから関係ない！」

確かにそうかも知れません。でもＨＴＭＬの文法を考慮したＨＴＭＬを書けば、どんな環境でも製作者が意図した通りに閲覧してもらえたり、目の不自由な人の負荷を軽減したり、検索エンジン対策としても有利となります。さらに、変更作業が楽になります。

そんなに大変な作業ではありませんし、何が何でも間違いは許さない！　絶対に満点を取らないとダメだ！　というわけではありません。はじめにチョットした気配りをすればＯＫです。