第二十二回　HTML・CSSの基礎　【その4】 [まぐまぐ！]

2007/07/23

第二十二回　HTML・CSSの基礎　【その4】

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

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

夏本番といった感じの陽気になってます。
皆さんも体調管理に気をつけてくださいね！

去る7月20日ヤフーのアルゴリズム更新がありました。
作業自体は週末までに完了していると思われます。
皆さんのサイトでは順位変動があったでしょうか？
当社サイトはとりあえず大きな変動もなく上位キープです。

今回のアルゴリズム更新では、
キーワード出現頻度＞被リンク
のようなアルゴリズムになっていそうです。
ここで注意しなければならないのは被リンクの精度までは
link:http://
でははかれないということです。
リンクの数自体はわかっても、そのリンクをヤフーが評価しているかまでは
これでは分かりません。
単純なリンクの数を調べるだけにとどめておくワザでしょう。

ヤフーアルゴリズムは概ね下記のローテーションが組まれているといわれています。

1．被リンク＋キーワード
2．内部リンク＋被リンク
3．ランダム組み合わせ

これを良く念頭において対策をしておけば、
現状では大きな変動は無いといえるでしょう。
これに関しては詳しくまたブログで取り上げていきます。

さて、本題。
以前メルマガで配信したソースはまだお持ちでしょうか？
これを元に解説をしていきます。
以下ソース解説です。

＜?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="ウェブサイトの概要説明50文字程度" />
＜meta name="keywords" content="ウェブサイトのキーワード5つ程度" />
＜link rev="MADE" href="mailto:あなたのメールアドレス" />
＜link rel="copyright" href="あなたのサイトアドレス" title="著作者名" />
＜link rel="INDEX" href="index.html" />
＜link rel="stylesheet" type="text/css" href="maincss.css" />

＜title>サイトタイトル（短めにキーワードを含めて）</title>
＜/head>

上記は説明するまでも無いでしょう。
基本的なXHTMLのルールが記述されているだけです。
meta　のキーワードやサイト要約は現在でも有効です。
必ず記述するようにしましょう。
title　内はキーワードから始まるサイト名が有効です。
この場合も注意すべきなのは例えば、「サッカー」と「- サッカー」では
別のキーワードとなります。
地域キーワードを例にとれば、「東京のオフィス」と「東京オフィス」では
異なるキーワードとして評価される可能性が高くなります。

＜div id="container">

＜h1>サイトタイトルとキャッチフレーズ（キーワードを含めて）</h1>

＜div id="wrapper">

＜div id="textbox">
＜h2>コンテンツタイトル</h2>
＜h3>コンテンツサブタイトル</h3>
＜p>＜em>キーワードから始まるコンテンツの内容。テキストエリア</em></p>
＜/div>

＜div id="headnavi">
＜ol>
＜li>＜a href="#">メニューリンク</a></li>
＜li>＜a href="#">メニューリンク</a></li>
＜li>＜a href="#">メニューリンク</a></li>
＜li>＜a href="#">メニューリンク</a></li>
＜/ol>
＜/div>

＜div id="footer">
＜p>COPYRIGHT © 2006-2007 コピーライト表記</p>
＜/div>
＜/div>
＜/div>

＜!-- アクセス解析はココに設置 -->

＜/body>
＜/html>

上記はCSSを有効に活用する例です。
ナビゲーションを左カラムに設置するには旧来のテーブルレイアウトだと
HTML上部に記述する方法が一般的でした。
しかし、CSSを用いることでHTML内のどこにあろうが、
左カラム・ページ上部などにメニューを配置できます。
これによってキーワードを多く含む「コンテンツ」の内容を
HTML内上部に記述し、SEO効果を高めることが出来ます。

＜div>というのは一つのブロックで固めるとイメージしてください。
＜div>を使えば、「ここはメニュー」「ここはコンテンツ」「ここはサイト全体」など
HTMLを「区分け」して制作することが可能となります。
DTD的に正しい説明ではないかもしれませんが、上記のようなニュアンスで
理解することがもっとも楽だと思います。

＜div id="textbox">内を見てください。
h2、h3を使って大見出し、小見出しとすることでキーワードを出現させ、
尚且つページを見てくれるユーザーにも分かりやすい表記が可能です。
h2だけで見出しをつけると、キーワードから始まることばかりを
優先してしまい、文章的に読みづらくなることが多いのです。
h2、h3でマークアップをすることで、文章の整合性を取りながらも
SEO効果を引き出すことが可能です。
p　内も同様に基本的に「キーワード」から文章を書き始めるクセをつけてください。
検索エンジンは基本的に英語圏で生まれ、発達してきました。
英語の文法は基本的に結論から先に書きますよね？
そう、検索エンジンも文章の初めには「重要な単語」が含まれていると
認識しているのです。
これは現在の検索エンジンにも息づいていますが、徐々に日本語向けにも
変わってきているかもしれません。
現状ではキーワードからの書き出しは有効です。

また、p　内の書き出しを　em　でマークアップし、
文章を弱強調します。HTMLでは　strong＞em　なのですが、
ここではあえて　em を使います。

CSSソースも解説を入れようと思ったのですが、
SEOのための各種分析の手法を次回から始めていきたいと思います。

CSSソースへの質問は別途お受けいたします。

それでは次回にお会いしましょう。

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