HTML構文チェック：エラーの原因を調べ、修正を確かめる

HTMLチェッカーは、公開ページのマークアップを調べるための道具です。警告の数を減らす前に、どの要素に問題があり、どのテンプレートがそのHTMLを生成しているかを確認しましょう。修正はサイトのソースコードで行い、公開したページをもう一度確認します。

テンプレートごとに確認するURLを選ぶ

商品ページ、記事、問い合わせフォームなど、構造が異なるページを選びます。リダイレクトがある場合は最終的なURLを記録してください。記事を1件確認しただけでは、別の構造を持つフォームまで確認したことにはなりません。

MiltenのHTMLバリデーターにURLを入力し、対象ページと指摘内容を記録します。どの画面や要素で問題が起きたかを残すと、修正後に同じ条件で確認できます。完了しなかった検査は、問題なしと判断せず、未確認として扱います。

以下は顧客サイトの測定結果ではなく、説明用の例です。フォーム内の2つの入力欄に同じID email が付いているとします。それぞれに異なるIDを割り当て、対応するラベルの for 属性も変更します。

次に、ラベルを押したときに意図した入力欄が選ばれるかを確認します。同じコンポーネントを使う他のページも対象に含めてください。MDNのlabel要素の説明では、ラベルと入力欄の関連付けを確認できます。

警告を消すためだけに属性やコンテンツを削除しないでください。生成元のテンプレートを修正し、利用者が行う操作を試すことが大切です。

HTML構文チェックに合格しても、すべての操作が使いやすいとは限りません。キーボードでフォームを操作し、入力欄の名前やフォーカス表示を確認します。アクセシビリティ検査は、こうした手動確認を補うために使えます。

canonicalや検索向けの指示はSEO検査で別に確認します。HTMLの規則への適合を調べる際は、W3CのNu Html Checkerも参照できます。マークアップの修正だけで検索順位が上がるとは判断できません。

変更を公開したら、最初と同じURLを再検査します。指摘が解消したかに加え、見出し、リンク、フォームが引き続き機能するかを確認してください。共通テンプレートを変えた場合は、他の利用箇所でも確認します。

ソースコードの変更は開発者が行います。レポートは調査と修正後の確認に使う情報です。

原因と影響を確認し、実際の不具合を修正します。意図した例外は理由を記録してください。点数のためだけに必要な機能を削除しないことが重要です。

ページのHTMLを確認する。スタイルの問題にはCSS解析の読み方、読み込みの遅さには表示速度の計測手順を参照してください。

次の読み物

技術SEO診断でHTTPステータス、noindex、canonicalとサーバーHTMLをチェックする順序です。意図した制限を維持しながら、公開後の修正結果を検証する方法について説明します。

AIエージェントがサイトの内容を取得できるか確認します。サーバーHTML、llms.txt、トークン数、ARDを調べ、修正後の結果を検証する手順です。

Webサイトの表示速度を計測し、結果から修正箇所を選ぶ手順です。ラボ計測と実際の訪問データを区別し、同じ条件で改善を確認する方法を説明します。

サイトの速度チェック

Miltenでページをチェックして、Core Web Vitalsの測定値と読み込みを高速化するための改善案を確認できます。