HTML での文字エンコーディング: メタ文字セット UTF-8 を正しく使用します

HTML における文字エンコーディングの意味、すべてのページに必要な 1 つのメタ文字セット行、HTTP ヘッダーと BOM がそれをオーバーライドする方法、多言語サイトで文字化けした文字を修正する方法。
クレジットカード不要 契約義務なし

・ 更新 · アレックスB · ブログ

この投稿を次のように要約します: 9分で読めます

HTML ページの文字エンコーディングは、ファイル内のバイトを文字に戻すルールです。現代のすべてのページで答えは同じです: ファイルをUTF-8 として保存し、それを宣言します <meta charset="utf-8"> 内部の最初の要素として <head>、 ドキュメントの最初の1024 バイト以内。HTML 標準では UTF-8 が必要であり、サーバーも送信する場合は Content-Type 文字セットを含むヘッダーでは、両者は一致する必要があります。

主なポイント

  • UTF-8 を使用します。HTML 標準には、ドキュメントの実際のエンコーディング “UTF-8 である必要があります”と記載されています W3テック 2026 年 9 月には、既知のエンコーディングを持つ Web サイトの 99。1% がすでにエンコーディングを使用していると報告しました。
  • で宣言する <meta charset="utf-8"> 直後 <head>。最初の 1024 バイトに収まる必要があります。
  • 宣言だけでは十分ではありません。ファイル自体、データベース、サーバー ヘッダーもすべて UTF-8 である必要があります。
  • 宣言が一致しない場合、バイト オーダー マークが HTTP ヘッダーに勝ちます <meta> タグ。
  • 文字化けしたテキストのような é の代わりに é ほとんどの場合、UTF-8 バイトがレガシー エンコーディングとして読み取られるか、テキストが 2 回変換されることを意味します。

文字エンコーディングとは何ですか

コンピューターはテキストを数字として保存します。エンコーディングは、それらの数値を文字にマッピングするテーブルです。ISO-8859-1 や Windows-1252 などの古いエンコーディングは、文字あたり 1 バイトをカバーし、わずか数百文字しかカバーしません。これは、西ヨーロッパの言語には十分であり、それ以外は何もありません。UTF-8 はすべての文字を Unicode でエンコードするため、英語、アラビア語、ヒンディー語、日本語、絵文字を同じページに配置し、文字ごとに 1 バイトから 4 バイトを使用できます。

W3Cは、エンコーディングを指定しない場合“コンテンツ内の文字が誤って解釈されるリスクがある”というリスクを明確に示し、ユーザーがフォームに入力する非ASCIIテキストを処理するためにエンコーディング宣言も必要であると付け加えています(W3C 国際化).

必要な1 行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>…</title>
  </head>
</html>

人々が誤解しているいくつかの詳細:

  • 位置。 HTML標準では、宣言を含む要素“はドキュメントの最初の1024バイト内で完全にシリアル化される必要がある”HTMLリビングスタンダード)。先に 入れて <head>、 タイトルの前に、スクリプトと長いコメント。
  • 1 つだけ。 ドキュメントには 1 つだけを含めることができます <meta>-ベースのエンコーディング宣言。
  • ケースは関係ありません。 UTF-8 そして utf-8 どちらも大丈夫です。W3Cは長いフォームに注目しています <meta http-equiv="Content-Type" content="text/html; charset=utf-8">、 同じように動作しますが、入力する方が適切です。
  • 新しいページには他の値は有効ではありません。 エンコーディング標準には“著者はUTF-8エンコーディングを使用する必要があります”と記載されており、ラベルを付ける必要があります utf-8 (WHATWG エンコーディング標準)。古いラベルは iso-8859-1 ブラウザではまだ動作しますが、新しいドキュメントには準拠していません。

宣言はバイトと一致する必要があります

の <meta> タグはファイルを表します。変換しません。エディターがファイルを Windows-1252(一部の Windows ツールでは “ANSI” と呼ばれます)として保存し、タグに UTF-8 と表示されている場合、アクセント付き文字または非ラテン文字はすべて壊れます。W3Cは、UTF-8を使用するということは“コンテンツをUTF-8として保存する必要もある”W3C).

