文字コードの指定 meta要素

文字コードの指定

「 meta 要素」は、「メタ情報」と呼ばれるドキュメントの情報を設定するための要素です。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「文字コードセット」は必須と規定しています。

また「HTML5」における文字コード指定は、「UTF-8」を推奨しています。

主な用途には、次のようなものがあります。

文字コードセット
ロボット型サーチ・エンジン用の紹介文やキーワード指定
リフレッシュ
作成者等の情報

時々「文字化け」を生じているサイトを見かけますが、それはこの「キャラクターセット」で定義した「文字コード」が適切ではありません。

文字コードを指定する

日本語の文字コードは大きく分けて4つ存在します。

文字コード	キャラクタセット	説明
JISコード	ISO-2022-JP	ISO（国際標準化機構）規格をもとに日本工業規格が規定した文字コードセット。Eメールなどでも一般的に使用されています。
シフトJISコード	Shift_JIS(x-sjis)	Windows や Macintosh 標準の文字コードセット。Web では最も一般的な文字コードセットといってよいでしょう。
EUCコード	EUC-JP(x-euc-jp)	UNIXサーバやワークステーション標準の文字コードセット。
UTF-8コード	UTF-8	データ交換方式、ファイル形式で一般的に使われる。最近ではLinuxでも使われる。

このため、どのコードで書かれているのかを記述して、ブラウザに通知する必要があります。ただし、指定を誤ると「文字化け」などが起こり正しく表示されません。

同じ文字を「ファイルの文字コード」「指定した文字コード」を変更してブラウザに表示される結果を示します。

ファイル/指定	sjisファイル	jisファイル	eucコード
sjisファイル
jisコード
eucコード

シフトJIS を指定する場合は、次のように指定します。

<meta http-equiv="Content-Type"
           content="text/html; charset=Shift_JIS">

EUC を指定する場合は、次のように指定します。

<meta http-equiv="Content-Type"
           content="text/html; charset=euc-jp">

JIS を指定する場合は、次のように指定します。

<meta http-equiv="Content-Type"
           content="text/html; charset=iso-2022-jp">

UTF-8 を指定する場合は、次のように指定します。

<meta http-equiv="Content-Type"
           content="text/html; charset=UTF-8">

なお、文字コードセットは、日本語が含まれる「 title要素」よりも前（厳密には HTML 文書内で日本語が出現する部分よりも前）で指定します。

キーワードを指定する

ロボット型サーチ・エンジン（yahoo・infoseek など）に登録したとき、紹介文やキーワードを記述して検索に引っかかるようにできます。

紹介文が無ければ、最初の文字の数行を紹介文として表示されます。紹介文を表示させたい場合は、 descriptionを利用します。

<meta name="description" content="紹介文">

また、「ロボット検索」で検索してほしいキーワードを指定するには description を利用します。

<meta name="keywords" content"キーワード1,キーワード2">

なお、これらの指定は、すべてのロボット検索エンジンで利用できるわけではありません。現在（2004/12/01）の結果は次のようになります（※「＋α」は、description 指定以外の文字も表示される場合）。

検索エンジン	description	keywords	利用検索エンジン・備考
Yahoo!JAPAN	有効＋α	有効？	2004/05よりInktomi・AltaVista・Overtureを買収、開発（YST）
google	無効	無効	最も人気のあるサーチエンジン
Fresheye	有効＋α	有効？	米Yahoo!の買収した Inktomi を利用
AlltheWeb	有効＋α	有効？	ノルウェーの検索エンジンalltheweb (FAST)。買収により現在Yahoo!の検索結果を利用
Ask.jp	無効	有効？	2004/08より Teoma と Ask.com の機能を日本語化しβ版公開
Infoseek Japan	有効	無効	2003/09 より infoseek & Google
MSNサーチ	無効	無効	2004/11 より β版（Technology Preview）公開
AltaVista	有効＋α	無効	多言語データベースを構築、日本語コード問題を解決し運用。買収により現在Yahoo!の検索結果を利用

なお、各ロボット検索エンジンについては、「検索で上位に表示される方法」参照。

ロボット型サーチエンジン規制

ロボット型検索エンジンで、検索してほしくないページが発生することがあります。その時は、meta 要素を利用すれば、規制をかけることもできます。

例えば「そのページと、そこからリンクしている全てのページへのリンク制限する」には、次のように記述します。

<meta name="robots" content="none">

content属性値を変更すれば、より詳細な制約を与える事が可能です。

content属性値	説明
noindex,nofllow	そのページと、そこからリンクしている全てのページを制限
index,nofllow	そのページのみを許可し、そこからのリンクを制限
index	そのページの登録を許可
noindex,fllow	そのページを制限し、そこからのリンクを許可
all	下の階層ページの巡回を許可

なお、これらの指定は、すべてのロボット検索エンジンで利用できるわけではありません。

自動的に他のページに飛ぶようにする

meta 要素を利用すると、数秒後に指定したアドレスに自動的に移動させることができます。次の例はn秒後に指定したURLへ移動させる例です。

<meta http-equiv="refresh" content="n;
                     url=http://www.～.co.jp">

これは、Web ページの移転などで、一定時間「新URL」を表示しておき、自動的に移動させる処理によく使われます。
ファイル名：index.html

<html>
<head>
<meta http-equiv="refresh"
       content="10; url=http://www.hoge.hoge">
<title>サイト閉鎖及び移転のお知らせ</title>
</head>
<body>

○○のページは閉鎖いたしました。今後は「○○」に移転します。</br>
○○のURLは
<a href="http://www.hoge.hoge">
http://www.hoge.hoge</a>です。
<p>ブックマーク、リンクをされている方はご確認、
ご変更をお願いいたします。</br>
ページは約10秒後に自動的に「○○」のページへ移動します。</br>
自動的に移動できない場合は上のアドレスをクリックしてください。</p>

</body>
</html>

作成者等の情報

meta 要素を利用して、作者の名前をソース内に記述することで、著作権を主張することもできます。

<meta name="author" content="作者名">

また、ほとんどのHTMLエディタでは、何のソフトを利用して作成されたかを表すために、自動的に次のようなタグが付加されます。

<meta name="generator" content="ソフトウエア名">
}}}

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

文字コードの指定 meta要素