SEO内部対策　其の１

CSSでSEO対策

「SEO初心者が最初からCSS！？」と思われている方！実は、CSSって結構簡単なんです。

しかも、ホームページが完成してからCSS様に修正するよりも、最初からCSSの使用を前提としてホームページを作成した方が楽なんです。

サンプルテンプレートも用意してありますので、SEO初心者の方も安心して実践して下さい。

CSSの必要性

CSSとは、ホームページのスタイルを指定する言語です。
“Cascading Style Sheets”（カスケーディング　スタイル　シート）の略で、それぞれの頭文字をとってCSSと呼ばれています。

ホームページはHTMLで記述されています。
HTMLでも凝ったデザインのホームページを作成することができますが、デザインを優先するほど複雑な記述を必要とします。
その結果、、ホームページの作成や修正も大変な作業になるだけでなく、ファイルサイズが大きくなり読み込み時間が長くなります。

CSSを使用する利点

見た目に関する変更は、CSSの変更だけで良い。
新しいホームページを作成する際に、過去のCSSを流用することで作業時間が短縮できる。
HTMLのファイルサイズを小さくすることで、読み込み時間が短縮されて、訪問者のストレスが減少する。
CSSでHTMLをすっきりさせると、検索エンジンが重要な文章や単語を拾いやすくなる。

などの利点が挙げられますが、SEO対策にとって重要なのは、最後の「検索エンジンが重要な文章や単語を拾いやすくなる」です。

つまり、拾いやすくなると言うことは、拾ったものが検索結果に反映されやすくなると言うことです。

CSSを外部ファイルで読み込みさせる！

CSSの読み込みさせる指定方法は幾つかありますが、ここではSEO対策様にCSS外部ファイルの使用を前提とします。

外部ファイルとは、別にファイルを作って、そのファイルを読み込んで使用する方法です。

SEO初心者でも簡単にできるようにサンプルテンプレートを用意していますので、ダウンロードして任意の場所に解凍して下さい。

※サンプルテンプレート【2カラム右メニュー】のダウンロード

解凍すると、index.htmlとstyle.cssが同じフォルダーに入っています。「sitemap.html」は、「SEO外部対策　其の１/サイトマップでSEO対策」で使用するファイルです。
フォルダーの名前は、変更して頂いても結構ですが、今後の説明の為index.htmlとstyle.css、sitemap.htmlを同じフォルダーで、任意の場所に置いて下さい。

１．CSSの外部ファイルの読込みを指定する。

サンプルテンプレートのindex.htmlをブラウザにドラック＆ドロップして下さい。

ヘッダー部分、メイン部分、フッター部分と言う構成で、メイン部分にメインコンテンツ部分とメニュー部分を入子にしています。

それぞれのボックスのボーダーは、解りやすいように色をつけています。

ソースを見て下さい。

このサンプルは、外部ファイルのCSSを読み込んでHTMLをすっきりさせています。

CSSの外部ファイルを読み込む為のタグは、以下のタグです。

<head>～</head>間に記述します。

<head>
　<title>キーワード+ホームページ名+ページの情報</title>
　<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
　<meta name="keywords" content="キーワード1,キーワード2,…">
　<meta mame="description" content="ページの詳細">
　<link href="style.css" rel="stylesheet" type="text/css">
</head>

これだけのタグでCSS外部ファイルを読込みます。

HTMLファイルを別の階層に置く場合は、href="style.css"を書き換えて下さい。
絶対パス（httm://から始まる形式で指定する方法）、相対パス（起点になるファイルから指定する方法）のどちらでもOKです。