文字セットの宣言がないか、HTML で宣言のタイミングが遅い

サーバーとブラウザは、インターネット経由でデータをバイト単位で送信することで相互に通信します。サーバーが HTML ファイルを送信するときに、どの文字エンコード形式を使用しているかを指定しない場合、ブラウザは各バイトがどの文字を表しているかを認識できません。この問題は、文字エンコード宣言の仕様で解決されます。

Lighthouse の charset 監査が失敗する仕組み

Lighthouse は、文字エンコードを指定していないページにフラグを設定します。

文字エンコードの監査が失敗しました。

Lighthouse は、次のいずれかが見つかった場合、文字エンコーディングが宣言されていると見なします。

  • ドキュメントの <head> 内の <meta charset> 要素が、ドキュメントの最初の 1,024 バイトに完全に含まれている
  • 有効な IANA 名と一致する charset ディレクティブを含む Content-Type HTTP レスポンス ヘッダー
  • バイト オーダー マーク（BOM）

charset 監査に合格する方法

HTML に <meta charset> 要素を追加する

HTML ドキュメントの最初の 1,024 バイト内に <meta charset> 要素を追加します。要素は最初の 1,024 バイト内に完全に含まれている必要があります。効果的な手法は、<meta charset> 要素をドキュメントの <head> の最初の要素にすることです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    …

Content-Type HTTP レスポンス ヘッダーを追加する

charset ディレクティブを含む Content-Type HTTP レスポンス ヘッダーを追加するようにサーバーを構成します。

Content-Type: text/html; charset=UTF-8

リソース