W3Cコードチェッカーを通してみた
自分で記述したHTMLをチェックしてくれるツール
「The W3C Markup Validation Service」をご紹介します。
このツールは、Webの標準化をすすめる団体W3C(World Wide Web Consortium)によって提供されているHTMLチェックツールです。
W3Cとは?
W3Cとは、WWW(Web、ウェブ)で利用される技術の標準化をすすめる国際的な非営利団体。
目次
SEO的に有効なのか?
色々ネット上を調べると、最近の検索エンジンは多少の文法ミスがあっても正しく表示されるので、W3Cに準拠していなくても、SEO的にそれほど影響はないようです。
しかし、個人的には、間違ったコードよりは、標準化された正しいコードで書いたほうがいいと思いますので、できるだけエラーは対処しようと思います。
SEOとは?
SEOとは、「Search Engine Optimization」の略。(検索エンジン最適化)
検索エンジン(GoogleやYahoo)などで、特定のキーワードで検索した際に上位に表示されるための対策のこと。
チェッカーの使い方
以下のサイトにアクセスします。
The W3C Markup Validation Service
すでに公開しているサイトなら、
以下のアドレス欄にチェックしたいサイトのURLを入力してCheckをクリックします。
まだ公開前のローカル上でのサイトの場合、
コードをダイレクトに貼り付けてチェックできます。
Validate by Direct Inputタブをクリックし、Validate by direct input欄にコードを貼り付けてCheckをクリックします。
チェック後、エラーがある場合は、以下のような画面になります。
英語で書かれていますが、具体的に指摘してくれているので分かりやすいと思います。
1つずつ内容を確認して対処するか、現行でいくか判断していきましょう。(2行目をクリックすると実際のコードへジャンプしてくれます。)
エラーが無い場合は、以下の画面となります。
私が指摘されたエラーのご紹介(一部)
Error: Attribute xmlns:v not allowed here.
breadcrumbsというパンくずリストのプラグインを入れた際に、実装した箇所が指摘されていました。
どうも、xmlns:vというのは、XHTML用に用意されたものなので、prefixをつけて解決するらしいです。
以下のように、対応しました。
1 |
<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#"> |
↓↓↓↓
1 |
<div class="breadcrumbs" prefix=“v: http://rdf.data-vocabulary.org/#"> |
Error: An img element must have an alt attribute, except under certain conditions.
imgタグにalt属性を付け忘れていました。
alt属性は、画像を読み込めないブラウザの場合、画像の代わりにalt属性で指定したテキストが表示されます。
また、音声ブラウザの場合、画像の代わりにalt属性で指定したテキストが読まれるようです。
初歩的なエラーですが、チェックを通さなければ気づかなかったです。。
最後に
以上、W3Cコードチェッカーのご紹介でした。
みなさんも実装したHTMLをチェックして、W3Cに準拠しているかどうかを確認してみてください!
対応するかどうかは別にして、HTMLの勉強にもなります。
それでは!
スポンサーリンク