スタイルシートでSEO対策してみよう

CSS,スタイルシートでSEO対策しよう。W3C勧告は元々は表を書くための要素であるテーブルをページレイアウトへ使用することを推奨していない。テーブル要素はレイアウト用途に流用されていたのだが、それにはスタイルシートを使うべきだとある。SEOでスタイルシートを取り入れるメリット。それは何といってもレイアウトとデザインを自由に出来る事。

SEO,TOP初級SEOスクール中級SEOスクールオフページSEO XMLサイトマップ SEOテンプレート SEM 上位表示実験定番サイトとリンク

- Outline -
初級SEOスクール
- Constructions -
W3C勧告とDTD書式
静的と動的ページ
動的ページをindex
フレームとiframe
SEOとスタイルシート
- KeyWords -
キーワードの選び方
予想と結果の違い
密度と近接度の知識
見出し要素の使い方
論理強調の使い方
- Robots -
ロボットとクローラー
robots.txtの書式
ロボット対策メタタグ
- Others -
XMLサイトマップ
ステータスコード
404ページの作成
被リンク対策
- 上位表示実験 -

Yahoo Google Live Search のSEO対策ならASYで何でもわかる！

カスケーディング・スタイルシート,CSSの定義

CSSはHTMLとXMLの視覚効果をコントロールする技術で、カスケーディング・スタイルシート又は単にスタイルシートとも呼ばれる。現在はW3C勧告Cascading Style Sheets, level 2 revision 1 （略してCSS2.1）というバージョンが標準。

CSSを適用したページなら異なった環境でも（おおむね）同様な視覚効果を期待できる。従来ブラウザやOSの個性によって大きく異なっていた表示を気にせずにウェブサイト製作を可能にしたことがCSSの画期的なところ。

異なるブラウザでも同じ表示

マイクロソフトInternetExprolorを始めとした主要ブラウザはCSSに対応していますが、その仕様を完全な形で実装しているものはありません。そのためW3C勧告にはあるが実際には使えない要素が存在している。この点はSEOのみならずページデザイン上でも重要なので留意して下さい。

ウェブ製作者の期待する表示を実現するためにはコードの正確な記述が欠かせない。ウェブサイトの公開前に W3C CSS 検証サービスでチェックしておく事を推奨します。

スタイルシートでウェブサイト全体を作成

スタイルシートのSEO効果を最も発揮させる方法がウェブサイトをスタイルシートで作成する事です。この作業でのポイントは文章の本文をいかにして先にクローラーに読ませるかという点。 HTML内にスタイルシートを書かないようにするとなお良い。

スタイルシートの扱いは多分に論理的。CSSでのSEOは、初めてページソースを見る人よりも少しはHTMLを扱える人がいい。CSSを解説するウェブサイトは多く好みに合うサイトを探せると思います。
　用語解説用として手元に辞書があると便利。筆者も使っている定評あるHTML・XHTML・CSS辞典を紹介します。
詳解HTML&XHTML&CSS辞典第3版（アマゾンへのリンク）

ASY!はスタイルシートでできている

当サイトもスタイルシートでレイアウトしてある。SEOスクールの教材として、ASY!のこのページのページソースを取上げます。

style_2008.cssという名称のカスケーディング・スタイルシートがリンクされていて、ブラウザに読み込まれるようになっています。このファイルはページ枠の大きさや文字の大きさ・色などが指定されていて、ページデザイン全体を統括する役目を持っている。

CSSの有効･無効の差異このページでCSSを有効にしたときと無効にしたときの表示を見比べてみる。

CSSを無効にするとHTMLファイルなのに文字だらけで、テキストファイルの様に感じる。

実はロボット型検索エンジンは、下の様にテキスト情報だけを読み取っています。画像イメージやFLASHがSEOに貢献しない理由はここにあるのです。

下の画像で、「スタイルシートでSEO対策してみよう」という文章が大きな文字サイズで表示されているのを確認できます。その次に続く文章はページ上部に表示されるもの。
　このHTMLソースは次のようになっており、視覚だけでなく論理的にも強調されている事が分かるでしょうか。SEO的なポイントは見出し要素H1の直ぐ後にキーワードや関連語句が書かれ論理強調してある点です。

<h1>スタイルシートでSEO対策してみよう</h1>
<strong>CSS</strong>,<strong>スタイルシート</strong>で<strong>SEO対策</strong>しよう。W3C勧告は元々は表を書くための要素であるテーブルをページレイアウトへ使用することを推奨していない。

　こういったSEOを施すことで検索順位を上昇させることが出来ます。
このページは「スタイルシート　SEO対策」でGoogle5位Yahoo6位になりました。(2008/1/31)

CSSならばこのようなSEO処理を実現できるページレイアウトを比較的簡単に作成可能。テーブルでも作れなくは無いけれどもウェブサイト全体を更新するような作業での効率が劣ることとレイアウトの自由度が少ないことが欠点。　

スタイルシートを文字の表示制御に利用するメリット

ページレイアウトに使う他、スタイルシートの導入メリットには”文字の外見を自由に制御できる”がある。従来文字の外見を決定していたfontタグはHTML4.0からは非推奨になっていて、代りにスタイルシートで決定すべきとされている。

この事はデザイン面だけでなくSEOにも大きな意味があり、結論を先に言うとスタイルシートを使えば論理強調を思い通りにやれるメリットを得られる。ここからは、この点について解説します。

文字表示をCSSで制御する

SEOでキーワードを強調する場合、見出しや論理強調を用いる。そうするとブラウザは大文字や太文字、文字の上下の間隔を変更して表示する。でも、そのままや別の大きさの方が良い場合もある。スタイルシートはHTMLの解釈を変更できるので例えばH1とH6を同じ表示にすることが可能になります。

視覚的に強調したい文章と論理的に強調したい文章が異なる場合はよくあります。そのような時にスタイルシートで表示を調節すれば、視覚的な強調だけ行なわれた論理的には普通の文章にすることが出来ます。
　反対に論理的に強調された文章でも見た目は変わらない風にも出来る。この様に見かけを気にせずにSEO的な強調を実施可能な点が文字表示をCSSで制御するメリットなのです。

CSSで見た目をコントロールする例（相対サイズ）
h2 {
font-size: medium;
line-height: 120%;
margin-bottom: 0px;
}

CSSで見た目をコントロールする例（絶対サイズ）
h3 {
font-size: 16px;
line-height: 20px;
margin-bottom: 0px;
}

SEOとスタイルシート　おわり。　次は　キーワードの選び方　です。