SEO対策Info.
  • home
  • inquiry
  • site map
SEO対策。あなたにもできる。

外部ファイルを利用する

ソースをスッキリ見せる為に

あなたのサイトを見る、評価する為に、クローラーが巡回してきてチェックをしていきます。その時にあなたのサイトの見た目がどんなに綺麗な色遣いで見やすいサイトだったとしても、それはクローラーからしたら意味がありません。それは訪問者に対してしか意味がないのです。 クローラーはサイトのソースを見ているだけなのです。
どんなに人の見た目が綺麗なサイトでもソースがゴチャゴチャしていてクローラーが読み込みに時間が掛かってしまってはそれは検索エンジン側からすれば良いサイトではなくなってしまう可能性があるのです。折角頑張って、CSSを多様したり、java scriptを使って努力しても検索エンジンに良いサイトと思って貰えなければ意味がないですのでソースをいかにスッキリさせるか考えてみましょう。

CSSを外部ファイルに移動してみる

まずは、サイト作りに欠かせないCSSを外部ファイルに移動してみる事にしましょう。
現在HTMLのソース上にCSSも書いている人が対処になります。例えば、
<head>〜</head>の間の中に
<style type="text/css">
<!--
p { color:red; }
-->
</style>

と言うような記述をしている物です。この記述では<p>の要素の中のテキストはすべて赤ですよと言う指定がされているのですが、<p>の中のテキストがすべて赤と言う命令をするだけで5行ものスペースを取ってしまっているのが分かりますね。するとその分だけ大事な本文への到着が遅くなるばかりか、クローラーが読みとらないで次のサイトへ行ってしまう可能性もあるのです。
それではすごくもったいないと思いませんか。 この5行があるせいで本文が5行も読んで貰えなかったらキーワードを上手く絡めた良い文章でも全く意味が無くなってしまいます。
そこでこの、スペースを取りすぎている5行を外に出してしまうのです。

実際にCSSを外部ファイルへ

それでは実際に出してみましょう。
まず、必要になるのが、テキストエディタです。これは、フリーの物が沢山ありますので、自分の好きな物を利用して下さい。もちろん今までサイト作成の為に使っていたい物でもかまいせん。
準備したテキストエディタに
<style type="text/css">
<!--
p { color:red; }
-->
</style>

の中から
p { color:red; }
だけを取り出して、記入します。あとは不要になった
<style type="text/css">
<!--

-->
</style>

の部分を削除すれば、これで<p>の中のテキストは赤にすると言う命令が外部のファイルに移動する事が出来ました。
後は、移動する為に新しく作成した外部ファイルを保存します。ファイル名はお好きな物でいいのですが、拡張子(ファイル名.○○○の○○○の部分)を半角の小文字でcssにして下さい。これだけで外部のCSSファイルが完成した事になります。
今回はすべての<p>の中と言う指定だったのですが、特定のclass名を付けて個別に指定をしている部分もあると思いますが、やり方は同じで指定したclass名の前にドット(.)を付けるようにして下さい。
これだけで外部CSSが完成します。簡単ですよね。

HTMLファイルに反映させる

外部CSSファイルにすべてのcssを移動させたら作業の3/2は終了ですが、最後の工程が残っています。それはHTMLファイルに反映をさせないといけません。
外部にファイルを作っただけでは実際のページには反映されませんので、外部CSSファイルを作っただけで安心しないで下さい。
では、反映の仕方なのですが、HTMLの記述の上の所にある<head>〜</head>の間に以下のソースを記入するだけです。
<link href="外部CSSファイルを入れているフォルダ/ファイル名.css" rel="stylesheet" type="text/css" />
もし、他のHTMLと同じ階層に外部CSSファイルを置いている場合は
<link href="ファイル名.css" rel="stylesheet" type="text/css" /> と言うようになります。
この一行を記入するだけで外部CSSファイルに移動したCSSが反映されますので、いままで何十行もCSSをHTML内に記入していた人はかなりソースをスッキリさせる事ができたのではないでしょうか。