文法チェッカーなどを活用してチェック
望み通りに表示されていても文法的に正しいとは限りません。文法チェッカーなどを活用してチェックしましょう。
正しく解釈させるために
HTMLやスタイルシートは、できるだけ文法に沿って正しく記述するようにしましょう。
正しい文法を使わなければ、機会である検索エンジンには正しく伝わらない可能性があります。
その結果、重視してほしい箇所が重視されなくなるなどSEO面での効果が出なくなってしまいます。
検索エンジンにページの中身を正しく解釈させるためには、できるだけ誤りのない文法でページを記述している必要があります。
また、HTMLの文法が正しくないと、HTMLの各要素に対してデザインを施すスタイルシートによる装飾もうまくいかない事があります。
文法に忠実に記述する事は、SEO面以外にも大きなメリットがありますので、こまめに文法チェックをして正しい文法で記述するようにしましょう。
ブラウザ上で望みどおり表示されていても、文法的に正しいとは限りません。
多くのブラウザは、文法的に誤っていても適当に解釈して旨く表示しようとします。その毛kk、誤った文法で記述していても、大体望みどおりの表示になっている事があります。
文法的に正しいかどうかの確認には、文法をチェックしてくれるサービスを活用しましょう。
文法チェッカーを使う
無料で利用できる文法チェックサービスがありますので、それらを利用して文法をチェックしましょう。
日本語で解説も読める文法ちぇかーとしては、「Another HTML lint」が有名で便利です。
また、HTMLなどのWebに関する様々な企画を策定しているW3C(Woerld Wide Web Consortium)が提供している文法チェッカーもあります。
こちらでは、文法的に問題が無ければ、正しい文法に準拠している事を示すボタンがダウンロードできます。
文法を意識して制作している事を示したい場合には、ダウンロードして掲載すると良いでしょう。
日本語で解説もよめる「Another HTML lint」を使う
「Another HTML lint」を使うと、調べたいページのURLを入力するだけで文法チェックができます。
文法の正しさが100点未満の点数で表示され、問題のある箇所は、どこが同おかしいかの解説が表示されます。 以下のような手順で操作します。
- Webサイトにアクセスして調べたいURLを入力します。
アップロードしていない場合は、HTMLの全文を直接入力することもできますし、ローカルにあるファイルを指定して送る事もできます。
チェック用のオプションを様々に選択できますが、標準設定のままで特に問題ありません。 - 数秒で結果が表示されます。
問題の個数が表示されるほか、点数化もされます。
エラーには、重要度の仕様が付いていて、数値の高いものほど問題が多きものです。 - 指摘内容の横にある「解説」というリンクをクリックすると、その問題に対する解説を読む事ができます。
日本語で説明されているので、よく参考にして修正しましょう。
W3Cの文法チェッカーを使う
W3Cが提供している文法チェッカーもあります。
文法的に問題が無ければ、文法に準拠している事を示すボタンをダウンロードできます(問題のある箇所についての指摘も行われますが、説明文は会え以後です)。
- まずは、Webサイトにアクセスして、Address欄に8調べたいURLを入力します。
その後「Check」簿r短を繰り句します。 - すぐに結果が表示されます。
問題が無ければ、正しい文法を用いている事を示すボタン画像のダウンロードが出来ます。
問題があれば、問題がある箇所の指摘が表示されます。
スタイルシート(CSS)の文法チェック
HTML(XHTML)だけでなく、スタイルシートの文法チェックも可能です。
W3Cが提供している「CSS Validation Service」では、スタイルシートのURL(もしくはスタイルシートを利用しているHTMLのURL)を入力するだけで、文法の正しさをチェックしてくれます。
- まずは、Webサイトにアクセスして調べたいURLを入力します。ページのURLでもスタイルシート(CSS)ファイルのURLでもかまいません。その後「検証する」ボタンをクリックします。
- すぐに結果が表示されます。問題なければ正しい文法を用いている事を示すボタン画像のダウンロードなどができます。問題があれば、問題のある箇所の指摘が表示されます。
指摘されている箇所を1つずつ解決していく事で、100点を取ることは難しくありません。
しかし、機械的なチェックで全てがわかるわけではありません。
例えば、「見出し」を表現する要素(h1やh2ナ祖)を使うべき箇所で、ただdiv要素が使われていても、文法的に問題が無ければ文法チェッカーは何も指摘しません。
ページ内に書かれている言葉の意味まで解釈できるわけではないからです。
ブラウザ上では「見出し」のように見えていても、「見出し」を表現する要素を使わなければ、検索エンジンには見出しだと伝わりません。
このような点は、機械的にはチェックできないので、自らが気をつける必要があります。