Webサイト作成 TIPS
SEO対策概要
SEO対策 bodyタグ直後のキーワード記述
bodyタグ直後のキーワード記述 css+html
ここでは前項目で確認したサンプルのうちCssとhtmlで実現する場合のソースを解説します。
基本的なCss+htmlでのサイト作成方法を理解している事を前提として記載いたします。
ポイントは以下のような構造でCSSを利用したページ設計を行い。
div id=headerタグ内に記述される各種要素をCSSから制御させてしまう点です。
以下は一番簡単なpaddingを利用した記述としています。
別の方法として、以下の表記と同様にcssからpositionを指定して記述する方法もあります。
同様の手法で
要素の直後に更に
要素などを記述して、検索キーワードを沢山網羅させる事も可能です。
【htmlソース】
単純にbody直後の内容としては、h1要素以前にはdiv要素だけとしている。
h1要素は、見出しであると同時に一番最初に記述されているテキストであることから検索エンジンロボットには最重要キーワードとして認識される。
<body> <div id="container"> <div id="header"> <h1>検索エンジンキーワード対策用に最適化された文章</h1> </div> <!-- div id headerの終了--> ・ ・ ・ ・ ・ ・ ・ ・ </div> <!-- div id containerの終了--> <body>
【Cssソース】
上位のdiv要素としてcontainerを指定しておく事により、div要素headerが扱いやすくなる。また、以下のように記述する事でdiv要素header以外のh1要素には影響を与えない。
/* div id */
div#container{
width:788px;
padding:0 1px 0 1px;
margin:0 auto;
}
/* div id header ヘッダーでロゴのイメージなどを指定しておく
高さなどはサイトに合わせて記述*/
div#header {
height:100px;
background:url(images/logo.jpg) no-repeat left top;
}
/* このサンプルでのポイントは、div id header中のh1要素に対して
paddingを指定して表示位置を制御している点です。
このやり方を使えばheader中のどこでも自由な位置で検索エンジン用の
キーワードを挿入する事ができます。*/
div#header h1 {
font-size:13px;
font-weight:normal;
color:#000000;
padding:4px 0 0 15px;
}