W3Cバリデーターを使用してSEOを改善する方法

公開: 2022-03-26

Web開発者は、コードがクリーンで有効であり、アクセス可能であることを確認する必要があります。これは、検索エンジン最適化（SEO）を強化するのにも役立ちます。幸い、W3Cバリデーターを使用して、作業が標準に達していることを確認できます。

この投稿では、W3Cとそのさまざまなバリデーターについて詳しく見ていきます。次に、これらのツールを使用してコードを検証し、結果を解釈する方法を示します。最後に、いくつかの一般的なW3C検証エラーとそれらを修正する方法を見ていきます。始めましょう！

W3C検証とは何ですか？

W3CはWorldWideWeb Consortiumの略であり、Web全体のコーディング標準を監督する国際組織です。 HTMLおよびCSSコードが有効でエラーがないことを確認するのに役立つバリデーターサービスを提供します。

CSSバリデーターはJigsawと呼ばれ、コンテンツをW3CWeb標準と照合します。

CSS用のW3Cバリデーター

HTMLバリデーターは非常によく似た方法で機能します。 HTML、XHTML、SMIL、MathMLなどのWebドキュメントのマークアップの有効性を検証します。

HTML用のW3Cバリデーター

これらのWeb標準に準拠することで、コンテンツがユーザーフレンドリーでアクセスしやすいものになるようにすることができます。これらのツールは、作業のクロスプラットフォーム互換性を検証するのにも役立ち、より優れたユーザーエクスペリエンス（UX）を作成します。これにより、コアWebバイタルスコアが向上し、SEOが向上する可能性があります。

W3Cを使用してコードを検証する方法

前述のように、W3CバリデーターはHTMLおよびCSSコードをスキャンして、組織によって設定されたWeb標準を満たしていることを確認します。このチュートリアルでは、これらのツールを使用して作業を確認する方法を説明します。

HTMLコードを検証する

HTMLバリデーターから始めましょう。チェックするドキュメントのURIを入力するか、コードを含むファイルをアップロードするか、検証するマークアップを表示されたフィールドに入力できます。

W3Cバリデーターの直接入力オプションで検証する

確認のためにページまたはドキュメントを送信すると、バリデーターはHTMLコードに関連するすべてのエラーと警告のリストを生成します。

W3Cバリデーターによって生成された結果

理想的には、エラーや警告をゼロにする必要があります。ただし、バリデーターはユーザーが見ることができるすべてのものを考慮しないため、これが常に可能であるとは限りません。

たとえば、グラデーションのある画像がある場合、検証ツールは、画像と背景のコントラストが不明確であることを示すエラーを発生させます。ただし、人間によるチェックで明確に区別できます。

ページにJavaScriptまたはCSSが含まれている場合、HTMLバリデーターはそれをチェックしないことに注意してください。このためには、CSS用のW3C Jigsawツール（これについては後で説明します）またはJavascript用のJSHINTを使用する必要があります。

CSSを検証する

CSSバリデーターは同じように機能します。検証のためにURI、ドキュメント、またはマークアップを送信すると、エラーと警告が表示されたページが表示されます。

CSSバリデーターによって生成された結果

ご覧のとおり、CSSとHTMLの両方の結果はかなり詳細です。それらを解釈する方法を探りましょう。

バリデーターの結果を解釈する方法

これまで見てきたように、バリデーターはエラーと警告という2つの異なる出力を生成します。警告は重大な問題を強調していないため、無視できることがよくあります。ただし、エラーのないコンテンツを公開することをお勧めします。

エラーと警告の両方で、問題のある行番号が表示されます。また、問題を解決する方法についての提案も提供します。

W3Cバリデーターの警告とエラーの例

エラーまたは警告が表示されたリンクをクリックすると（たとえば、1行目から16列目、2行目から16列目まで）、バリデーターはコード内の対応する行を強調表示します。

W3Cバリデーターで強調表示された行

HTMLバリデーターによって発見されたエラーは、オンラインコンテンツへのアクセスを障害者支援（スクリーンリーダーなど）に依存しているユーザーに影響を与えることに注意してください。コーダーとして、これらのアクセシビリティの問題を見落としがちです。それでも、視聴者に悪影響を与える可能性があります。次のセクションでは、これらの一般的なエラーについて詳しく見ていきます。

一般的なW3C検証エラー

CSSバリデーターとHTMLバリデーターの両方が、コード内のエラーを強調表示します。最も一般的な問題のいくつかは次のとおりです。

閉じられていない要素。 ページに新しい要素を追加するには、開始タグと終了タグが必要です。このエラーが発生した場合は、終了タグが含まれていません。これは、グリッドを操作するときによくある問題です。
altタグがありません。 すべての画像には、グラフィックの読み込みに失敗した場合に表示されるaltタグが必要です。写真について説明し、スクリーンリーダーが読み上げます。 altタグの追加は、アクセシビリティの重要な要件です。
見出しタグの誤った使用。 このCSSの問題は、開発者が特定の小見出しのフォントスタイルとして<h>タグを使用する場合に発生します。タグは文体的な目的ではなくナビゲーション用に設計されているため、ナビゲーション以外の小見出しはfont：size =＃属性を使用してサイズを変更する必要があります。

また、いくつかの解析エラーに気付く場合があります。これらはコードの誤りを示していますが、バリデーターは問題がどこにあるかを常に示しているわけではありません。問題を特定するには、作業を行う必要があります。

解析エラーの一例を次に示します。

解析エラーの例

このエラーは、CSSスタイルシートにHTML要素が含まれている場合に発生します。 CSSバリデーターはエラーの行番号を提供しませんが、提供されたコードブロックをコピーして、コードエディターまたはIDE内で検索することができます。

一般的なエラーを修正する方法

幸い、W3Cバリデーターは、エラーの場所と修正方法を教えてくれます。たとえば、altタグがない場合、バリデーターはそれを含める必要がある場所を教えてくれます。

オープンタグがある場合、バリデーターはクローズタグがどこにあるかを教えてくれません。ただし、開いているタグの場所がわかるので、そのコードブロックに移動して、不足しているタグを追加するだけです。

さらに、バリデーターで直接入力オプションを使用すると、エラーが強調表示された完全なコードが表示されます。したがって、IDEの元のコードと比較して、間違いをより迅速に見つけて修正することができます。

結論

W3Cバリデーターを使用すると、サイトの全体的なパフォーマンスを向上させることができます。これにより、コードの膨張を回避し、アクセシビリティの問題を解決し、一般的なエラーを修正できます。これらすべての要素により、読み込み時間が短縮され、UXが向上し、サイトのSEOが向上する可能性があります。

これまで見てきたように、W3Cを使用してHTMLおよびCSSコードを検証できます。ツールは、警告とエラーのリストを生成し、それらを修正するための提案を行います。一般的な問題には、閉じられていない要素、altタグの欠落、解析エラーなどがあります。

W3Cバリデーターの使用について質問がありますか？ 以下のコメントセクションでお知らせください。

Chaosamran_Studio/shutterstock.com経由の注目の画像