 |
 |
|
アクセスアップ対策 SEO対策編（２）HTMLのSEO対策ＳＥＯ対策ということで、色々なサイトを調べてみると、 ○HTML上の論理構造をはっきりさせること という文章をよく目にします。 そのことを頭において、自分のサイトのHTMLを眺めてみると、もともと『表（<table>タグ）』を、レイアウトを形成する為の基本として用いていたので、Ｗｅｂを視覚的に見た場合は、整っているように見えても、論理構造がほとんど構成されていなかったように思いました。 『論理構造』というと、いまいちピンと来ないかも知れませんが、簡単に言うと、 ○HTMLのソースを上から順番に眺めていった時に、秩序だっているかどうか という事になると思います。
それと、<table><tr><td></td></tr></table>のようなタグを多く使わなければならないので、少し複雑なページを作ると、作成されたHTMLのファイルが大きくなってしまう傾向があります。 この問題をクリアする第一歩として、表を用いないページ作成に取り組みました。 スポンサード リンク <div>タグを使ったレイアウトの構成こんなイメージです簡単に説明するとこんな感じです。<div>〜</div>は、箱を作るとイメージすると良いと思います 。そして、その箱に新しい箱を、右に入れるとか、左に入れるとか考えながら入れ込んでいくのです。 （以下で使用する、idやclassの名称は、各自が任意に指定できます。） 【例１】
※ 文章で言うと
なんせ、体で覚えてますので、このくらいのコメントが精一杯なのです・・・^_^; これの何がSEO対策として有効なのかということなのですが・・・
前に書いた<table>タグを使わないことによって、HTMLファイルのスリム化が出来るということ以外の重要な事があります。
【例１】のようなレイアウトを作ろうとしたとき、<table>タグを用いて記述しようとすると、<div id="left">の位置に表示したい内容は、HTMLの記述は<div id="right">の内容よりも先に記述することになります。
SEO対策では「HTMLのはじめに記述される内容があとに記述される内容よりも重視される」といわれています。
ですから、 ■デザイン上<div id="left">の位置にメニューを表示し、<div id="right">の位置にコンテンツを表示したい ■SEO対策上、メニューよりもコンテンツを先に表示したい
という矛盾を抱えた状態になる事があります。これを解決できるのが、この<div>を使ったレイアウトの構成なのです。
この方法を用いれば、<div id="left">の内容を<div id="right">よりも前に記述しても、あとに記述しても、両者には違いはなく【例１】のような表示を実現する事ができるのです。 【例２】
スタイルシートはページのＨＴＭＬソースに記述することも出来ますが、外部ファイルにして、他のページも共通で使えるようにした方が良いと思います。 ファイル名は、「.css」で終わる名称にします。例えば、「test.css」といった感じです。 そして、そのスタイルシートを使うということを、HTMLソースの<head> 〜</head>部分に記述します。 【例】<link rel="stylesheet" href="test.css" type="text/css">
あとは、必要な項目をスタイルシートに記述するだけです。 【例】/*----- 構成 -----*/ ※ちなみに、「/* */」で囲まれた内側にコメントを書くことが出来ます。 スタイルシートの検証ツールがありますので、ご紹介しておきます。注意点複数のブラウザで表示を確認するブラウザの種類によって、見え方が大きく変わることがあります。最低、ＩＥとネスケでの表示は確認する方が良いと思います。
DIVの高さ（height）と幅（width）を常に意識すること積み木が上手く積みあがらないように、幅や高さの合わないボックスも上手く納まってくれません。marginやpaddingのサイズも影響しますので、上手くいかないときは、その辺のサイズも替えたりして試してみて下さい。 ■Internet
Explorer■ |
