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

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

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

Lighthouse では、次のように文字エンコードが指定されていないページが記録されます。

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

Lighthouse では、次のいずれかが検出されると、文字エンコードが宣言されていると見なされます。

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

charset の監査に合格する方法

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

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

関連情報