アクセスアップ講座≪ＳＴＥＰ２≫
＜＜アクセスアップ講座TOP ＜前の講義へ戻る 次の講義へ移動＞
ＳＴＥＰ２
－　検索されやすいページ作り　－

HTMLタグを効果的に使う②<body>編

<body>～</body>はwebページ本文を記述する本質的な部分です。
最近のホームページは技術の発達とともに、手の込んだ動きのある“お洒落なサイト”“かっこいいサイト”が増えておりますが、これらのサイトの見た目だけを参考にwebページを作ろうとするとビジュアル的な表現を優先してしまい、HTMLが作られた本来の目的である文字や文章への配慮が疎かにならないように心がけましょう。
何故ならば、ロボット型検索エンジンは文章の構成と使用されている言葉を重要視しているからです。

人と違って、検索エンジンはサイトで公開されている写真やイラストを見て「これは素敵な写真だ！」「これは価値がある絵だ。」なんて、評価することは出来ません。
人にとっては文字の情報より画像（イラスト・写真・動画など）の方が興味を持って見たり、理解がしやすいのですが、ロボット型検索エンジンのクローラーは文字しか読まないのです。
※先程の<head>～</head>の記述は<title>部分を除いて人目に触れることはありませんが、<body>～</body>は人に見てもらう部分のため、細心の注意が必要です。タグを変えただけで、見た目であるデザイン（文字の大きさや色、レイアウトなど）に影響を与えます。
デザインや文章表現などに注意を払いながら、ロボット型検索エンジンの対策を盛り込むのは多少面倒な作業となりますが、計画的に根気よく取組みましょう！！

文書構造その①：見出しタグ<h1><h2><h3><h4><h5><h6>を使おう！

みなさんは新聞や雑誌を読むときに、目立つ見出しもしくは興味がある言葉を含んだ見出しの記事を優先して読みませんか？
同様に、ロボット型検索エンジンも見出しに含まれるキーワードを重要視しています。
◎見出しを示すHTMLタグ
  • <h1>●●</h1>　　《用途》文章の“題”を表す行を指定する
  • <h2>●●</h2>　　《用途》文章の“部”を表す行を指定する
  • <h3>●●</h3>　　《用途》文章の“章”を表す行を指定する
  • <h4>●●</h4>　　《用途》文章の“節”を表す行を指定する
  • <h5>●●</h5>　　《用途》文章の“項”を表す行を指定する
  • <h6>●●</h6>　　《用途》文章の“小見出し”を表す行を指定する
※注意１：同一ページ内の文章全てに<h1>等を適用、乱用するのはやめましょう！
※注意２：使用する順番が上から<h4><h1>等とならないようにしましょう！
《補足》
このタグは文字サイズを指定する際に使う等、用途を間違えて使われるケースが多いです。
確かに普通に使うと<h6>より順に文字サイズが大きくなります。また、<h1><h2>は文字サイズが大きいからと使用を避ける方もいます。
もし文字サイズが気になる方は、スタイルシートを利用して　h1{font-size : ○○px;}　等と文字サイズを調整することをお勧めします。
◎HTMLファイル内部スタイルシートで
　<h1>タグのフォントサイズ指定した場合の例
    　
  • ○●の部分は自分のwebページに適した内容に書換えてください 　
  • 【参考】フォントタイプや文字の色を指定したい場合は、{}の間に次の行を追加してください
    　《フォントタイプの指定》　font-family : フォント系統やフォント名;
    　　例　font-family : serif;
    　　　　font-family : 'ＭＳ　Ｐゴシック';
    　　　　font-family : "MS Georgia";
    　《文字の色の指定》　color : カラーネームまたはコード;
    　　例　color : red;
    　 　　　color : #ff0000;
  • 必要なタグの行だけをコピーしてお持ち帰りください
  • コピーした部分をご自分のwebページソースにペーストしてください
▲ページTOP

文書構造その②：ポイントの箇条書きにはリストタグ<ul><ol>を使おう！

みなさんは文章にしづらい事や、重要なポイント等を箇条書きにして表現することがありますよね。
HTMLでは箇条書き項目（リスト）をマークする<ul><ol>タグというものを用意しています。
ロボット型検索エンジンは、この“箇条書き項目（リスト）”に書かれているキーワードも重要視します。
◎箇条書きを示すHTMLタグ
  • <ul>●●</ul>　　《用途》項目の順序を重要としない非序列リスト（箇条書き項目）
  • <ol>●●</ol>　　《用途》項目の順序を重要としない序列リスト（箇条書き項目）
※注意：箇条項目には<li>というタグをつけます。
◆非序列リストタグの記述例
◆非序列リストの表示例
    　
  • ●●●●● 　
  • ●●●●● 　
  • ●●●●●
◆序列リストタグの記述例
◆序列リストの表示例
    　
  1. ●●●●● 　
  2. ●●●●● 　
  3. ●●●●●
