metaタグについて
メタタグ(meta tag)とは、Google、Yahoo!などに代表されるロボット型検索エンジンでスパイダー（クローラー）と呼ばれるプログラムにホームページの情報を拾わせるための記述方法です。
もともとメタ情報というのは、データそのものではなく、データに関連する情報のことで、データの作成日時や作成者、データ形式、タイトル、その他注釈などデータを効率的に管理したり検索したりするために重要な情報です。
文書ファイルや画像ファイルなどは、実際のデータの先頭にメタ情報というものが格納されていて、続いてデータ本体を格納するようにできているんです。
htmlの場合も同様で、metaタグは、そのサイトやドキュメントに関する情報を指定して、ブラウザやクローラー（スパイダーとも言う）に知らせるための情報を記述しているものです。
metaタグには、ページ内容の説明やキーワード、ファイル情報などを記載しますが、直接ブラウザに表示されるわけではありません。
前述の通り、メタ情報はそのデータを効率的に管理したり検索したりするための付随情報なので、ファイルの冒頭部分、つまり<head>～</head>の間にいれます。
残念ながら現在の検索エンジンの多くはmetaタグを評価しません。しかし、まだ評価してくれる検索エンジンもいくつか存在していますので、入れないよりは入れておいた方が良いです。
以下のmetaタグを<head>～</head>の間に入れてください。
キャラクターセット
文字コードを設定するためのmetaタグです。これを入れることにより、文字化けがなくなります。
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
| charset | 文字符号化スキーム |
|---|---|
| Shift_JIS | シフトJIS |
| EUC-JP | 日本語EUC |
| utf-8 | UNICODE |
| utf-16 | UNICODE |
| ISO-2022-JP | ISO-2022-JP (RFC1468) |
基準となるスクリプト言語とスタイルシートの指定
htmlは特定のスクリプト言語に依存しませんので、著者はユーザーエージェント（ブラウザ）に対し各スクリプトの言語を明示しなければなりません。
また、W3Cは、html文書に結びつけるスタイル情報を記したスタイルシート言語をmeta要素で指定するよう勧告しています。
つまり、JavaScriptとCSSの情報を明記しておいてねってことです。
<meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />
IEの独自機能をオフにする
画像ファイルの上にカーソルが来ると勝手にツール表示を行ったりする機能があります。オフにしておきましょう。
<meta http-equiv="imagetoolbar" content="no" />
サーチエンジンのロボット（クローラ）の動きを制御する
ページ内を検索対象にしたり、検索対象から外したり、ページ内のリンクを巡回させるなど、クローラーの動きを制御するための記述です。
<meta name="robots" content="INDEX,FOLLOW" />
| content属性 | 動作 |
|---|---|
| index | ページ内を検索対象にし、内容を登録する |
| noindex | ページ内を検索対象から外し、内容も登録しない |
| follow | ページ内のリンクを巡回させる |
| nofollow | ページ内のリンク先を検索対象から外す |
| noimageindex | ページ内の画像を検索対象から外す |
| noimageclick | ページ内の画像リンク先を検索対象から外す |
| noarchive | ページをキャッシュさせないようにする |
| nosnippet | ページのスニペットを表示しないようにする |
| unavailable_after | 指定した期日以降、指定ページを検索結果から削除する |
文書の作成者と著作権
誰が書いたのか、著作権は誰が持っているのかは、明記しましょう。本と同じです。
<meta name="author" content="鈴木智子のホームページのアクセスアップ講座" /> <meta name="copyright" content="Copyright (c) 2009 nishi-shinjuku.net" />
サービス提供対象範囲
<meta name="coverage" content="japan" />
| content属性 | サービス提供対象範囲 |
|---|---|
| Worldwide | 全世界 |
| Asia | アジア |
| Japan | 日本 |
地理的対象範囲
<meta name="Targeted Geographic Area" content="japan" />
| content属性 | 地理的対象範囲 |
|---|---|
| Worldwide | 全世界 |
| Asia | アジア |
| Japan | 日本 |
カテゴリ
カテゴリを設定。複数ある場合は、カンマ区切りで全て入れてください。
<meta name="classification" content="general,computers,internet,personal" />
| content属性 | カテゴリ |
|---|---|
| general | 一般 |
| business | ビジネスと経済 |
| computers | コンピューター |
| entertainment | 娯楽 |
| internet | インターネット |
| miscellaneous | その他 |
| personal | 個人 |
| adult | アダルト |
| arts | 芸術と人文 |
| education | 教育 |
| government | 政治 |
| shopping | ショッピング |
| health | 健康と医学 |
| regional | 地域情報 |
閲覧対象年齢層
<meta name="rating" content="general" />
| content属性 | 対象年齢層 |
|---|---|
| general | 全ての年齢層 |
| child | 子供向け |
| adult | 大人向け |
キーワード
キーワードをカンマ区切りで設定、5～6個程度入れてください。
<meta name="keywords" content="鈴木智子,ホームページ,アクセスアップ,講座" />
説明文
なるべく全角80文字以内で設定、検索されたいキーワード含む文章として記述しましょう。Googleでは、この部分が説明文になる場合があります。具体的な例を画像で説明したほうが良いかもしれませんね。
<meta name="description" content="鈴木智子のホームページのアクセスアップ講座は、実戦的ホームページの制作からSEO、SEM、広告戦略まで余すところなく公開します。" />
スニペット
スニペットは、検索エンジンの検索結果画面で、ページタイトルの下に表示される説明文のこと。検索キーワードを含んだ文のことです。
Yahoo!カテゴリ
Yahoo!カテゴリに登録されているサイトでは、検索結果のタイトルとスニペットをカテゴリから引用されてしまうことがあります。カテゴリに掲載されているタイトルや説明文では、ページの内容を適切にあらわさないケースも多く、検索結果からのクリック率が下がるなど多くの問題を抱えていました。これらの問題を解決します。
<meta name="slurp" content="NOYDIR" />
dmoz（ディーモズ）
dmozに登録されているサイトでは、検索結果のタイトルとスニペットをカテゴリから引用されてしまうことがあります。カテゴリに掲載されているタイトルや説明文では、ページの内容を適切にあらわさないケースも多く、検索結果からのクリック率が下がるなど多くの問題を抱えていました。これらの問題を解決します。
<meta name="robots" content="NOODP" />
Yahoo!カテゴリ、dmozともにディレクトリ型検索エンジンと呼ばれています。
ディレクトリ型検索エンジンは、この他にも沢山あります。
「鈴木智子のホームページのアクセスアップ講座」では、次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-script-type" content="text/javascript" /> <meta http-equiv="Content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="author" content="鈴木智子のホームページのアクセスアップ講座" /> <meta name="copyright" content="Copyright (c) 2009 nishi-shinjuku.net" /> <meta name="coverage" content="japan" /> <meta name="Targeted Geographic Area" content="japan" /> <meta name="classification" content="general,computers,internet,personal" /> <meta name="rating" content="general" /> <meta name="Keywords" content="鈴木智子,ホームページ,アクセスアップ,講座" /> <meta name="Description" content="鈴木智子のホームページのアクセスアップ講座は、実戦的ホームページの制作からSEO、SEM、広告戦略まで余すところなく公開します。" /> <meta name="slurp" content="NOYDIR" /> <meta name="robots" content="NOODP" /> <title>鈴木智子のホームページのアクセスアップ講座</title> </head>
では、次に「h1,h2,h3,h4,h5,h6タグについて」に進んでゆきましょう。
