トップページ  > ウェブ制作チュートリアル  > meta要素で適切な文字コードを指定する
第27章 アクセスアップのための対策

★meta要素で適切な文字コードを指定する

meta要素で適切な文字コードを指定する

広告

アクセスアップのために、HTMLファイル制作時にできる対策をしておきましょう。 まずは、文字化けを避けるために、meta要素で適切な文字コードを指定します。

サンプルサイトでは、HTMLファイルを作成する際に、文字コードをUTF-8にして保存しました。そして、HTMLソース中では、以下のようにmeta要素で文字コードを指定しました。

<meta charset="UTF-8">

HTMLソース中に上記の指定が無い場合、ウェブページが文字化けしてしまって、検索エンジンに適切に収集されないことがあるので、そのような事態を避けるためにもHTMLソース中では、文字コードの指定を忘れないようにしましょう。

文字コードは、そのウェブページで利用しているものを適切に指定します。 上記のmeta要素の記述例は、文字コードをUTF-8にしてウェブページを作成した場合のものなので「UTF-8」を指定しています。 もし、文字コードをシフト JISにしてファイルを作成したら「shift_jis」を、EUCで作成したら「euc-jp」を指定します。

<meta charset="shift_jis">
<meta charset="euc-jp">

上記のようにmeta要素で文字コードを指定しなくても、ブラウザの種類によっては文字化けすることなく表示されることがあります。 これは、ウェブページ内に記述されているテキストの内容などから自動的に文字コードが判断されるためですが、それでも文字化けを避けるために文字コードは指定したほうがよいでしょう。

文字化けページは存在してないようなもの

以下の画面は、サンプルサイトのHTMLファイルindex.htmlから、 <meta charset="UTF-8"> の一行を削除したものを、Google Chromeで表示した画面です。 このような文字化けが起きてしまえば、検索エンジンに正しく収集してもらうことができずに、検索結果に表示される確率が下がってしまうでしょう。

文字化けした画面

実際のところ、文字化けしているウェブページは存在していないのとほぼ同じです。 ウェブサイトの内容が良くても悪くても、まずは、検索エンジンに正しく拾われなければ検索結果に表示されにくいですし、 表示されたとしてもユーザーは文字化けしているウェブページの文字コードをわざわざ合わせてくれないものです。

せっかく作ったウェブサイトですから、文字化けによるユーザーのとりこぼしは避けたいものです。 HTMLファイル内でmeta要素による文字コード指定を一行記述しておくだけで文字化けを回避することができるので、必ず指定するようにしましょう。

meta要素はブラウザへの連絡欄

ウェブページの文字化けは、ブラウザがそのウェブページを表示する際に、適切な文字コードを選択できなかったために起きています。 meta要素で適切な文字コードが指定されていないので、ブラウザが自動的に文字コードを選択した結果、不適切な文字コードが選択されて文字化けが起きてしまうのです。

日本語のウェブページの場合、meta要素で文字コードを適切に指定してやらないと、文字化けを起こしてしまう可能性があります。 制作者の閲覧環境で文字化けが起きていなくても安心はできません。ユーザーによって閲覧環境が異なるためです。

例えば、ユーザーの利用しているブラウザが日本語版ではない場合には、文字化けする可能性が高くなります。 文字化けしていても、ユーザーがブラウザのメニューを操作して、適切な文字コードを選択してくれれば正しく表示されるのですが、多くのユーザーはわざわざそのような操作をしてくれません。

HTMLソースを記述している際には、何のために記述しているのか分かりにくいmeta要素ですが、ブラウザや検索エンジンへの連絡欄として重要な役割を担っています。 ウェブサイトがインターネット上で有効活用されるために、meta要素でブラウザや検索エンジンに対して必要な情報を提供するのを忘れないようにしましょう。

まとめ
  1. 文字化けを避けるために、meta要素で適切な文字コードを指定する
  2. meta要素による文字コードの指定を省略すると、文字化けが起きる場合がある
  3. 文字化けが起きると、検索エンジンに正しく収集してもらえない場合がある
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