Webmarketing

SEO内部施策 サイトの構成について ファイル編

Posted 2月 22 2013 by NABE  , ,

SEO対策とサイト構成 ファイル編

適切なサイト構成のお話の続編です。
今回はタグの話ではなく、HTMLやCSSやJavaScriptに関する内容です。

webサイトを構成しているファイル

最近のwebサイトの開発ではこの3つの組み合わせが主流です。(筆者偏見の可能背有り)

  • HTML
  • ホームページの構成や、ページに表示する文字等の情報を定義する言語です。

  • JavaScript
  • 様々な動作を付加

  • CSS
  • デザイン構成

それではここで今一度、各々について確認していきましょう

HTML,JavaScript,CSS

HTML

HTMLはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)のイニシャルです。
文章に様々なマークを付けて(マークアップ)記述する言語です。
通常のテキスト(紙ベース)のものを超え、ハイパーリンクを埋め込むことが可能であるテキストなのでハイパーテキストというそうです。
(※ハイパーリンク:webページ上で、青い下線付きの文字をクリックするとページが移動するリンクのことです。)

  • ソースコード
  • <html>
    <head>
    <title>SEO | SAKブログ</title>
    </head>
    <body>
    <h1>SEOの概要</h1>
    <p>最近ではインターネットが当たり前のものになりました。</br>
    お年寄りの方も、とても上手にインターネットで様々な情報を取得しています。</br>
    当然利用者が多いということは、そこがビジネスに繋がります。</p>
    <p>SEO対策とは自分のサイトを、狙った通りのキーワードで検索結果の上位に表示させるための対策です。</p>
    </body>
    </html>
    
  • 実行結果

JavaScript

JavaScriptはHTMLを組み合わせることで、「動き」のあるホームページを作成することができるスクリプト言語です。
(※名前が似ているjavaとはまったくの別物です。)

実行結果を見ていただくと、2つのダイアログがあります。
JavaScriptはブラウザによって動作が異なり、上がFirefoxで下がGoogleChromeです。

  • ソースコード
  • <html>
    <head>
    <title>SEO | SAKブログ</title>
    </head>
    <body>
    <h1>SEOの概要</h1>
    <p>最近ではインターネットが当たり前のものになりました。</br>
    お年寄りの方も、とても上手にインターネットで様々な情報を取得しています。</br>
    当然利用者が多いということは、そこがビジネスに繋がります。
    </p>
    <p>SEO対策とは自分のサイトを、狙った通りのキーワードで検索結果の上位に表示させるための対策です。</p>
    
    <input type="button" value="ブックマーク" name=bmark
    	onclick="javascript:alert('ブックマーク完了');">
    </body>
    </html>
    
  • 実行結果

CSS

CSSはCascading Style Sheets(カスケーディング・スタイル・シート、カスケード・スタイル・シート)のイニシャルです。
webページのデザインを制御する規格で、ページのスタイルだけをまとめて記述します。

  • ソースコード
  • <html>
    <head>
    <title>SEO | SAKブログ</title>
    </head>
    <style type="text/css">
    <!--
    p em{color : #0099ff;}
    -->
    </style>
    <body>
    <h1>SEOの概要</h1>
    <p>最近ではインターネットが当たり前のものになりました。</br>
    お年寄りの方も、とても上手にインターネットで様々な情報を取得しています。</br>
    当然利用者が多いということは、そこがビジネスに繋がります。
    </p>
    <p>SEO対策とは自分のサイトを、<em>狙った通りのキーワード</em>で検索結果の上位に表示させるための対策です。</p>
    
    <input type="button" value="ブックマーク" name=bmark
    	onclick="javascript:alert('ブックマーク完了');">
    </body>
    </html>
    
  • 実行結果

よく見かけるサイト構成

さて、現状ですと下図のような構成が非常に多いです。
見ての通りHTMLの中にCSSやJavaScriptを直接記述しています。
上記の私のサンプルも同じです。

この記述の仕方はSEOの観点からみると「ソースコードのシンプルさ」という点で、あまりお勧めできません。

次の図のように各ファイルを分けて、HTML内でインポートするという方法の方が適切と言えるでしょう。

ファイルを分けることに関しては、エラーの発生に気が付きやすくなるという点でも利点があります。
是非確認してみてください。

それでは今回はここまでとしましょう。
次回以降はHTML内で記述するタグで、SEOに影響しているタグについて解説していきます。


SEO Webマーケティング



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。