新しい記事を書く事で広告が消せます。
Ads by Google
SEO対策に強いCSSの書き方
[検索エンジンによるテキスト評価のしくみ]でも触れたように、「検索エンジンのクローラーはHTML文の最初の100行しか評価しない」ので、上位表示させるにはサイトの構成がとても重要になる。そのため、ここでは大事なこと（主張したいこと）をなるべくhtmlの上のほうに書くようにするための、CSSの書き方を説明する。
サイトの構成（見た目）はCSSで書こう
MacromediaのFireworksやDreamWeaverを使えば、Fireworksでデザインをするだけで、自動的にhtmlの<table>タグを使って、見た目そのままのサイトを構築することができる。しかし、これはSEO対策的にはとても良くない。サイトを複雑な構成にする場合、<table>タグは<tr>や<td>を使って、そして何層にも<table>タグを使わなければならない。
タグは検索エンジンにとって、その中に書かれているものの意味づけをするものであり、サイトの構成（デザイン）を決めるものではない。<table>タグは元々、表を使うのに用いるタグである。ということは、検索エンジンは<table>タグで構成されたサイトを一つの表としてしか見なさないため、当然重要度は落ちる。
また、ウェブの標準規格を決める団体W3Cにおいても、サイトの構成はhtmlとは別にCSSで書くことを推奨している。
SEO対策に強いCSSの書き方
■CSSは別ファイルとして書く
htmlの中にCSSを書くことはもちろん可能だ。だが、CSSを検索エンジンのクローラーに読み込ませても何の意味もない。むしろ、重要キーワードの密度が薄くなり、逆に悪影響を及ぼす。
CSSを外部ファイル化するにはどうしたらよいのかというと、まずメモ帳かなにかで、「xxx.css」というファイルを生成する。その中にhtmlの中に書いてあったCSSを書き写す。以下のような感じになるかな？
これらが書き終わったら、htmlファイルからCSSを呼び出すコードを挿入する。
以下のコードをhtmlの<head></head>の中に挿入しよう。
<link href="/css/xxx.css" rel="stylesheet" type="text/css" />
この場合、CSSファイルはどこにおいても良いのだが、SEO対策として一番良いのは、[robot.txtでpagerankを上げる方法]でも紹介したように、CSS専用のフォルダを用意して、その中にCSSファイルはすべて保存し、そのフォルダすら検索エンジンのクローラーに読ませないようにすることだ。
そうすることによって、ウェブサイト全体がシンプルな構造になり、検索エンジンに好まれる。
■floatを上手に使う
[検索エンジンによるテキスト評価のしくみ]でも触れたように、そのページで書きたいコンテンツをhtml内ではなるべく先にもってこなければならない。
普通ウェブサイトの構成は、まずヘッダーがあり、その下に「左・真ん中・右」という３カラム構成か、「左・右」という２カラム構成になっている。そして、最後にフッターを持ってきて締めるというのが普通のウェブサイト構成だ。
ヘッダーでは、そのサイトのタイトルや全体的な誘導を促すメニューボタン（リンク）を入れ、検索エンジンにスムーズにサイト全体を回ってもらうようにしよう。
その次に書くのが、そのサイトのコンテンツだ。そのコンテンツを書くときに「左・真ん中・右」という３カラム構成か、「左・右」という２カラム構成にするわけだが（しなくてもよい）、感覚的に左のカラムからhtmlに書いていく人が多いだろう。左側がそのページの中心となるコンテンツであれば問題ないのだが、右や真ん中にある場合に、左のコンテンツを先に書いてしまうのはもったいない。
「検索エンジンのクローラーはHTML文の最初の100行しか評価しない」のだ。先に書くのはもちろんそのページの中心となるコンテンツでなければならない。
つまり、「左・右」の２カラムで右側に重要コンテンツがあるのであれば、そのコンテンツからhtmlに先に書き、<div id="right">で囲み、CSS内で
#right {
float: right;
}
とすればよい。CSSがまだよくわからない人は、「CSS」で検索して勉強しよう！
「左・真ん中・右」の３カラムで真ん中に重要コンテンツがある場合は、そのコンテンツからhtml内に先に書き、<div id="center">で囲む。
次に左コンテンツをhtml内に書き、<div id="left">で囲む。
次に右コンテンツをhtml内に書き、<div id="right">で囲む。
次に真ん中と左コンテンツを<div id="leftcenter">で囲む。
最後にCSS内で、
#leftcenter {
fload:left;
}
#center {
fload:right;
}
#left {
fload:left;
}
#right {
fload:right;
}
とすればよい。
ここでは、幅を書かなかったが、しっかりと計算した上で幅を決め、CSSで指定するようにしよう。
サイトの構成（見た目）はCSSで書こう
MacromediaのFireworksやDreamWeaverを使えば、Fireworksでデザインをするだけで、自動的にhtmlの<table>タグを使って、見た目そのままのサイトを構築することができる。しかし、これはSEO対策的にはとても良くない。サイトを複雑な構成にする場合、<table>タグは<tr>や<td>を使って、そして何層にも<table>タグを使わなければならない。
タグは検索エンジンにとって、その中に書かれているものの意味づけをするものであり、サイトの構成（デザイン）を決めるものではない。<table>タグは元々、表を使うのに用いるタグである。ということは、検索エンジンは<table>タグで構成されたサイトを一つの表としてしか見なさないため、当然重要度は落ちる。
また、ウェブの標準規格を決める団体W3Cにおいても、サイトの構成はhtmlとは別にCSSで書くことを推奨している。
SEO対策に強いCSSの書き方
■CSSは別ファイルとして書く
htmlの中にCSSを書くことはもちろん可能だ。だが、CSSを検索エンジンのクローラーに読み込ませても何の意味もない。むしろ、重要キーワードの密度が薄くなり、逆に悪影響を及ぼす。
CSSを外部ファイル化するにはどうしたらよいのかというと、まずメモ帳かなにかで、「xxx.css」というファイルを生成する。その中にhtmlの中に書いてあったCSSを書き写す。以下のような感じになるかな？
#page_left {
float: left;
margin: 0px;
padding: 0px;
width: 460px;
}
#page_right {
float: left;
margin: 0px;
padding: 0px;
width: 460px;
}
これらが書き終わったら、htmlファイルからCSSを呼び出すコードを挿入する。
以下のコードをhtmlの<head></head>の中に挿入しよう。
<link href="/css/xxx.css" rel="stylesheet" type="text/css" />
この場合、CSSファイルはどこにおいても良いのだが、SEO対策として一番良いのは、[robot.txtでpagerankを上げる方法]でも紹介したように、CSS専用のフォルダを用意して、その中にCSSファイルはすべて保存し、そのフォルダすら検索エンジンのクローラーに読ませないようにすることだ。
そうすることによって、ウェブサイト全体がシンプルな構造になり、検索エンジンに好まれる。
■floatを上手に使う
[検索エンジンによるテキスト評価のしくみ]でも触れたように、そのページで書きたいコンテンツをhtml内ではなるべく先にもってこなければならない。
普通ウェブサイトの構成は、まずヘッダーがあり、その下に「左・真ん中・右」という３カラム構成か、「左・右」という２カラム構成になっている。そして、最後にフッターを持ってきて締めるというのが普通のウェブサイト構成だ。
ヘッダーでは、そのサイトのタイトルや全体的な誘導を促すメニューボタン（リンク）を入れ、検索エンジンにスムーズにサイト全体を回ってもらうようにしよう。
その次に書くのが、そのサイトのコンテンツだ。そのコンテンツを書くときに「左・真ん中・右」という３カラム構成か、「左・右」という２カラム構成にするわけだが（しなくてもよい）、感覚的に左のカラムからhtmlに書いていく人が多いだろう。左側がそのページの中心となるコンテンツであれば問題ないのだが、右や真ん中にある場合に、左のコンテンツを先に書いてしまうのはもったいない。
「検索エンジンのクローラーはHTML文の最初の100行しか評価しない」のだ。先に書くのはもちろんそのページの中心となるコンテンツでなければならない。
つまり、「左・右」の２カラムで右側に重要コンテンツがあるのであれば、そのコンテンツからhtmlに先に書き、<div id="right">で囲み、CSS内で
#right {
float: right;
}
とすればよい。CSSがまだよくわからない人は、「CSS」で検索して勉強しよう！
「左・真ん中・右」の３カラムで真ん中に重要コンテンツがある場合は、そのコンテンツからhtml内に先に書き、<div id="center">で囲む。
次に左コンテンツをhtml内に書き、<div id="left">で囲む。
次に右コンテンツをhtml内に書き、<div id="right">で囲む。
次に真ん中と左コンテンツを<div id="leftcenter">で囲む。
最後にCSS内で、
#leftcenter {
fload:left;
}
#center {
fload:right;
}
#left {
fload:left;
}
#right {
fload:right;
}
とすればよい。
ここでは、幅を書かなかったが、しっかりと計算した上で幅を決め、CSSで指定するようにしよう。
無料SEO対策でアクセスアップ
コメント
コメントの投稿
トラックバック
- トラックバックURL:
- http://seodoc.blog95.fc2.com/tb.php/24-31e97c1c
