概要
コンピューター上のあらゆる文字、数字、記号は、最終的には数値として保存されています。「文字エンコーディング」(または「charset」)とは、どの数値がどの文字を表すかを定めた、共通のルールにすぎません。UTF-8は現代のWeb全体で使われている標準的でほぼ普遍的なエンコーディングで、ごく普通の英字から絵文字、éやñのようなアクセント付き文字まで、あらゆる言語のほぼすべての文字を表現できます。
charsetメタタグは、ページのコード内にある1行の記述で、ブラウザに「このページのテキストはUTF-8方式で読んでください」と伝えるものです。これがないと、ブラウザはどの方式が使われているかを推測するしかなく、その推測が外れると、アポストロフィや引用符が’のような奇妙な記号の羅列に変わってしまいます。
重要な理由
文字化けは、下にある単語がすべて正しく綴られていたとしても、ページを一目で壊れている、あるいは信頼できないものに見せてしまう、最も手っ取り早い原因の一つです。元のテキスト自体は通常問題ないという意味では純粋に見た目だけの問題ですが、訪問者はそれを知りません。奇妙な記号だらけの段落は、雑な印象、あるいは怪しい印象さえ与えてしまいます。
この問題は目立ちやすい割に、修正コストが異例なほど低いのも特徴です。一度だけ1行のコードを追加すれば、ページごとに直す必要はなく、サイト全体で問題が解決します。
修正方法
- ページの
<head>セクションの一番最初の行として<meta charset="UTF-8">を追加します。ブラウザが正しく適用するには、他のタグより前に置く必要があります。 - WordPress、Squarespace、Wix、WebflowなどのサイトビルダーやCMSを使っている場合、これはサイトのテンプレートにほぼ必ずすでに正しく設定されています。文字化けの問題は、Microsoftワードなど別のプログラムから貼り付けたコンテンツが独自の隠れたエンコーディングを持ち込むことが原因である場合の方が多いです。
- Wordや他の文書編集ソフトからの貼り付けが原因と思われる場合は、代わりに「プレーンテキストとして貼り付け」を試し、その後エディタ内で太字や斜体などの書式を改めて設定してください。
- 変更後、対象のページを再読み込みし、アポストロフィや引用符、アクセント付きの文字が正しく表示されるようになったか確認します。
- Launch Readinessのチェックを再実行し、charsetタグが検出されるようになったことを確認しましょう。