HTMLやCSSの構文『無料』チェックツール
発見は難しくSEO効果はほぼ無い
自分が作成したWEBサイトのHTMLが正しく記述されているか気になる事はありませんか？
プログラミングであれば、記述ミスがあればデバック時にエラーになったり、不具合として記述ミスによる悪影響が出るため、ミスに気が付きやすいかと思います。
HTMLの場合は、あくまでも表示するだけであるため、デザインが崩れない限り文法ミスに気付きにくいという特徴があります。
例えば、<div>のタグを閉じ忘れていたり、『<p>～</p>』が『<p>～<p>』となってしまっていたりという間違いが私の場合には多いです。
しかし、WEBブラウザで表示した場合、デザインが崩れないため、いくらブラウザでしっかりと確認作業を行っても間違いに気づく事はできません。
こういったHTML上での構文・文法の間違いは多くのWEBサイトに存在しており、間違いの無い正確なHTMLで記述されたページは10%も無いと言われています。
そのため、基本的に間違いがあるからといって、ペナルティを受ける事はありません。
ペナルティを受けないため、それほど間違いに神経質になる必要はありませんが、構文や文法を間違っていると、場合によってはクローラーにページ内容が上手く理解されない可能性もあるため、正しい記述を心がけましょう。
また、HTMLに対応した『エディタ』を使って記述したり、タグ事に『インデントをつける』などすると、間違いに気づきやすく、コードもきれいになるかと思います。
『Another HTML Lint』で文法チェック
HTMLを無料でチェックしてくれるツールはたくさんありますが、私がオススメするのは、Another HTML Lintです。
URLを入力するだけでチェックできる
日本語でエラー内容を表示してくれる
HTML5に対応している
エラーの内容をカスタマイズできる
チェックツールには、HTMLファイル自体を調べるものや、URLを入力するだけでチェックできるものなどがあります。
URLを入力するだけでチェックできるツールが使い易くてオススメです。
エラーがあった際は、当然修正しなければいけないため、エラー内容は日本語で教えてくれるツールの方がわかり易くて良いかと思います。
『Another HTML Lint』は日本国内の会社が提供してくれているツールであるため、翻訳された不自然な日本語では無く、自然な日本語で表示されるため、指摘された内容もわかりやすく修正も簡単です。
『HTML』はWEBページを作成する基本の言語ですが、1993年に初期のHTMLが開発され、2014年に発表されたHTML5が現在最新バージョンです。
バージョンが上がるごとに、『廃止』されたものや、『非推奨』となったもの、『最新』の技術などがあるため、現行最新のバージョンであるHTML5に対応したチェックツールを使うようにしましょう。
もちろん指摘されたエラーは全て修正するのが良いのですが、やっかいなのは『アフィリエイトリンク』です。
チェックツールによって、アフィリエイトリンクのコード内容をエラーとしてしまう場合が多々あります。
『エラーでないのにエラー表示される場合』と『エラーであるためエラーと表示される場合』とがあるのですが、基本的にアフィリエイトリンクは改変を禁止している場合が多いため、修正するのも気が引けてしまいます。
そういった場合、多くのアフィリエイトリンクをページ内に貼っていた場合、大量のエラーが出てしまい、本来のエラー箇所を見つけるのが面倒になってしまう場合があります。
その点、『Another HTML Lint』はエラー表示内容をカスタマイズする事ができるため、アフィリエイトリンクでエラーになりやすい項目を『非表示』にしてしまえば、本来修正するべきエラー箇所が見つけやすくなります。
私も色々なASPのアフィリエイトリンクを貼っていますが、自分が記述した箇所ではエラーになりにくく、アフィリエイトリンクでエラーになりやすい下記の番号の項目を非表示に設定して、文法チェックを行うようにしています。
- 80
- 102・111・114・117・196
- 209・239・241
- 302・309
『CSS Validation Service』でCSSチェック
CSSもHTMLと同様、文法エラーがあったからといってペナルティを受ける事はありません。
現在、HTMLソース内にデザインの設定を記述する事は推奨されておらず、デザインに関する記述はCSSに記述する事が推奨されています。
そうする事で、HTMLソースが『簡素化』されるため、クローラーがHTMLの記述内容を理解し易くなるといったメリットがあります。
cssの記述誤りや、整理が十分に行えていない場合、以下のような3つのデメリットが発生します。
SEOへの直接的な影響はありませんが、デザインに大きく関係するCSSに誤りがあると、ユーザビリティの低下につながります。
結果、『離脱率』などに悪影響を与えてしまう可能性があるため、しっかりと様々な『デバイス』、『ブラウザ』で表示の確認を行いましょう。
不要な記述が多いと、cssのファイル容量が大きくなってしまい、SEO対策に影響のある『表示速度低下』につながってしまいます。
『使っていない項目』や『重複する項目』は削除し、cssは定期的に整理しましょう。
特にテンプレートを使われている方は、使わない不要な記述がcss内に含まれている事が多いです。
CSSにはレベルという段階があります。
『css1』『css2』『css3』『css4』など、レベルが上がる事に技術的にできる事が増えていくのですが、問題は全てのブラウザが最新のレベルに対応しているわけではないという点です。
cssをチェックする事で、自分のサイトのcssがどのレベルに対応しているかもわかるので確認してみましょう。
特に『異なるブラウザでの表示確認』を普段行っていない方は、この機会にチェックしてみてはいかがでしょうか。
私は、CSS Validation Serviceというツールを使ってcssをチェックしています。
『URL入力』『ファイルアップロード』『直接入力』に対応しているため、確認し易いかと思います。
cssはサイト運営期間が長くなると、内容が整理されておらず重複した項目なども発生し易いため、エラー確認と合わせて、定期的に整理しましょう。