エディターの保存形式を確認してください。ほとんどのコード エディターでは、現在のエンコーディングがステータス バーに表示され、“エンコーディングで保存” または “エンコーディングで再開く” のオプションが表示されます。UTF-8 を選択します。

ANSI 対 UTF-8。 “ANSI” は単一のエンコーディングではありません。Windows では、これはシステムのレガシー コード ページを意味し、西ヨーロッパのシステムでは通常 Windows-1252 になります。アラビア語、中国語、またはその他のほとんどのスクリプトを表すことができず、そのように保存されたファイルは、ページが UTF-8 を宣言したときに誤って表示されます。ウェブの場合は、常に UTF-8 を選択してください。

意見が合わない場合、どの宣言が勝ちます

ブラウザはエンコーディングを 3 か所で見つけることができます。W3C には優先順位がリストされています:

  1. バイトオーダーマーク(BOM)。 ファイルの先頭にある目に見えないバイトがいくつかあります。存在する場合、“HTTP ヘッダーを含む”他のすべてのものをオーバーライドします。
  2. HTTP Content-Type ヘッダー例えば Content-Type: text/html; charset=utf-8。文書内の宣言よりも優れています。
  3. の <meta charset> 要素。

したがって、サーバーが送信した場合 charset=iso-8859-1 ページに UTF-8 と表示され、サーバーが勝利してページが中断されます。W3C のアドバイスは、いずれの場合もドキュメント内のエンコーディングを宣言し、ヘッダーも使用する場合は、同じことが書かれていることを確認することです。

共通サーバーでヘッダーを設定する方法:

  • アパッチ: AddDefaultCharset utf-8 に文字セットを追加します text/html そして text/plain 回答(Apache ドキュメント)。Apache は、影響を受けるすべてのファイルが実際にそのエンコーディング内にある場合にのみ使用する必要があると指摘しています。
  • nginx: の charset utf-8; の指令 http, server または location ブロックは文字セットを に追加します Content-Type ヘッダー(nginx ドキュメント).
  • PHP: header('Content-Type: text/html; charset=utf-8'); 出力の前に。

サーバーが何を送信するかがわかります curl -I https://your-site.example/ または、ブラウザの開発者ツールの「ネットワーク」の下の応答ヘッダー。

文字化けの修正(mojibake)

文字化けしたテキストは認識可能なパターンに従います。それらの読み方は次のとおりです:

見えているもの何が起こったのか修正
café の代わりに caféUTF-8 バイトは Windows-1252 または ISO-8859-1 として読み取られますヘッダーとメタの両方にUTF-8 と書きます
caf� (疑問符付きのダイヤモンド)レガシーバイトはUTF-8と読み取られますファイルを再保存するか、データをUTF-8 として変換します
caféテキストはUTF-8に2回変換されました通常、インポート時またはデータベース接続時に二重変換を見つけます
??? ラテン語以外の文字の代わりに文字を保持できない列またはファイルに保存すると文字が失われますストレージをUTF-8に変更し、ソースから再インポートします

チェーンを順番に処理します: ディスク上のファイル、データベース、それらの間の接続、HTTP ヘッダー、および <meta> タグ。すべてのリンクは UTF-8 である必要があります。

データベース。 MySQLでは、古い utf8 文字セットは、のエイリアスです utf8mb3、 文字あたり最大 3 バイトしか保存されないため、ほとんどの絵文字などの “補足” 文字を保持できません。MySQLドキュメント utf8mb3 非推奨(MySQL リファレンスマニュアル)。使用 utf8mb4 テーブルと接続用。

HTML エンティティ: まだ必要な場合

UTF-8 を使用すると、入力できます é, ü, ж または 中 ソースに直接。などの文字参照のみが必要です &amp;, &lt; そして &gt; HTML マークアップで意味を持つ文字の場合。エンティティは、ノーブレークスペース(&nbsp;) または右から左へのテキストの方向マーク。

多言語サイトでのエンコーディング

