Yahoo！ビジネスエクスプレス他
CSSはKISSに好かれるわけは？
前項、「KISS（キス）が好き？」では、SEOはKISSを好み、KISSの実施におては「css（スタイルシート）」や「js（ジャバスクリプト）」を好むことに触れました。
このページでは、「css（スタイルシート）」について簡単に述べます。
CSSとは、「Cascading Style Sheets」の略語で、CSS（シーエスエス）と呼ばれたり、スタイルシートと呼ばれたりします。
CSSは、HTMLに対して、見栄え（スタイル）を指定する言語です。
HTMLは文書を記述する目的として生まれて来たため、スタイル（ページ上のデザインなど）の部分を表現するのに限界がありました。 その限界を補うことと、スタイルと文書を分けて記述する目的として、
このCSS（スタイルシート）は考案されました。
その結果、ホームページ作成時において、デザインとコンテンツ（文章）を、別々に定義することが出来るようになりました。
CSS（スタイルシート）が重要なわけ
CSSはSEO対策上、非常に重要な要素の１つです。では、スタイルシートはSEO対策にどのように使われているのでしょう。
①例えばSEOに効果的ですが、見た目があまりよくないH1タグのスタイル変更など、HTML上の表示が変更できます。
<h1>SEOランドは検索エンジン最適化を応援</h1>
このページの見出しタグは、上記のように記述されますが、ページでの表示は、下記のようになります。「CSS定義なし」だと、見ての通り見た目にも不細工と言う他ありません。
CSS定義なし SEOランドは検索エンジン最適化を応援
CSS定義あり SEOランドは検索エンジン最適化を応援
上記の「CSS定義あり」の表示は、当「SEOランド」がページのデザインを考慮して、HTMLの外部に設けた CSSフォルダ内に styles-site
ファイルを作成
/* ヘッダーコンテンツ */
header h1{color:#ff6262;
font-size:14px;
padding:0;
float:left;}
と記述指定、サーバーへアップした結果です。
CSSの、外部からの読み込みの指定は、
<link rel="stylesheet" href="css/styles-site.css"
type="text/css" /> などとします。
参考までに、このページ上部の 「表示（V）」→「ソース（C）」を開くと、<head> 内に記述されているのが確認できるでしょう。
②<table>など、不必要なソースコードを省いて、ページ記述を単純化出来ます。
下記の、HTMLの<table>タグとCSSで書かれた、２つのボックスを見比べてください。
|
豆知識 また、SEOの外部的要因の被リンクは、リンク先のPR(ページランク)にもよりますが、相互リンクの場合は５０％の評価点、片リンクの場合は１００％の評価点がつけられます。 |
<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=0 align="center" border="1">
<TBODY>
<TR>
<TD bgcolor="#eeeeee" width="540">
<p><B>豆知識</B><BR>検索エンジンが検索時の表示順位の評価点数配分は、現在 Yahoo！の場合は、そのホームページのSEOの内部的要因は３０％、被リンクなどの外部的要因は７０％ということです(間違った情報であれば、どなたか訂正情報をお知らせください。<A href="mailto:seo@ecocoland.com">メール</A>)。</p>
<p>また、SEOの外部的要因の被リンクは、リンク先のPR(ページランク)にもよりますが、相互リンクの場合は５０％の評価点、片リンクの場合は１００％の評価点がつけられます。</p>
</TD>
</TR>
</TBODY>
</TABLE>
豆知識
検索エンジンが検索時の表示順位の評価点数配分は、現在 Yahoo！の場合は、そのホームページのSEOの内部的要因は３０％、被リンクなどの外部的要因は７０％ということです(間違った情報であれば、どなたか訂正情報をお知らせください。メール)。
また、SEOの外部的要因の被リンクは、リンク先のPR(ページランク)にもよりますが、相互リンクの場合は５０％の評価点、片リンクの場合は１００％の評価点がつけられます。
<div id="wrapper2">
<p><B>豆知識</B><BR>検索エンジンが検索時の表示順位の評価点数配分は、現在 Yahoo！の場合は、そのホームページのSEOの内部的要因は３０％、被リンクなどの外部的要因は７０％ということです(間違った情報であれば、どなたか訂正情報をお知らせください。<A href="mailto:seo@ecocoland.com">メール</A>)。</p>
<p>また、SEOの外部的要因の被リンクは、リンク先のPR(ページランク)にもよりますが、相互リンクの場合は５０％の評価点、片リンクの場合は１００％の評価点がつけられます。</p>
</div>
お解りいただけますか？
２つのボックスの表示は、ブラウザで見る限り、ほとんど同じです。しかし、両方のソースコードには明らかな違いを感じたはずです。
CSSを使った場合、ソースコードが物凄く簡潔になります。このように、余分なソースコードを省くことによって、検索エンジンが重要な文章や単語を拾いやすくなります。拾いやすくなるということは、検索結果に反映されやすくなるということです。
参照サイト
「とほほのスタイルシート入門（基礎知識）」
：CSSの基礎を学べます。
http://www.tohoho-web.com/css/basic.htm
「カスケーディングスタイルシート(CSS)を検証」
：すでにCSSを使用の場合、間違いがないかチェックできます。
http://jigsaw.w3.org/css-validator/
「スタイルシート リファレンス」
：CSS例文
http://www.openspc2.org/CSS/index.html
コメントする