攻略！サーチエンジン最適化【SEO対策：ページサイズ】

SEO対策：ページサイズ

ページサイズ

基本的にページ内容やボリュームが充実している方が望ましいですが、文章だけでは読みづらく、長文になると途中で疲れちゃうこともありますよね。やはり画像などを適度に設けて構成すれば内容が伝わりやすいし華やかにもなります。しかし内容が充実していればどんなに大きなページサイズになっても良いというわけではありません。Googleなどではページ容量に制限があります。詳しくは下記をご覧下さい。

”重い”サイトは厳禁！

SEOだけでなくアクセシビリティ、ユーザビリティにも関係しますが、敬遠されるホームページに開くのが遅い、いわゆる”重い”サイトが上げられます。インターネット利用者の環境は個々によってさまざまです。ダイアルアップもいればＡＤＳＬ、光通信と回線スピードは極端に違います。訪問者にとって重いサイトはストレスになるばかりか開ききる前に閉じられてしまいます。すばやくダウンロードできる快適なサイズを心がけましょう。

ページを”軽く”する要素としては以下の方法があります。

<head>～</head>内の整理

「SEO対策 HTML・ｈ(見出し）タグ」でも説明しましたが、<html>→<head>→</head>→<body>→</body>→</html>
の順にロボット（クローラー）はページ内を移動します。
<head>～</head>内に大量の<meta>メタタグやCSS(カスケードスタイルシート）やJavascript（ジャバスクリプト）などのソースコードを外部化せずに記述していると肝心な<body>～</body>（ボディ内）のソースコードをロボット（クローラー）が吸収する前にお腹が一杯になってしまいます。SEO対策的にはこの<body>～</body>内が重要になるので、<head>～</head>内のソースコードは極力少なくしたいものです。

CSS（カスケードスタイルシート）の外部ファイル化

<head>～<head>ヘッド内に直接スタイルシートを記述すると・・・

と、
こんな感じで記述されますが、外部ファイルにする為に赤字のメイン内容を”～.CSS”
と拡張子に「.css」が付いたファイルを作成しその中に記述します。勿論ファイルの中身は上記の赤字部分のみです。（は必要なし）残りの<style type="text/css" >～</style>は削除しましょう。
その替わりに
<link rel="stylesheet" type="text/css" href="css/style.css">を<head>～</head>ヘッド内に記入します。赤字の部分はスタイルシートを入れたファイルまでのパスになります。これで外部CSSファイルとリンクされるようになります。

外部ファイル化することによりよけいなタグ数を減らすことができ、見た目もスッキリすることができます。僅かですがページ容量も小さくなります。
最大の利点は他のページでも同じCSSが設置できて、デザインを簡単に共有できる点にあります。

Java Script（ジャバスクリプト）の外部ファイル化

<head>～<head>ヘッド内にある。ソースコードが以下だとすると

<head>

<script tipe="text/javascript" language="javascript" >

function addMenuItem(label, action) {
this.items[this.items.length] = label;
this.actions[this.actions.length] = action;
}

</script>

</head>

CSSと同じ様に、赤字のメイン部分を”～.JS”と「.ｊｓ」の拡張子の付いたファイルを作成し、中に記入します。
<script type="text/javascript" language="javascript" src="seo.js"></script>を<head>～</head>内に記入してください。
src（赤字）の部分にはJavaScriptを記入した外部ファイルまでのパスを記述します。
これでJavaScriptの外部ファイル化が完成です。
こちらもCSSと同じように余計なソースコードを減らし見た目もスッキリ、ページサイズをダウンできる、他のページでも同じプログラムを共有できるという点にあります。

CSSやjavascriptは外部ファイル化(～.css、～.js）することにより、あらゆる面で効率的で検索エンジンにも最適な仕様となります。

Googleロボットの収集能力

Google(グーグル）は101KB以上のHTMLソースコードは収納できないといいます。
Googleの管理、運営上などを考慮して大きなファイルは収納しないように設定したものと思われます。
サイズはなるべく100KB以内に抑えたいものです。ソースコードのインデント(字下げ）やスペースを詰めるだけでもサイズを少し減らす事ができますし、画像を掲載する場合は画像データの大きさや枚数、解像度を考慮しましょう。大きいページを少しでも抑える努力を心がけましょう。
しかし、私の独自の調査では自己登録は確かに登録できないかもしれません（130KBほどのページが3ヶ月登録されなかった）が、他のサイトからのリンク経由では101KB以上のページでも実際に登録されます。
それに一度登録されてしまえば300KBほどのページサイズにしてもちゃんとクロール(更新）してくれます。「自己登録で101KB以上は無理」というところでしょうか？

画像の軽量化

画像などを多く取り入れているページの場合は極限まで画質を抑えてファイルサイズを小さくしましょう。又、画像の”見た目のサイズ”だけを縮小してサイトに掲載している方をたまに見かけます。
これはオーサリングソフト（ホームページ作成ソフト）を使用して、サイトを作成している人に多いようですが、画像をドラッグ＆ドロップでページに移動させて、そのままオーサリングソフト上で画像の角をつまみ小さくすると見かけだけの縮小画像になります。
つまり、見た目のサイズを小さくしても人が見て小さいだけで、本質となるファイルのサイズは元のままです。

以下をご覧下さい。
現在どちらも表面上は100ピクセル×100ピクセルの大きさになっていますが、左は実寸、右は見た目の縮小を行っています。テータサイズは9倍ほども違います。


100px×100px データサイズ：2Kバイト	300px×300px データサイズ：18Kバイト

右の画像の元の大きさは以下になります。勿論データサイズも同じく18Kバイトです。
見かけの縮小ではなく、キチンと画像データのサイズを小さくしましょう。

画像がそんなに大きくなく、数も少ないのにページが開くのに時間がかかるという方は、画像を見た目だけのサイズで処理していませんか？
画像が多いサイトでは、縮小画像と拡大画像をそれぞれ用意すると手間がかかり、ついつい1枚の画像で見かけだけの縮小を行いがちです。しかし、画像が多いサイトだからこそ逆に手間をかける必要があるのです。

攻略！サーチエンジン最適化

SEO対策・検索エンジン最適化対策・検索順位上位表示・検索順位向上・アクセスアップ

SEO対策

アクセシビリティ