検索上位表示のためのHTMLタグはこれだけで充分

HTMLタグのうち、以下のタグだけ覚えれば、HPの作成はできます。

＜head＞＜/head＞の中だけで使われるタグ

  1. titleタグ

    • 意味 title（タイトルの指定）
    • 使用例 ＜title＞xxxのyyyについて＜/title＞

    • ここに何を書くかが、検索順位に一番影響する。検索結果の画面のタイトル（青字）に使われる。

      このタイトルを見て、ユーザーがクリックするか、どうかを決めるので重要。

      例えば、次の三つのタイトルのうち、どれが興味をひくか。

      1. 「因数分解の解法」
      2. 「因数分解の解法　高校の数学」
      3. 「因数分解の解法　浦和高校の数学」

  2. metaタグその１

    • 意味 meta（高次の）メタデータを指定する。
    • 使用例 ＜meta name="Description" content="xxxのyyyは○○○"＞

    • Description（説明）。content（内容）。

      説明の内容="xxxのyyyは○○○"と指定した事になる

      ここに書かれた文章と、ページ本体の文章、検索に使われたキーワードから、自動的に、検索結果の画面のタイトル（青字）の下の説明文（黒字）が作成される。その説明文を見て、ユーザーがクリックするか、どうかを決めるので重要。

      検索に使われたキーワードの周辺の文章が使われる可能性が高い。ただ、どういう説明文になるかをサイト作成者が自由にコントロールする事はできない。

  3. metaタグその２キーワードタグ

    • 意味 meta（高次の）メタデータを指定する。
    • 使用例 ＜meta name="Keywords" content="xxx,yyy"＞

    • キーワードの内容＝"xxxとyyy"と指定した事になる。

      キーワードは半角のカンマで区切る。

      ヤフーの公式ページ「サイトの順位を上げるには」help.yahoo.co.jp/help/jp/search/indexing/indexing-23.htmlに書かれてる事。

      『「keyword」METAタグを使い、ページに関連するキーワードをリストアップします。すべてのページに当てはまるキーワードよりも、ページ固有のキーワードをそれぞれ記載するとよいでしょう。』キーワードの個数については、何も言及していない。

      ただし、現在は、グーグル検索でも、＜meta name="Keywords"は、意味がなくなっている。

＜body＞＜/body＞の中で使われるブロックレベル要素

  1. 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以降を使う事はないだろう。

      大見出し。中見出し。小見出し。の出て来る順番に矛盾がないように。

  2. pタグ

    • 意味 paragraph（段落）
    • 使用例 ＜p＞abcはxyzで、・・・defのghiは、・・・・・・＜/p＞
    • 文章は必ず＜P＞タグや＜li＞タグで囲むように。

  3. olタグ

    • 意味 ordered list（順序ありのリスト）
    • 使用例 
      ＜ol＞
＜li＞aaa＜/li＞
＜li＞bbb＜/li＞
＜li＞ccc＜/li＞
＜/ol＞

    • orderは命令する、注文する、順に並べる。などの意味がある。

      1. aaa
      2. bbb
      3. cccと表示される

  4. ulタグ

    • 意味 unordered list（順序なしのリスト）
    • olタグと同様。

    • unは否定の接頭語。

      • aaa
      • bbb
      • cccと表示される

  5. liタグ

    • list item（リスト　アイテム項目）
    • ＜li＞aaa・・・＜/li＞
    • 私はリスト構造をなるべく、使うようにしている。
      ＜li＞ ＜h2＞xyzについて＜/h2＞ ＜/li＞のような書き方も可。

  6. divタグ

    • 意味 division（区画、分割されたもの）動詞のdivideは分割する。
    • 使用例 ＜div id="AAA"＞・・・この部分がAAAという名前がついた区画になる・・・＜/div＞

    • 区画に名前をつけておいて、CSSファイルで、その区画の表示方法を指示するというのが、最近の流行。

      CSSファイルについては、CSSファイルを利用したホームページの作成へ

