第十七回　SEOのためのHTML・CSSについて [まぐまぐ！]

2007/05/14

第十七回　SEOのためのHTML・CSSについて

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇ 上位表示実現へ!XHTML・CSSで作るウェブサイト  ◇
◇ 発行：不定期　著作：淵上　喜弘【LLCJIRIKI】  ◇
◇ http://www.jiriki.co.jp　　　　　　　　　　　◇
◇ http://jiriki.jp     　　　　　　　　　　　　◇
◇ info@jiriki.co.jp　　　　　　　　　　　　　　◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

SEO・SEMブログが出来ました！
http://jirikiseo.blog94.fc2.com

いつもお世話になります。

現在多数のお問い合わせをいただいております。
メールをくださった皆様には申し訳ないのですが、
平均して返信まで3日程度かかっております。
ご迷惑をおかけいたしますがよろしくお願いいたします。

さて、今回は以前もお話したHTML・CSSについてです。
そもそもこのメルマガ自体がHTML・CSSについて取り上げるべき
なのですが、脱線することしばしばなので
やきもきなさる方もいらっしゃるかもしれません・・・。

そもそもHTML・CSSは苦手だと言う方も多くいらっしゃるようです。
自分なりの、自己流のHTML・CSSで結局はSEOが遠回りになるというケースも
少なくありません。
その例として、<h1>を置いてしっかり作ったつもりでも
構造化されていなくてSEO効果が全く無かった、であるとか。
せっかくのCSSを使いこなせずソースの上部にメニューがくる
（意図的にやることもありますが・・・。）だとか。

まずは基本をしっかりおさえること。これが大事です。
さぁ、「基本中の基本」から学んでいきましょう。
以下が例となるソースです。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="description" content="このサイトの紹介" />
<meta name="keywords" content="重要なキーワード" />
<link rev="MADE" href="mailto:担当のメールアドレスなど" />
<link rel="copyright" href="サイトURL" title="自社" />
<link rel="INDEX" href="index.html" />
<link rel="stylesheet" type="text/css" href="maincss.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss20.xml" />
<title>サイトタイトル</title>
</head>

<body>

<div id="container">

<h1><a href="サイトURL">重要なサイトタイトル</a></h1>

<div id="header">
<h2>サイトヘッダーの文言</h2>
</div>

<div id="wrapper">

<div id="content">
<h2>コンテンツタイトル</h2>
<h3>コンテンツサブタイトル</h3>
<div class="textarea">
<p>コンテンツ内容</p>
</div>
</div>

<div id="menu">
<ul>
<li><a href=#">メニュー1</a></li>
<li><a href=#">メニュー2</a></li>
<li><a href=#">メニュー3</a></li>
</ul>
</div>

<div id="footer">
<p>サイトコピーライト</p>
</div>

</div>
</div>



</body>
</html>

あくまでも基本ソースなのでお間違えないように。
私の場合は<h1>を<div id="container">の「外」に配置することが多いです。
サイトの見栄えなどからいうと上記ソースのように
<div id="container">の「中」がオススメです。

<div id="header">の部分はCSSで
div#header { background :url(--) no-repeat center top;}
などとして背景画像を設定することが多いですね。
ヘッダー部分にFlashを使う場合はHTMLソースに組み込みます。
<div id="header">の<h2>内の文章は画像にかぶさる感じでCSSでレイアウトします。
そうすることで画像と<h2>でマークアップした内容との「一致」で
ユーザーにサイトへの印象付けを行います。
（最近ではこの手法は古いですけど好きな手法です。）

<div id="wrapper">の中身はいよいよサイトのコンテンツ部分です。
<div id="content">だけでもいいのですが、私はこの構造をよく使います。
時と場合によって使い分けをしますが・・・。
<h2><h3>と連続したタイトル・サブタイトルはCSSで見栄えを制御します。
<h2>はこの場合<h2 class="title">とするほうがCSSでのソースが
作りやすいかもしれません。
h2 { border-left : 5px solid #f79910; padding : 0 0 0 10px;}
などとして<h2>のタイトルをイメージ的に強調します。
<div class="textarea">は私の好みです。
文章を枠で囲ったり、後からそこだけ背景を変えたい場合に使っています。
あらかじめ文章部分を区切っておくと見直しの際にも便利です。
通常は<p>から始まる段落の最初にキーワードを設置し、<em>でマークアップします。

<div id="menu">は本当ならば設置するメニューによっては
<div id="glovalnavi">だとか、<div id="siteinfonavi">とするほうが
いいかもしれません。これは好みの問題ですが・・・。
メニューはリスト要素なので<ul><li>を活用します。
こうしておくことでCSSをOFFにしてもどこがメニューなのかが分かりやすくなります。
本来ならば、CSSをOFFにしたときのことを考えるとソース上部に
メニューへのショートカットを設置し、CSSがONの状態ではhiddenに、
CSSがOFFの状態で現れるようにしておきます。
今回は割愛しています。

<div id="footer">の部分ですが、<p>とするか<address>とするか
悩みどころですが、通常<address>はフッターであまり使わないことと
CSSがOFFのときに「斜体」になるので<p>としました。

CSSですが、必ず書き出しは

@charset "Shift_JIS";
などとしておく方が無難です。
font-styleで「日本語フォント」を指定したときに
文字化けしないようにとの対策です。

このほかにもいったん全てをリセットする
* { margin : 0; padding : 0;}
などを指定しておくのが一般的です。

フォントと全体設定を別々のCSSファイルとした場合は
必ずCSSの最上部に
@import url(CSSのURL);
とすることでフォント・背景設定などのCSSを分けることが出来ます。
必ずセレクタよりも前に記述することが重要です。

次回はさらに基本的なCSSの書き方、HTMLの書き方を
「基礎の基礎」から学んでいきましょう。

その後に今回の内容を見直すと理解が深まるかもしれません。

**************************************************
■著者：淵上　喜弘【LLC JIRIKI　合同会社ジリキ】■
■http://www.jiriki.co.jp 　　　　　　　　　　　■
■http://jiriki.jp      　　　　　　　　　　　　■
■お問い合わせご質問は　info@jiriki.co.jp　まで ■
**************************************************