metaタグと文字化け

文字化けの原因

文字化けはブラウザーが、文字コードを正しく判定していないか、異なる文字コードが混入することが、原因と考えられる。また、検索エンジンなどの検索結果の文字化けは、不適切なurlに関する設定で、検索エンジンを呼び出した事による。異なる文字コードが混入する原因は、プログラムが関係している。urlとプログラムの問題はあとで解説することにして、このページでは、ブラウザーに正しく文字コードを判別させる目的で、設定されているmetaタグについて解説します。

文字コードをブラウザーに明示するmetaタグ

文字コードをブラウザーに明示するmetaタグを具体的に、見てもらうために、３つのソースコードを表示しました。下記のソースコードで、色が違っている一行が、文字コードをブラウザーに明示するmetaタグです。最後に、utf-8といずれもなっていることがわかるでしょう。この部分をshift_jis,euc-jpとすると、それぞれの文字コードで、ブラウザーはウエブページを解釈しようとします。このmetaタグがなければ、ブラウザーは、ウエブページの文字の状態から、判別プログラムによって、文字コードを判別しようとします。文字化けを防ぐためには、metaタグで、文字コード設定をしておくべきです。

metaタグの注意点

下の３つのソースコードを比較してみてください。私が使っている外国のテンプレートのソースコードは、オリジナルでは、titleタグ、<title>が、文字コード設定のmetaタグより前にありますが、YahooやGoogleは、順序が逆になっています。英数字だけのサイトなら問題ないのですが、文字コード設定のmetaタグより前に漢字やひらがながあると、文字コード設定のmetaタグがうまく機能しない場合があるそうです。titleタグに漢字やひらがなを使う場合は多いですから、文字設定のmetaタグの後にtitleタグをおいた方が安全なのです。

当サイトで使用したテンプレートのオリジナルソースコードの一部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<title>Sixpence | Portal</title>
	
	<meta http-equiv="content-language" content="en-us" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<meta name="author" content="Author Name Goes Here" />
	<meta name="design" content="Sadhana Ganapathiraju" />

	<meta name="copyright" content="Copyright Goes Here" />
	<meta name="description" content="Description Goes Here" />
	<meta name="keywords" content="And, Finally, Keywords Go Here." />
	
	<link rel="start" title="Home" href="http://www.sixpence.com/" />
	
	<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
	
	<!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" /><![endif]-->

</head>

上から６行目が、文字コードをブラウザーに明示するmetaタグ。

Yahooのソースコードの一部
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta name="description" content="日本最大級のポータルサイト。(途中略)「ライフ・エンジン」を目指していきます。">
<title>Yahoo! JAPAN</title>

上から３行目が、文字コードをブラウザーに明示するmetaタグ。

Googleのソースコードの一部
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Google</title>

上から３行目が、文字コードをブラウザーに明示するmetaタグ。

inserted by FC2 system