正しいコーディングとホームページの表示速度の高速化は、検索エンジンの高評価とユーザーのストレス軽減につながります。
ウェブ標準の【XHTML+CSS】によるホームページ制作
お客様からの特別な指定がない限り、デザインクロスのホームページ制作には、検索エンジンも推奨するウェブ標準(W3C準拠)と呼ばれる【XHTML+CSS】で※行います。
※W3C(ダブリュー・スリー・シー)とは、World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)の略で、World Wide Web(=ウェブ)で使用される各種技術(ホームページの制作も含む)の標準化を推進するために設立された標準化団体。
※XHTML(Extensible HyperText Markup Language)とは、 拡張可能なHTMLのこと。インターネット上でのXML文書(Extensible Markup Language。XMLでは統一的な記法を用いながら独自の意味や構造を持ったマークアップ言語=タグを作成することができる)のデータ送受信を想定しながら、従来のHTMLに対応した言語。XHTMLは、装飾のための記述を含むHTMLと異なり、現在は装飾を省いた文書構造の記述に特化した言語となっている。
※CSSとは、Cascading Style
Sheets(カスケーディング・スタイル・シート)の略(単にスタイルシートとも呼ばれる)で、ホームページのレイアウトや装飾を定義する規格。CSSファイルによって、装飾を省いて文書構造の記述に特化したXHTMLファイルのホームページ上での見栄え、すなわちレイアウトや装飾が可能となっている。
CSSで装飾されていないXHTMLファイルの例として、このページ(一部)を例にとると、次のような感じになります。
ウェブ標準のホームページ制作は、検索エンジンが推奨する作成方法でもあり、検索エンジン対策的にも一定の効果が望めます。
なお、ウェブ標準には従来の【HTML】でのホームページ制作も含まれます。
一部のホームページ制作会社(一部と言っても、実際には相当な数のホームページ制作会社)が【XHTML+CSS】で作らないと検索エンジン対策的に不利になる(極端な場合、検索されなくなる)とユーザーやお客様をあおっているのはとんでもない間違い。ただの営利目的か無知の極みと言っても過言ではありません。
むしろ事実は逆で、不適切なHTMLファイルであっても、検索エンジンの高性能化によって、以前よりきちんと検索されるようになってきていると言ってもいいくらいです。
(Google
では、以前は検索に弱かった動的URLでも、現在ではちゃんと評価できるように進歩しています。動的URLにしろPDFファイルにしろどんどん検索対象とするファイルの種類を増やしていると言えます。)
XHTML が HTMLファイルより少しでも優れている点があるとしたら〔1〕
XHTMLファイルにあっては、装飾系の記述を含まないため、装飾系の記述を多く含むHTMLファイルより軽量となるため、検索エンジン側にとっても多少本文中のテキストが判読しやすく、その分ほんの少し検索エンジン的に有利と言えなくもありませんが、営利目的の無知なホームページ制作会社が大袈裟に流布するほど大きな差が検索エンジン結果として現れることは決してありません。(そのことは検索エンジン側に立ってホームページを考えればすぐに分かります。)
むしろ、装飾系の記述(=CSS)と分離することにより、検索エンジン最適化へのこだわり〔4〕の「検索エンジンの高評価につながる的確なリンク設定とは?」で示しているような、検索エンジン対策的に有利カタチに持っていくことが可能であることによるメリットのほうが大きいと言えます。
つまり、単に形式をHTMLからXHMLに変えることに優位性があるのではなく、XHTML+CSSのほうが検索エンジン最適化を施しやすいということに優位性があるのであって、そもそも検索エンジン最適化の知識やノウハウがないホームページ制作者にとってはただの宝の持ち腐れとも言えます。(あくまで検索エンジン最適化におけるXHTMLファイルという観点においての話です。)
この点を履き違えているホームページ制作会社があまりに多すぎる点は危惧に値します。
XHTML が HTMLファイルより少しでも優れている点があるとしたら〔2〕
XHTMLファイルがHTMLファイルより検索エンジン対策的に優れていると一般に誤解を与えることになったもう一つに原因についても取り上げておきたいと思います。
今ではHTML+CSSというホームページ制作は珍しくありませんが、かつて(2000年代前半から中頃)は、ブラウザー側のCSSへの対応の悪さもあり、HTML+CSSではなく、HTMLオンリーでのホームページ制作が主流でした。
ところが、HTMLオンリーでホームページを制作しようとした場合、ホームページ本文中の見出しを作成す時に大きな問題がありました。見出しを指定するタグが使い物になるレベルになかったのです!
【ウェブページの見出しサイズと文字サイズ見本】
(画像は85%に縮小、 Firefox 3.6の初期設定。実際の見出しサイズ見本ページ > > > )
サイズ見本の画像では85%に縮小されていますから、実際の大きさはこれより約118%大きくなります。
文法上、1ページのウェブページ内では〈見出し1〉を1回使うことになります。ところが、〈見出し1〉の表示サイズが大きすぎて使い物にならなかったのです。
そこでHTMLオンリーのホームページ制作では、〈見出し1〉を使わず、〈文字サイズ4〉や〈見出し4〉で代用していたものです。
これは、今で言えば、明かな文法上の誤りに該当します。
検索エンジン側が〈見出しタグ〉を検索順位の評価の対象にした時点で、〈見出し1〉を使わないホームページは、検索エンジン対策的にマイナスとなってしまったわけです。
つまり問題はXHTMLファイルとHTMLファイルの優劣ではなく、〈見出しタグ〉の使用法が正しいか正しくないのかだったんですね。
今では普通にHTML+CSSでホームページを作成しますから、HTMLファイルでも、CSSファイルを使って自由自在に〈見出し〉の大きさを変えることができ、正しい文法でのコーディングが実現できるようになっています。検索エンジン対策的に、XHTML+CSSによるホームページ制作に対して劣るというようなことはありません。
表示速度高速化とセマンティック・ウェブに基づくサイト制作
デザインクロスではウェブ標準(W3C準拠)の【XHTML+CSS】をベースに、表示速度高速化コーディングとセマンティック・ウェブに基づくサイト制作の手法を適宜取り入れたホームページ制作を行っています。
ここで「適宜」とお断りしているのは、完全に取り入れると、逆にホームページの表示速度が遅くなったり、ホームページに動作について不適切な挙動になることもあるためです。
矛盾しているように思われるかもしれませんが、ホームページ制作においては、トレードオフ(=二律背反)の状況が非常に多いも事実です。ホームページ制作の際、沢山ある選択肢にはそれぞれ長所と短所があり、両者のバランスを考えて可能な限り最善の制作をデザインクロスでは心がけるようにしています。
下の【図1】と【図2】は、機能的には全く同じJavaScriptファイルです。JavaScriptファイルとしては記述の少ないほうです。
【図1】は、プログラマーが好む通常のJavaScript記述形式で、設定を変えたり、エラーを見付けやすい記述形式ですが、その分、データサイズは5,943バイトと重くなります。
【図2】は、同じJavaScriptデータを圧縮したもの。単にスペースやタブ・改行を省くだけでなく、記述自体もコンピュータ用に変更されています。その結果、データサイズは3,215バイトと軽くなっています。ただし、再編集や変更がとても面倒です。
例に挙げた下のJavaScriptデータは、もともとデータ量の多いではありませんので、さほど読み込み時間に差はでませんが、データ量の多いものになるとホームページの表示速度に差が現れます。デザインクロスでは、再編集の有無などの状況に合わせて、できるだけ軽いデータの使用に心がけています。
【図1】通常の記述方法のJavaScriptファイル(5,943バイト)
【図2】同じものを圧縮したJavaScriptファイル(3,215バイト)
同時に、トレードオフ(=二律背反)の状況下においても最善・最良のホームページ制作ができるように、日々、鋭意知識の吸収と検証を行っています。
(実際その成果の一部は、デザインクロス-ブログなどで公開しています。)
ホームページ表示速度高速化コーディング
一般にはあまり知られていないCSSコーディングの特性(後述)やPCブラウザーによるファイル(HTML、イメージ、CSS、JavaScriptファイルなど)の読み込み特性、とりわけ厄介なJavaScriptファイルの読み込み順序(JavaScriptファイルを読み込ませる位置が、最もホームページの表示速度に影響する可能性がある)にまでこだわったコーディングをデザインクロスは行っています。
1.CSSコーディングの軽量化・最適化によるホームページの表示速度高速化
- 1.
- CSSコーディングにおける表示高速化の主な手法は、記述をできるだけ少なくし(タブ、スペース、改行、コメントを含む)ファイルを軽量化する。
これにはCSSの属性の継承を上手く利用することも含まれます。 - 2.
- もうひとつの表示高速化の手法は、CSSにおけるセレクタ部分の階層化をできるだけ避け、セレクタの最下層(記述で言えば一番右)の重複を最小限に抑える。これにより、PCブラウザーによるセレクタの照合作業の回数を減らし、ホームページの表示速度を高速化すことが可能。
(PCブラウザーによるCSSのセレクタの照合作業は、普通一般に左から右に行われると思われていますが、実際には右から左に行われているという理由に基づく。)
【CSSの記述例】
内容が少し専門的にりますが、上述2の「セレクタの最下層(記述で言えば一番右)の重複を最小限に抑える」に関連した例をひとつ挙げましょう。
例えばリストタグにおいて、CSSのリストの定義付は一般には【例1】より【例2】の方が洗練されていると言えます。ちなみに次の【例1】・【例2】・【例3】はホームページ上ではすべて同じに表示されます。
【例1】
【例2】
ところが真の高速化の手法として、米Yahoo!のパフォーマンス担当責任者
Steve Souders氏は【例3】の記述方法を挙げています。
【例3】
(この場合、リスト行頭に表示されるマーク画像は背景画像としてではなく、リスト画像を使用する必要がある。)
確かに理論的には【例3】が最速だと言えます。
とは言え【例3】のようなリストタグの場合、CSSの定義からすると必ずしも正しいマークアップとは言えなくなる可能性があります。(ここにもホームページ制作におけるトレードオフという難しい問題が現れます。)
あくまで「CSSにおけるセレクタ部分の階層化をできるだけ避け、セレクタの最下層(記述で言えば一番右)の重複を最小限に抑える」を目指したホームページ制作をするほうがよいと言える例かもしれません。
2.CSSファイルやJavaScriptファイルの外部ファイル化と最善の位置への配置によるホームページ表示速度高速化
- 1.
- CSSファイルやJavaScriptファイルは可能な限り外部ファイル化することで、PCブラウザーによるホームページ閲覧の際のキャッシュ化が可能となり、ホームページの表示速度高速化を図ります。
- 2.
- もうひとつの表示高速化の手法は、CSSにおけるセレクタ部分の階層化をできるだけ避け、セレクタの最下層(記述で言えば一番右)の重複を最小限に抑える。これにより、PCブラウザーによるセレクタの照合作業の回数を減らし、ホームページの表示速度を高速化すことが可能。
(PCブラウザーによるCSSのセレクタの照合作業は、普通一般に左から右に行われると思われていますが、実際には右から左に行われているという理由に基づく。)
XHTMLファイル内に最善の位置に配置という点では、グーグルの公式サイト(英文、Google
code|Page Speed の本文中にあるコーナー「Optimize
the order of styles and scripts」)で取り上げている配置最適化の内容では充分でなく、とりわけJavaScriptファイルは、場合によってはメタ・ヘッダー内に、また他の場合には、本文中(body)最下層に配置したほうが高速に読み込まれるので、デザインクロスでは細心の注意を払ってJavaScriptファイルの配置を行います。
(外部ファイル化したCSSファイルやJavaScriptファイルの読み込み速度は、FirefoxのアドオンFirebugやSafariのWebインスペクタなどを使って検証します。)
セマンティック・ウェブに基づくサイト制作
厳密には、ここでいうセマンティック・ウェブ(Semantic Web)とは、W3Cのティム・バーナーズ=リーによって提唱されたセマンティック・ウェブものとは少し違います。セマンティック・ウェブという最先端のウェブページ制作の理想形をの考え方を取り入れたウェブ制作の手法になります。
上の章で、XHTMLファイルは、装飾を省いた文書構造の記述に特化したものだと説明しました。セマンティック・ウェブの考え方は、文書構造の記述に意味をもつ記述を加えようということになります。
(装飾を省くという点では、XHTMLファイル自体セマンティック・ウェブという考え方を内包していると考えられなくはありません。)
次の例をご覧ください。
ホームページ上で果物の説明した本文です。わかりやすくなるように本文に色をつけます。
【例文はホームページ上で次のように表示されます(画像)】
【例1】と【例2】は、どちらも上画像のように、ホームページ上で同じに表示されます。
ただし、XHTMLファイル上のコーディングは異なります。
【例1】では、XHTML上において、1行目と2行目の本文は「赤」と分類し、3行目を「緑」と分類しているにすぎません。
【例2】では、XHTML上において、1行目は「リンゴ」、2行目は「イチゴ」、3行目は「メロン」と、本文の意味に合わせて分類し、その分類に色付けしているとみなせます。
つまり【例2】では、「リンゴ」と「イチゴ」の色が同じ赤色であることにはなんら意味的なつながりはありません。
XHTML上のコーディングでは、【例2】のようになコーディングがが望ましいとされています。ただし完全に取り入れようとすると、例からも分かるように、CSSの記述が増大し、かえってホームページの表示を遅くするこにもなりかねません。
CSSの記述が増え、意味を毎回考える分だけ、制作の時間がかかり、かえって非効率的なホームページ制作となりうるのです。
そこでデザインクロスでは適宜、このセマンティック・ウェブという考えを取り入れ、バランスのよく効率的なホームページ制作を行います。
デザインクロスの検索エンジン対策(検索エンジン最適化・SEO・SEM)
- 最適なウェブサイト名とドメイン戦略
- 検索エンジンが好むホームページ構成でのサイト設計
- 検索エンジンが推奨する理想的なページ構成
- 検索エンジンにとって分かりやすく、高評価につながる的確なリンク設定
- インターネット世界での需要を割り出した上での検索キーワードの本文中への使用
- 検索エンジン対策と販売促進を両立させる言葉使用のテクニック
- ウェブ標準(W3C準拠)でのホームページ制作は当然として、さらに上を行く表示速度高速化コーディングとセマンティック・ウェブに基づくサイト制作
- プログラムやスクリプトは検索エンジン対策的にマイナスになるものを避け、むしろプラスになるものを積極使用
- ホームページの細部にまでいたるデザインクロスならではのこだわり制作のノウハウ