HTML編 07/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
HEADタグ内の小技
文字化け防止
ロボット型サーチエンジンに情報を送る
自動でジャンプする




文字化け防止

●<META HTTP-EQUIV="Content-Type">
先ほど<HEAD>タグ内に<TITLE>タグが入ることは説明しました。この<HEAD>タグ内に入れられるタグは、種類は限られていますが<TITLE>以外にも少々あります。中でも<META>タグは非常に実用的なタグですので、最初に説明しておきます。
ネットサーフィンをしていて、ページ内の日本語が全て文字化けしていたという経験は誰にでもあると思いますが、これを<META>タグを使うことで防止できます。以下の<META>タグを<HEAD>タグ内に書き込みます。

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">

もちろん、これは日本語を正しく表示するためのタグですので、英語ページには入れないでください(笑)。これは難しく考えず、とりあえず「このまま入れておけば良い」と思ってくださって結構です。
<HTML>
<HEAD>
<TITLE>練習</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY>
こんにちは
</BODY>
</HTML>




ロボット型サーチエンジンに情報を送る

●<META NAME>
これは万能というわけではありませんが、インフォシークなどのロボット型サーチエンジンに登録する際、作者の意図した紹介文や、ヒットさせたいキーワードをMETAタグで指定することが出来ます。コメントを指定するには以下のMETAタグをHEADタグの中に書き込みます。

<META NAME="description" content="この部分にコメントを入れます。入れられる文字数は検索エンジンによって異なります。">

上の例を書いておくと、検索エンジンに登録した際、このサイトの紹介文は「この部分にコメントを〜」となります。
キーワードを指定したい場合は以下のように書きます。

<META NAME="keywords" content="キーワード,キーワード2,キーワード3">

これですと「キーワード」「キーワード2」「キーワード3」で検索した時にこのページがヒットします。キーワードとキーワードの区切りは「,」で区切ります。
「検索エンジンに登録したいのだが、サイトの中でこのページだけはヒットさせたくない」という場合は、

<META NAME="robots" CONTENT="none">

とします。ただし、これも万能ではなく、このタグを無視して登録してしまう検索エンジンもありますので、ご注意を。詳しくは登録したい検索エンジンのホームページをご覧ください。




自動でジャンプする

●<META http-equiv="refresh">
もう一つユニークなMETAタグをご紹介しましょう。いわゆる「スプラッシュページ」によく使われている「このページは数秒後に自動でジャンプします」というやつです。
先ほどつくった「test.html」を複製してください。複製された方を「test2.html」というファイル名にし、「こんにちは」の部分を「こんばんは」など別の文字に変えて保存します。次に「test.html」を開き、<HEAD>タグ内に下のMETAタグを書き込んでください。

<META http-equiv="refresh" content="5;URL=test2.html">

保存してブラウザで「test.html」を開いて5秒待ってみてください。どうでしょう。ジャンプしましたでしょうか?
test.html
View

<HTML>
<HEAD>
<TITLE>練習</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<META NAME="description" content="この部分にコメントを入れます。入れられる文字数は検索エンジンによって異なります。">
<META NAME="keywords" content="キーワード,キーワード2,キーワード3">
<META http-equiv="refresh" content="5;URL=test2.html">
</HEAD>
<BODY>
こんにちは
</BODY>
</HTML>

test2.html

<HTML>
<HEAD>
<TITLE>練習</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<META NAME="description" content="この部分にコメントを入れます。入れられる文字数は検索エンジンによって異なります。">
<META NAME="keywords" content="キーワード,キーワード2,キーワード3">
</HEAD>
<BODY>
こんばんは
</BODY>
</HTML>
content="5" の5の部分を好きな数字に変えれば、その数字分待って次のページへジャンプします。0でも構いませんが最初のページが表示される前にジャンプしてしまいます(笑)。
URL=に続けてジャンプ先を指定します。今はサーバーにアップロードする前ですので、ジャンプ先を相対パスで指定していますが、アップロードする前に絶対パスに修正しないと、不具合が出る可能性があります。

backindexnext