HEADタグとは、タイトルやドキュメントのさまざまな情報を定義した「ヘッダタグ」をマークアップするために使用されるタグです。
簡単に言えば、「ページタイトルやサーバ等が利用する情報」を指定する。という事です。
META要素はブラウザやサーバーによって対応しているもの、対応していないものがあり、必ずしも期待する動作が実行されるわけではありません。
ただし、META要素を指定しておくことは指定しない場合に比べて自分の意図する動作が正しく実行される確率が高くなるため、
決して無意味なものではありません。
SEO対策 で必要な HEADタグ 内記述はこれだけ
- <title>ページタイトル</title>
- タイトルタグ。ページのタイトルを記入する。ページ内記述において最もSEO効果がある。
- <meta name="description" content="ページの要約">
- デスクリプションタグ（ディスクリプションタグ）。ページの要約を記述する。
グーグルはこのタグを約100字まで読み込むので、約100字以内での記述を目指す。目的キーワードは2-3回、記述。
*視覚障害者のためのスクリーンリーダーは、デスクリプションタグ（ディスクリプションタグ）が読み込めません。
- <meta name="Keywords" content="ヒットさせたい目的の検索キーワード" lang="ja">
<meta http-equiv="keyword" content="xxx,yyy,zzz">
<meta name="keyword" content="xxx,yyy,zzz">
- キーワードタグ。上記3つの内一つを選択し、キーワードを記述。
記述量が多すぎるとスパムと判定されてしまう事があるため、Keywordは予め5-6個にまとめておく。
- <link rel="prev" href="http://google.client.jp/">
<link rel="next" href="http://google.client.jp/kouza/index.html">
- LINKタグ。基本的に
Stylesheet Start Next（現在のWebページから見て次のページを示す） Prev（現在のページから見て直前のページを示す）
の4つでSEO対策としては十分。上記2つでも、別に良い。
*rel（順方向）とrev（逆方向）という属性があり、relはrelation、revはreverseから来ている。しかしSEO的にはrelだけで必要な記述は出来ます。
*<link rel="stylesheet" href="../css.css" type="text/css"> これも一応LINKタグの仲間。
- <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
- 文字コードを指定するメタタグ。各自サーバーとの兼ね合いにより、ecu_jpなのかShift_JISなのか自由に決める。
- <meta http-equiv="Content-Style-Type" content="text/css">
- http-equiv属性・CSS使用の明示的宣言
これはスタイルシートを使用すると明示的に宣言している。
- <meta http-equiv="Content-Script-Type" content="text/javascript">
- http-equiv属性・Java Script 使用の明示的宣言
これはジャバスクリプトを使用すると明示的に宣言している。
- <link rel="stylesheet" href="http://google.client.jp/css/css.css" type="text/css">
<script language="javascript" src="http://google.client.jp/js/javascript.js"></script>
- CSS・ジャバスクリプトの外部ファイル。ジャバスクリプトを使用しないなら下のタグは記述しない。CSSのそれも同じ。
絶対URL・相対URLどちらでも良い。先ほどのprev nextの仲間の様な物。
以上が最低限必須になるヘッドタグ内記述である。これをまとめると・・・
<title>ページタイトル</title>
<meta name="description" content="ページの要約">
<meta name="Keywords" content="ヒットさせたい目的の検索キーワード" lang="ja">
<link rel="prev" href="直前のページURL">
<link rel="next" href="次のページのURL">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="CSSファイルのURL" type="text/css">
である。なお、文字コードはタイトルタグより後で構わない。まず検索エンジン対策として、通常文字化けは起こらないからだ。
どうしてもというなら、.htaccess で AddType "text/html; charset=Shift_JIS" .html と記述する。
- HTML4.01 で定義されているものでSEO・ユーザビリティに必要だと思われる物
- 通常LINKタグで必要なのはStylesheet Start Next Prev です。
必要に応じて Contents Index Glossary を加えるとユーザビリティが高まるでしょう。
- Alternate
- 代替バージョン。異なる言語等の版を示します。media属性と併用すると、異なるメディア向けの版を表します。
- Stylesheet
- 外部スタイルシート。Alternate と併用することにより、代替スタイルシートを表す（代替スタイルシートについてはNetscape6は対応済み）。
- Start
- ドキュメント郡の先頭となるドキュメントを示します。ロボットにサイトのトップページを提示する機能がある。
- Next
- 連番の次
- Prev
- 連番の前（previousも可）
- Contents
- 目次（table of contents. 複数の文章を対象とした目次）（ToCも可）
- Index
- 索引（当該文章の目次）
- Glossary
- 用語集・語彙集
- Copyright
- 著作権情報
- Chapter
- 章
- Section
- 節
- Subsection
- 項
- Appendix
- 付録
- Help
- ヘルプ
- Bookmark
- 関連リンク
なお<LINK>タグは、あくまでファイルとファイルの結びつきを示す物であって、それ程躍起になる必要は無い。
- <base href="http://google.client.jp/" target="_top">
- ベースタグ。SEO的には無くても構わない。
ベースタグはそのページからのリンクURL（絶対URLや相対URL）の基準を指定する。SEO的にはどのサイトも言及していない。少なくとも日本語圏では。
HEADタグ 内に記述されるタグ全種一覧
まず METAタグ TITLEタグ STYLEタグ SCRIPTタグ があります。
メタタグについては後述します。
タイトルタグはブラウザ上部に文字が表示されるタグで、そのWebページのタイトルを表します。
スタイルタグはスタイルシートを指定するために使われます。
スクリプトタグはジャバスクリプトの指定をするために使用されます。
METAタグ メタタグ 全種一覧
- <META HTTP-EQUIV="Refresh" CONTENT="60">
- Webページの自動リロードを実行させるメタタグ。上記タグの場合は、60秒後にリロードするようになっている。
- <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
- 文字コードを指定するメタタグ。上記タグはシフトジスによる文字コードを指定している。
文字コードは、以下の3種類の内1つを指定する。
Shift_JIS
euc-jp EUC
iso-2022-jp JIS
- <meta http-equiv="Content-Language" content="ja">
- HTMLにおける主言語を指定する、メタタグ。上記タグは日本語（japanese）を指定している。（通常このタグを使用する）
同じ意味を持つタグとして<html lang="ja">（HTML要素）、<body lang="ja">がある
他言語の文書が指定できる点、例えば日英の2カ国語文書が指定する等、またHTTPのContent-Languageで言語を伝えることができるという理由から
META要素での指定が推奨される。META要素での指定はHTML要素での指定よりも優先される。（しかしSEO的にはHTML要素で宣言すれば良い）
- ローカルキャッシュの無効（ブラウザが対応している場合）
- <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
これらのタグを一つ入れると、ブラウザが対応している場合に、PCのローカルキャッシュを防ぐ。
モダンブラウザー（modern browser）は大抵対応している。
- <meta http-equiv="expires" content="Fri, 20 Aug 2004 22:22:22 GMT">
- これはページの有効期限を指定するmetaタグ
この情報はキャッシュによって、当該文書の新しいコピーをいつ取ってくれば良いかを判断するために使われる。
キャッシュを無効にするにはcontent="0"と指定。
- http-equiv属性
- <meta http-equiv="Content-Style-Type" content="text/css">
これはスタイルシートを使用すると明示的に宣言している。
<meta http-equiv="Content-Script-Type" content="text/javascript">
これはジャバスクリプトを使用すると明示的に宣言している。
- <meta http-equiv="refresh" content="10;URL=http://xxx.xxx/~xxx/index.html">
- http-equiv属性はname属性の代わりに用いられ得ることができ、これを指定した場合
HTTPサーバは http-equiv属性で指定されるプロパティ名を、HTTP応答におけるRFC822形式のヘッダ生成に用いる。
ここからグンと SEO対策 らしくなります
特に必要なタグは、メタタグのキーワードタグ・デスクリプションタグの2つになります。
- name属性一覧
- SEO対策の上で大切になってくる部分。自分なりにカスタマイズしよう。
- <meta name="Keywords" content="ヒットさせたい目的の検索キーワード" lang="ja">
<meta http-equiv="keyword" content="xxx,yyy,zzz">
<meta name="keyword" content="xxx,yyy,zzz">
- 検索エンジンで検索したときに、効率良くヒットさせるためのキーワードを数個記述。
カンマ区切りで複数記入する。Googleは最近メタタグのkeywordタグを無視する。Yahoo!等はきちんと拾ってくれる。
META要素でlang属性を指定しておくと、content属性値の言語を指定できる。
- <meta name="description" content="ホームページの紹介文">
- 検索エンジンに対して自分のHPの内容紹介を表記する。Google・Yahoo!（YST）共に拾ってくれる。
このデスクリプションタグは、Googleの場合において「スニペット」と表しても、意味は通じる。
- <meta name="Author" content="自分の名前">
- 製作者が誰であるかを表すmetaタグ。
このタグは特定の人物が作成したドキュメントを一覧検索する際に活用される。
- <meta name="copyright" content="著作権表示">
- 著作権を表すMETAタグ。
しかし現在の日本の著作権法上では特に明記しなくとも著作物が創られたときから権利が発生することになっているため、
わざわざ入れる必要はないとも言える。。。
- <meta name="reply-to" content="ggg">
- 連絡先メールアドレスを明記する。gggには各自のメールアドレスを代入。
- <meta name="build" content="n">
- nにはページが作成された年月日を明記。
- <meta name="GENERATOR" content="Microsoft FrontPage 2.0">
- 何のソフトウェア（エディタ・HP作成ツール等）で作成したものかを示す。
市販のホームページ製作ソフトには強制的に入るものが多い。ちなみにMicrosoft FrontPage 2.0は私が初めて使用したHP制作ツールである。
- <meta name="ROBOTS" content="NOINDEX,NOFOLLOW">
- 検索エンジンにヒットさせるかどうかを明示するメタタグ。上記のメタタグは
検索エンジンへの登録もせず、そのページから張られているリンク先もロボットに巡回させない。という意味。
all の3字を上記「NOINDEX,NOFOLLOW」へ代入させた場合、
そのMETAタグがあるページと、そのページからリンクされている全てのページのクロールを許可する。という意味のタグになる。
none の4字を代入させた場合、METAタグがあるページとそのページからリンクされている全てのページを、クロールしない。という意味になる。
index の5字を代入させた場合、METAタグがあるページのクロールを許可する。という単体の意味になる。
noindex の7字のみを代入させた場合、このMETAタグがあるページのクロールを許可しない。という単体の意味になる。
follow の6字を代入すると、METAタグがあるページからリンクされているページを許可する。という単体の意味になる。
nofollow の8字を代入すると、このMETAタグがあるWebページに張られているリンク先のクロールを許可しない。という単体の意味になる。
*ヒットさせたい時は、基本的にこのタグは使わない。よって通常のSEOにおいてはrobotsのメタタグは記述しない。してもあまりSEO効果は望めない。
- <meta http-equiv="page-enter" content="RevealTrans(Duration=N,Transition=xxx)">
- xxxにはキーワード（0-23の数字）が入る
0 Box in
1 Box out
2 Circle in
3 Circle out
4 Wipe up
5 Wipe down
6 Wipe right
7 Wipe left
8 Vertical blinds
9 Horizintal blinds
10 Checkerboard across
11 Checkborard down
12 Random dissolve
13 Split vertical in
14 Split vertical out
15 Split horizontal in
16 Split horizontal out
17 Strips left down
18 Strips left up
19 Strips right down
20 Strips right up
21 Random bars horizontal
22 Random bars vertiacal
23 Random