WEBディレクターが考えるHTMLのファイル構成とSEOの関係 | Devil≒芝 webディレクターブログ

Devil≒芝 webディレクターブログ

webのあれこれを書きます。デザイン、htmlやcssだけでなく、web解析の手法からwebメディア構築のことを書いていきます。多分・・・。

webディレクターのdevil≒芝です。
ココ数日間は、仕事の方で、お祭り状態になっており、更新できませんでした・・・。
今日から復活します!!
今日は、前回の続きで、HTMLのお話です。
さて、HTMLの流れは掴めましたね!
実際にHTMLソースを表示するには、どのようにしているのか!?
今日のお話は、ココにします。
ブラウザにあるURLを入力します。すると、そのサイトに飛び、サイトを表示してくれます。
わずか1秒もかからない間に何がどうなって、サイトを表示されているのでしょうか?


ブラウザは、HTMLソース内に記述されている内容を読みます。
普通のサイトであれば、主に次の4つのフォルダを参照します。

  • .htmlファイル
  • .cssファイル
  • imgフォルダ
  • .jsファイル
  • 上記のフォルダをブラウザ側は、読み込んで、サイトを表現するようにできています。
    .htmlというのはサイトの大元のファイルですね。
    cssというのは、よく使う単語です。
    「css」という場合や「スタイルシート」と言うひとが多いです。
    cssの役割というのは、ズバリ、サイトのスタイルを決定するためのソースです。
    たとえば、「この画像は、この位置で!!」や「この文字は、○色で!」という指定をするソースです。
    これを駆使することで、PCでもスマホでも崩れないレスポンシブサイトができるわけです。
    jsファイルということが、上げられますが、これは、サイト内で、動きを入れる場合に使用したり、
    googleアナリティクスでサイト解析をする際にもjsを利用します。
    簡単なイメージは、最後に載せておきます。
    ただ、htmlソース内でも直接スタイルやJSを記述することも可能ですが、かなりお勧めできません!
    それは、いくつか理由があります。
    ソースコードが長くなることで、ブラウザの読み込み時間が長くなります!
    遅くなるのは、1秒ほどですが、WEBマーケティングの観点から考えると、その1秒でサイトの離脱率は跳ね上がります。

    次に一つのソースに複数の記述方式でソースを書いてしまうと、ファイルが煩雑になって、書いてる本人も訳が分からなくなります。

    最後にこれが一番大きな理由ですが、SEOの観点から考えると、検索エンジンボット(通称:検索ボット)に対して、必要な情報は、HTML内の本文箇所です。
    検索ボットも全てのHTML内の文章を読んでいる訳ではなく、ある程度の情報を読み込んでいるにすぎません。それよりも先にスタイルの情報などを読ませることは得策ではありません!!
    以上の理由より、幾つかのファイルに分けて記述します。
    次回は、もう少し、分けることの意義などを書きましょう!!
    ではでは!!


    htmlのファイル構成