サーバーとブラウザは、インターネット経由でデータのバイトを送信することにより、相互に通信します。サーバーが 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