高校生のためのHP検索上位HIT術２０号　2007/2/24より

＜body＞＜/body＞の中で使われるインライン要素

  1. 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＞の所に飛ぶ。

  2. strongタグ

    • 意味 strong（論理的強調）
    • 使用例 ＜strong＞前略プロフィール＜/strong＞
    • bタグもstrongタグも人間の目には太字となり、区別はつかない。検索エンジンは区別して、strongタグで囲まれた語句は、そのページで重要な語句と判断する。検索でHITしたい語句はstrongタグで囲むべき。

  3. fontタグ

    • 意味 font（文字の書体）
    • 使用例 ＜font size="3" color="blue"＞
    • fontタグで、文字の大きさや色を指示できるが、CSSファイルで、一括して指示した方が良い。fontタグはは「非推奨要素」なので、なるべく使わないように。

ブロックレベル要素とインライン要素の入れ子

  1. ブロックレベル要素とインライン要素(単純なテキスト文章も含む)の入れ子
    • ＜p＞＜strong＞abcxyz＜/strong＞＜/p＞は可。
    • ＜strong＞＜p＞abcxyz＜/p＞＜/strong＞は不可。

    ＜p＞はブロックレベル要素で、＜strong＞はインライン要素。ブロックレベル要素の中にインライン要素を含める事はできるが、その反対はできない。

  2. ほとんどのブロックレベル要素はインライン要素を含む事ができる。
    • ＜h1＞ ＜a href=・・・＞ｘｙｚ＜/a＞ ＜h1＞は可。
    • 一部のブロックレベル要素(li要素)は、さらにブロックレベル要素を含む事ができる。＜li＞ ＜h2＞xyz＜/h2＞ ＜/li＞は可。
  3. ほとんどのインライン要素はインライン要素を含む事ができるが、
    • ＜a href=・・・＞ｘｙ＜strong＞ｚ＜/strong＞abc＜/a＞は可。
    • インライン要素はブロックレベル要素を含む事はできない。＜strong＞＜p＞abcxyz＜/p＞＜/strong＞は不可。

タグの中で使われる属性名

  1. id属性

    • identifiers(識別子)
    • ＜h3 id="bbb"＞、＜p id="bbb"＞、＜div id="bbb"＞など

      aタグと組み合わせる。＜a href="../google/index.htm#bbb"＞のように。

    • CSSファイルの中に .bbb{color:#ff9900;}と書いておくと、id="bbb"を指定した部分の文字が全て、オレンジ色になる。

  2. class属性

    • class（部門）
    • ＜h3 class="page"＞

    • 使い方はidと同じ。ただし、同じidは一つのページで１回まで。３年５組２０番の人は二人いては、いけない。

      同じclassを何度も使うのは可。例：＜h3 class="red"＞＜p class="red"＞＜div class="red"＞ CSSファイルの中に ．red｛color：#ff9900；｝と書いておくと、class="red"を指定した部分の文字の色がff9900になる。

  3. href属性

    • hyper reference（参照）
    • ＜a href="../google/index.htm"＞
    • 飛び先の指定

  4. src属性

    • source（出典）
    • ＜img src="../i/logo1.jpg"＞
    • imgイメージ（写真や図）のアドレス、ファイル名を指定する。

  5. alt属性

    • alternate text（代替テキスト）
    • ＜img src="../i/logo1.jpg" alt="夜叉神峠" ＞
    • 写真や図が表示できない場合、代わりにalt=で指定した文字が表示される。HTML5ではalt属性は必須ではないが、指定しておけばアクセシビリティーが高まる。

高校生のためのHP検索上位HIT術２０号　2007/3/19より

HTMLタグの子要素・親要素の入れ子には注意

HTMLタグの使い方が分かっても、HTMLタグの組み合わせ（入れ子関係）は、難しい。例えば、

  • <p><li></li></p>はダメ。
  • <li><p></p></li>は○

この入れ子関係についてはHTMLタグの子要素・親要素の入れ子規則

最後まで読んでいただいて、ありがとうございました。