検索上位表示のためのHTMLタグはこれだけ
HTMLタグのうち、以下のタグだけ覚えれば、HPの作成はできます。
＜head＞＜/head＞の中だけで使われるタグ
titleタグ
- 意味 title（タイトルの指定）
- 使用例 ＜title＞xxxのyyyについて＜/title＞
- ここに何を書くかが、検索順位に一番影響する。
検索結果の画面のタイトル（青字）に使われる。
このタイトルを見て、ユーザーがクリックするか、どうかを決めるので重要。
例えば、次の三つのタイトルのうち、どれが興味をひくか。
1.「因数分解の解法」
2.「因数分解の解法 高校の数学」
3.「因数分解の解法 浦和高校の数学」
metaタグその１
- meta（高次の）メタデータを指定する。
- ＜meta name="Description" content="xxxのyyyは○○○"＞
-
Description（説明）。content（内容）。
説明の内容＝"xxxのyyyは○○○"と指定した事になる。
ここに書かれた文章と、ページ本体の文章、検索に使われたキーワードから、自動的に、
検索結果の画面のタイトル（青字）の下の説明文（黒字）が作成される。
その説明文を見て、ユーザーがクリックするか、どうかを決めるので重要。
検索に使われたキーワードの周辺の文章が使われる可能性が高い。
ただ、どういう説明文になるかをサイト作成者が自由にコントロールする事はできない。
metaタグその２キーワードタグ
- meta（高次の）メタデータを指定する。
- ＜meta name="Keywords" content="xxx,yyy"＞
-
キーワードの内容＝"xxxとyyy"と指定した事になる。
キーワードは半角のカンマで区切る。
ヤフーの公式ページ「サイトの順位を上げるには」
help.yahoo.co.jp/help/jp/search/indexing/indexing-23.html
『「keyword」METAタグを使い、ページに関連するキーワードをリストアップします。
すべてのページに当てはまるキーワードよりも、ページ固有のキーワードをそれぞれ記載するとよいでしょう。』と書いてある。
キーワードの個数については、何も言及していない。
＜body＞＜/body＞の中で使われるブロックレベル要素
h1タグ〜h6タグ
- header（見出し）
-
＜h1＞検索ヒットのためのHTMLタグ＜/h1＞
＜h2＞AAA＜/h2＞
＜h2＞BBB＜/h2＞
＜h3＞BBB1＜/h3＞
＜h3＞BBB2＜/h3＞
＜h2＞CCC＜/h2＞
-
h1=大見出し。１ページに１回が原則。
h2=中見出し。h3=小見出し。
大論文でもない限り、h4以降を使う事はないだろう。
大見出し。中見出し。小見出し。の出て来る順番に矛盾がないように。
pタグ
- paragraph（段落）
-
＜p＞
abcはxyzで、・・・
defのghiは、・・・
・・・
＜/p＞
- 文章は必ず＜P＞タグや＜li＞タグで囲むように。
olタグ
- ordered list（順序ありのリスト）
-
＜ol＞
＜li＞aaa＜/li＞
＜li＞bbb＜/li＞
＜li＞ccc＜/li＞
＜/ol＞ -
orderは命令する、注文する、順に並べる。などの意味がある。
1.aaa
2.bbb
3.cccと表示される。
ulタグ
- unordered list（順序なしのリスト）
- olタグと同様。
-
unは否定の接頭語。
・aaa
・bbb
・cccと表示される。
liタグ
- list item（リスト アイテム項目）
- ＜li＞aaa・・・＜/li＞
-
私はリスト構造をなるべく、使うようにしている。
＜li＞ ＜h2＞xyzについて＜/h2＞ ＜/li＞のような書き方も可。
divタグ
- division（区画、分割されたもの）動詞のdivideは分割する。
-
＜div id="AAA"＞
・・・この部分がAAAという名前がついた区画になる・・・
＜/div＞ -
区画に名前をつけておいて、CSSファイルで、
その区画の表示方法を指示するというのが、最近の流行。
CSSファイルについては
CSSファイルを利用したホームページの作成へ
高校生のためのHP検索上位HIT術２０号 2007/2/24より
＜body＞＜/body＞の中で使われるインライン要素
aタグ
- anchor（アンカー）
- ＜a href="../google/index.htm"＞グーグル検索＜/a＞
-
../は親ディレクトリ（上位のディレクトリ）を意味する。
「グーグル検索」の部分をアンカーテキストと言う。（重要）
このように書くと、飛び先の「google/index.htm」というページの強力なキーワードとして、
「グーグル検索」という語句が検索エンジンに登録される。
＜a href="../google/index.htm#page"＞グーグルのPR＜/a＞と書いておいて、
飛び先のページに
＜h3 id="page"＞ページランク＜h3＞と書いておくと、
リンクをクリックした時に、google/index.htmの途中にある
＜h3 id="page"＞ページランク＜h3＞の所に飛ぶ。
strongタグ
- strong（論理的強調）
- ＜strong＞前略プロフィール＜/strong＞
-
bタグもstrongタグも人間の目には太字となり、区別はつかない。
検索エンジンは区別して、strongタグで囲まれた語句は、
そのページで重要な語句と判断する。
検索でHITしたい語句はstrongタグで囲むべき。
fontタグ
- font（文字の書体）
- ＜font size="3" color="blue"＞
-
fontタグで、文字の大きさや色を指示できるが、
CSSファイルで、一括して指示した方が良い。
fontタグはなるべく、使わないように。
ブロックレベル要素とインライン要素の入れ子
- ブロックレベル要素とインライン要素(単純なテキスト文章も含む)の入れ子
- ＜p＞＜strong＞abcxyz＜/strong＞＜/p＞は可。
- ＜strong＞＜p＞abcxyz＜/p＞＜/strong＞は不可。
- ほとんどのブロックレベル要素はインライン要素を含む事ができる。
- ＜h1＞ ＜a href=・・・＞ｘｙｚ＜/a＞ ＜h1＞は可。
- 一部のブロックレベル要素(li要素)は、さらにブロックレベル要素を含む事ができる。＜li＞ ＜h2＞xyz＜/h2＞ ＜/li＞は可。
- ほとんどのインライン要素はインライン要素を含む事ができるが、
- ＜a href=・・・＞ｘｙ＜strong＞ｚ＜/strong＞abc＜/a＞は可。
- インライン要素はブロックレベル要素を含む事はできない。
＜strong＞＜p＞abcxyz＜/p＞＜/strong＞は不可。
- インライン要素は必ず、ブロックレベル要素に含まれないといけない。
- ＜p＞abcxyz＜/p＞ ＜a href=・・・＞ｘｙｚ＜/a＞ ＜p＞defghi＜/p＞は不可。
- ＜p＞abcxyz ＜a href=・・・＞ｘｙｚ＜/a＞ ＜/p＞ ＜p＞defghi＜/p＞は可。
タグの中で使われる属性名
id属性
- identifiers(識別子)
- ＜h3 id="page"＞、＜p id="bbb"＞、＜div id="lead"＞など
- aタグと組み合わせる。＜a href="../google/index.htm#bbb"＞のように。
CSSファイルの中に .bbb{color:#ff9900;}と書いておくと、
id="bbb"を指定した部分の文字が全て、オレンジ色になる。
class属性
- class（部門）
- ＜h3 class="page"＞
- 使い方はidと同じ。
ただし、同じidは一つのページで１回まで。
３年５組２０番の人は二人いては、いけない。
同じclassを何度も使うのは可。
例：＜h3 class="red"＞
＜p class="red"＞
＜div class="red"＞
CSSファイルの中に ．red｛color：#ff9900；｝と書いておくと、
class="red"を指定した部分の文字の色がff9900になる。
href属性
- hyper reference（参照）
- ＜a href="../google/index.htm"＞
- 飛び先の指定
src属性
- source（出典）
- ＜img src="../i/logo1.jpg"＞
- imgイメージ（写真や図）のアドレス、ファイル名を指定する。
alt属性
- alternate text（代替テキスト）
- ＜img src="../i/logo1.jpg" alt="夜叉神峠" ＞
- 写真や図が表示できない場合、
代わりにalt=で指定した文字が表示される。
また、マウスを写真や図に重ねると、指定した文字がポップアップする。
W3Cの勧告では、alt属性は必ず指定するようになっている。
高校生のためのHP検索上位HIT術２０号 2007/3/19より
最後まで読んでいただいて、ありがとうございました。