エンコーディングの問題は、サイトが言語を追加した瞬間に発生します。これまで英語のみを表示してきたページでは、UTF-8 と従来の西洋エンコーディングでは平易な英語の文字が同じであるため、間違った宣言を何年も隠してしまう可能性があります。最初のポーランド語、ギリシャ語、または日本語の翻訳がそれを明らかにしています。

言語を追加する前に、次の 3 つの点を確認してください

  1. すべてのテンプレートと静的ファイルは UTF-8 として保存されます そして宣言する <meta charset="utf-8">.
  2. の lang 属性は言語ごとに設定されます例えば <html lang="ja">、 そして右から左へのページも得られます dir="rtl"。エンコーディングにはバイトの読み取り方法が記載されています lang テキストがどのような言語であるかを示します。これはフォント、ハイフネーション、スクリーン リーダーにとって重要です。
  3. 非ラテン文字を含む URL は UTF-8 でパーセントエンコードされます。 多言語サイトに関するGoogleのガイダンスでは、URL内のローカライズされた単語は問題ありませんが、“URLでUTF-8エンコーディングを使用する(実際、可能な限りUTF-8を使用することをお勧めします)”ことと、リンク時にURLを適切にエスケープすること(Google検索セントラル).

ConveyThis ページ上のテキストを、アラビア語、中国語、ヒンディー語、ヘブライ語などのスクリプトを含む、サポートされている 210 言語のいずれかに翻訳し、翻訳されたページを独自の言語 URL から提供します。ただし、間違ったエンコーディングを宣言するテンプレートを修正することはできないため、まず上記のチェックを実行します。右から左への言語には、という設定があります 翻訳されたページでテキストの方向を切り替える; 私たちの RTLデザインガイド レイアウト側をカバーします。全文を見る 機能一覧 そして、翻訳されたページがどのように扱われるか 多言語SEO、 または比較する プランと価格.

クイックチェックリスト

  • ファイルは UTF-8 として保存されます(BOM を保持する理由がない限り、BOM はありません)
  • <meta charset="utf-8"> は最初の要素です <head>
  • サーバーヘッダーにはこう書かれています charset=utf-8、 または何もない、決して異なる文字セット
  • データベーステーブルと接続の使用 utf8mb4 (MySQL/MariaDB)
  • フォームと API は UTF-8 を送信および受け入れます
  • lang (そして dir RTL言語の場合)各言語バージョンに設定

よくある質問

HTML の正しい文字エンコーディングは何ですか?

UTF-8。HTML Living Standard では、ドキュメントの実際のエンコードが UTF-8 であり、宣言では utf-8 ラベルを使用することが求められています。

メタ文字セットはどこへ行くべきでしょうか?

頭の中の最初の要素として。要素全体はドキュメントの最初の 1024 バイト内にある必要があるため、タイトル、スクリプト、スタイルの前に配置します。

HTTP ヘッダーには meta charset=“utf-8” がまだ必要ですか?

W3C では、ファイルがローカルに保存または開かれるとヘッダーが失われるため、サーバーがドキュメントを送信する場合でもドキュメント内でエンコーディングを宣言することを推奨しています。両方を使用すると、同じことを言う必要があります。

私のページにはなぜ é ではなく é が表示されるのでしょうか?

テキストは UTF-8 ですが、Windows-1252 などの従来の Western エンコーディングとしてデコードされています。通常、サーバー ヘッダーまたはメタ タグは間違った文字セットを宣言します。両方にUTF-8 と言わせてください。

ANSIとUTF-8 の違いは何ですか?

ANSI は通常、西ヨーロッパの文字のみをカバーする Windows-1252 などの Windows レガシー コード ページを指します。UTF-8 はあらゆる言語のすべての Unicode 文字を表すことができ、HTML 標準で新しいドキュメントを許可する唯一のエンコーディングです。

言語を追加する準備はできましたか?

ページがクリーン UTF-8 になると、言語の追加は主にコンテンツの仕事になります。できる ConveyThis アカウントを作成します サイトを翻訳し、各言語を独自の URL で公開します。

シェア:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025