▲ページTOP

文書構造その③：文章のポイントにはこれを使おう！　強調タグ<em><strong>

ロボット型検索エンジンは強調されている文章に含まれているキーワードを重要視しています。
◎強調を示すHTMLタグと表示例
  • <em>●●</em>　　　　　　　《用途》文章中にて他の文章より“強調”したい箇所を指定する
  • <strong>●●</strong>　　《用途》文章中にて“より強調”したい箇所を指定する
※注意：同一ページ内の文章全てに<em><strong>を適用、乱用するのはやめましょう！
《補足》
HTMLには文字を太くする<b>タグがあります。
このように見た目の文字を太くするするので<strong>と同じ種類のタグと思っている方が多いようです。
<b>は「フォント（書体）」･･･あくまでも“見た目”を指定するタグ、<strong>は指定した「テキスト（文章）」に“論理的な意味”を持たせるタグです。
同様に<i>と<em>も表示上は同じに見えますが、本質的な意味合いは別物です。
▲ページTOP

画像・イラストを文字情報に“変身”させる技

何度もしつこいようですが、ロボット型検索エンジンのクローラーは文字しか読めません。
あくまでもHTMLソースの“文字”を情報として収集する訳です。

例えば、みなさんは「」が“イチゴのイラスト”とわかりますよね。この時点でクローラーは画像ファイルの存在とファイル名しか読めていません。
ではどうしたらクローラーに「」を“イチゴのイラスト”とわかってもらえるのでしょう？

「イラストを編集して絵の上に“イチゴ”って書けばいいじゃん！」・・・残念っ！！読んでくれません^^;

みなさん、これは文字と画像のどちらだと思いますか？・・・正解は「画像」です。
人は“更新”という文字を認識しましたが、検索エンジンではこれを“更新”とは認識しません。

そこで、検索エンジンがこの情報を認識できるように、画像に文字情報を埋め込んでみましょう。

「かわいいイチゴ」「更新」これで完了です。
「何も変わってないじゃん！」と思われた方、それぞれの画像の上にマウスのポインタを乗せて下さい。
先程と違ってコメントが見えている筈です。検索エンジンはこのコメントを読んでくれるのです。
◎画像にコメントを付けて表示するタグの使用例
    　
  • 自分のwebページに合わせて、■の部分は画像ファイル名、●の部分は画像のコメントに書換えてください
  • コピーした部分をご自分のwebページソースにペーストしてください
▲ページTOP

ロボット型検索エンジンはリンクコードがお好き：<a href="●●">～</a>でクローラーを正しく導く

リンクとは“情報と情報を結びつける”“連結”の意味です。
私たちがページから別のページへ、または別のサイトへとインターネットの世界を移動する手段となっています。
また、ロボット型検索エンジンのクローラーもこのリンクを辿って移動しながら情報を収集しています。

クローラーがリンクコードを渡って移動する際、リンクコードの文字情報とリンク先のwebページに掲載されている内容で移動先webページの重要性を判定します。
  • 文字にリンクコードを埋め込んだテキストリンク：　<a href="■■">●●</a>
    《タグの使い方》　<a href="移動先URL">移動先の名称</a>　
    【表示例】Yahoo!JAPAN　【記述例】 <a href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a>
    《タグの説明》テキスト（文字）で移動先webページ名またはサイト名を表記し、リンクの精度を高める。
    　　　　　　　　【良い例】ディレクトリ検索ならYahoo!JAPAN　・・・リンクが移動先サイト名「Yahoo!JAPAN」になっている
    　　　　　　　　【悪い例】Yahoo!JAPANに行くならこちら！　・・・リンクが「こちら！」の部分に設定されている

  • バナー（またはアイコン）を使ったバナーリンク：　<a href="■■"><img src="■■■"></a>
    《タグの使い方》　<a href="移動先URL"><img src="バナーファイル名" alt="移動先の名称"></a>　
    【表示例】Yahoo! JAPAN
    【記述例】<a href="http://www.yahoo.co.jp/"><img src="http://img.yahoo.co.jp/images/yahoojp_sm.gif" alt="Yahoo! JAPAN"></a>
    《タグの説明》バナーリンクにalt属性を使って移動先の名称を加えることでテキストリンクと同等の効果を得られる。

◎ＳＥＯに効果があるリンクコードの使用例
※リンク先ページを別窓で開かせたい時は target="_blank" を追加する。
　　例　　<a href="■■■■" target="_blank">●●●●</a>
    　
  • ■●の部分は自分のwebページに適した内容に書換えてください
  • 必要なタグの行だけをコピーしてお持ち帰りください
  • コピーした部分をご自分のwebページソースにペーストしてください
▲ページTOP
＜＜アクセスアップ講座TOP ＜前の講義へ戻る 次の講義へ移動＞