Web マスター向け Tips

Vol.4 サイトを害する、よく見られるエラー(1/3)

自分がウェブサイトのコンテンツを開発しているところを想像してみてください。あなたはたくさんの良質な記事を執筆し、これならば新しいビジターを引き付け、検索サイトで上位表示させることができると考えています。また、その記事をオンライン媒体に寄稿し、良い結果を心待ちにしています。しかし期待とは裏腹に、なかなか成果を得られません。ウェブ解析ツールで調べてみると、新しい記事を掲載してからというもの、サイト訪問者の数は一向に増加していません。さらに調査すると、新しいコンテンツが検索エンジンにインデックスされていないことも分かりました。フレッド・ウィラードの言葉を借りれば、「一体どうなっているのだ?」というところでしょう。おそらく新しいコンテンツがインデックスされていないのは、よく見られるサイトエラーが原因であると思われます。

良質のウェブコンテンツであっても、家を建てるときと同じように、頑丈で信頼できる基礎が必要です。どんなに豪華な高級住宅でも、ぐらついたツーバイフォーの基礎の上に立っていたら何の価値もありません。そのような不安定な家の家屋調査を頼まれても、誰も行きたがりません。同じように検索エンジンクローラー(別名ボット)も、多くのコーディングエラーや深刻な構造的、設計的問題を抱えているウェブサイトに対しては、クロールを中断します。そのとき、どれほど素晴らしく魅力的なコンテンツを提供していたとしても、永遠にインデックスされることはないでしょう。

では、どうやってあなたのサイトが石のような頑丈な基礎の上に立っているのか、それともさら地に立っているのかを見分けたらよいのでしょう? それには、コードを調べる必要があります。コードエラーをチェックする優れたツールを利用すれば、壊れているコード個所を検出し、それについてのレポートを得ることができます。けれども最終的にそのレポート内容を理解し、修復できるかどうかは、あなたの知識にかかっています。それではこれから、頻繁に見られる、または重大なサイトエラーについて見ていきましょう。同時に、それらの悪影響を回避するために知っておくべきことについてもお話しします。

無効なマークアップコード

マークアップコードに誤りがあると、ボットはクロールを中断します。しかし、PCブラウザーでの見え方だけテストしても、この問題に気付くことはできません。現在のデスクトップブラウザーは開発者の意図をくみ取って、スクリーン上に表示させることに長じています。標準準拠に関していえば、好き勝手に書かれたコードでも、ある程度対応することができます。しかし、検索エンジンボットはデスクトップブラウザーほど柔軟でなく、コード問題にぶつかるとクロールを中断してしまうことがあります。また、モバイルデバイスのブラウザーの場合も、分かりにくいコードに対応できません。このように、コードを標準準拠にして適切に記述することは、ユーザーにとってもボットにとっても有益なのです。

コードの妥当性を調べるにはマークアップコード バリデーターを使用します。優れた開発環境の多くは、ビルトイン バリデーターか、そのたぐいのオンライン ツールへのリンクを提供しています。特にきめ細かなバリデーターとして有名なのは、コーディング言語の標準化団体W3C(ワールド・ワイド・ウェブ・コンソーシアム)から提供されているW3C Markup Validation Service日本語訳)で、オンラインで無償で利用できます。このHTMLバリデーターは、ウェブサイト全体を再帰的に評価するのではなく、一度に1ページずつしか評価できません。しかし、コーディングエラーの背後の問題を検出し、特定してくれるとても優れたサービスです。

バリデーターがスキャンした結果を調べてみましょう。何が見つかりましたか? よく見られるコーディングエラーが検出されていないか調べてください。

  • ファイルにDTD(Document Type Definition)ステートメントが含まれていますか?(HTMLの初期バージョンでは任意で、XHTMLでは必須です) ドキュメントの種類に合った適切なコーディング慣習に従うようにしてください(XHTMLとHTMLの要件は似ていますが、まったく同一ではありません)。
  • すべてのタグは正しく閉じられていますか? 対になるタグは、対応する開始タグと終了タグを用いる必要があります。例えば、パラグラフタグの<p>タグの場合、終了タグを省略することができます。もしXHTML文章の中でシングルタグ(別名、空タグ)を使用しているときは、breakタグと異なり、閉じる前にフォワードスラッシュを記述しなければなりません(例、<br />)。
  • タグは小文字で書かれていますか? HTMLの場合は任意ですが、XHTMLを使用しているときは小文字で記述する必要があります。なので、これからは小文字での記述をベストプラクティスとしてください。
  • 数値を含むすべてのタグ属性値をクオーテーションで囲んでいますか?(例、<table border="1">) これはHTMLの初期バージョンでは任意ですが、XHTMLで正しいコードを作成する場合に必須ですので、ベストプラクティスととらえてください。
  • タグ属性は、使用しているコードに有効なものが使われていますか? HTMLは年を追って変化しており、一部の属性にはHTML 4.01とXHTML 1.1の最新仕様の登場で、非推奨となったものがあります。例えば、<table align="left">がこれに該当し、標準化団体はalign属性の代わりに新しいstyle属性を使用することを推奨しています。自信がないときは、Tag Reference for HTML/XHTMLといった、信頼の置けるマークアップタグ リファレンスサイトをチェックしてみてください。
  • 非推奨のタグを使っていませんか? 同じように、仕様の変更により、もはや使われなくなりつつあるタグもあります。例えば、テキストに下線を引くための<u></u>タグは、HTML 4.01で非推奨となっており、Strict DTDを使用しているXHTMLではサポートされていません。
  • タグはコード内の正しい場所に配置されていますか? 例えば、<meta>タグは<head>タグの中でしか使用できません。タグが正しい位置に配置されているか確認してください。
  • すべてのタグは正しく入れ子になっていますか? <tag 1>の後に<tag 2>がある場合、まず</tag 2>で閉じてから、その後に</tag 1>で閉じる必要があります。「最初に開いたものは最後に閉じる」という法則を覚えておいてください。
  • 特殊文字のエスケープを使用していますか?(例えば、href属性のURL値で「&」の代わりに「&amp」を使うなど) 長いダイナミックURLの中には、「&」を含んでいるものがあるかもしれません。コードを標準準拠させるために、URL内の「&」を該当するエスケープコードに置き換えてください。

ヒント:ページを複数のブラウザーでテストしてください。ブラウザーにはエラーに強いものと弱いものがあります。最大多数のビジターがベストのユーザー体験を得られるように、エラーに弱いブラウザーでも利用できるサイトを作成するようにしましょう。