HTML – METAタグの配置には要注意！
HTMLコーディングをしている際に遭遇したちょっとした文字化けハプニングです。そのサイトはXHTML 1.1で作成していました。HEADタグ内で文字コード（UTF-8）を指定し、ファイル形式にもUTF-8を使用していため、安心していたのですが、一部の端末のIEで開いたところ、文字化けを起こしているのです。
以下がそのHEADタグ内の記述例です。
1 2 3 4 5 6 7 8 9 10 | <head profile="http://gmpg.org/xfn/11"> <title>タイトル</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <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" /> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> |
上級者からすればイージーミスなのですが、ここでの問題はMETAタグの位置です。文字コードを指定するMETAタグの前に日本語表記があるとIEは文字コード指定を読まず、SHIFT-JISを返してしまいます。従って、修正するのであれば以下のようになります。
1 2 3 4 5 6 7 8 9 10 | <head profile="http://gmpg.org/xfn/11"> <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="keywords" content="" /> <meta name="description" content="" /> <title>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> |
ポイントは文字コード指定を先頭に持ってくることです。SEOの観点から少しでもタイトルが上にあった方がいいだろうと考え、おかしてしまうミスなのですが、たったこれだけのことに初めは解決まで時間を要しました。
FirefoxやSafariなどその他のブラウザでは問題がない上に、IEでもこの現象が起こる場合とそうでない場合があるようです。迷惑な話しですが、HTMLコーディングの際には、是非、考慮しておいた方がよい内容です。
関連記事
