ＳＴＥＰ２ －検索されやすいページ作り－
この章では、サイトおよびwebページを“検索されやすい環境”に整備するために必要なwebページ作成の基礎を説明します。
今後の説明はHTMLの基礎知識やタグで記述する方法に触れていきます。
「タグでの編集なんてしたことありましぇーん！(T_T)」とお嘆きのあなた、心配しないでください(^^)
紹介するタグはなるべくコピー＆ペーストで組み込めるように工夫してあります。
また、今までワープロ感覚で操作できる、ホームページビルダー等のHTMLタグに自動変換するHTMLエディターソフトでページを作成されていた方は、これを機会にHTMLタグで編集する方法を覚えることを推奨します。
HTMLタグの機能を知ることでwebページ作りの幅が広がり、機能や表示方法などを工夫した、今まで以上に楽しいwebページを作ることが出来ることでしょう。
なお、《予備講習》《ＳＴＥＰ１》の内容を理解された上で実行されることをお勧めします。
HTMLタグを効果的に使う①<head>編
そもそもHTMLとは何でしょうか？
◎ HTMLとは
- HyperText Markup Language（ハイパーテキストマークアップ言語）の略
- テキスト（文書・情報）からテキストへ移動できる“HyperText”と呼ばれる仕組みが原点
- webページを作る際に必要なプログラム言語の一種
実はロボット型検索エンジンは「このページのどこが重要（ポイント）か？」「どちらのサイトが優良な情報を掲載しているか？」等をHTMLタグの使われ方を参考にして判定しています。
ようするにロボット型検索エンジンに対してはHTMLタグを正しく使わないと正しい評価が受けられない場合があるのです。
HTMLで見るwebページの基本構造
ここでは細かい説明はいたしませんが、参考までにご覧ください。
◎基本的なソース例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ページタイトル：サイト名</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<h1>ページタイトル</h1>
<p>文書による説明</p>
<h2>部のタイトル</h2>
<p>文書による説明</p>
<img src="画像ファイル名">
<br>
<a href="トップページファイル名">TOPページに戻る</a>
</body>
</html>
|
◆タグの意味◆
<!--文書型宣言：HTMLバージョンの指定-->
<!--HTMLタグ始まりの合図-->
<!--ファイル情報始まりの合図-->
<!--ファイル（webページ）のタイトル-->
<!--文字コードの指定-->
<!--スタイルシート言語の指定-->
<!--ファイル情報終わりの合図-->
<!--実際に表示する情報始まりの合図-->
<!--見出し：情報の題名-->
<!--文書の段落-->
<!--見出し：部のタイトル-->
<!--文書の段落-->
<!--情報に関連する画像を表示-->
<!--改行-->
<!--テキストリンク：移動先を指定-->
<!--実際に表示する情報終わりの合図-->
<!--HTMLタグ終わりの合図-->
|
検索エンジンに好まれる<head>～</head>の記述
webページを構成する最初の部分<head>～</head>の間には、先ほどの「HTMLで見るwebページの基本構造」に記したソース例を参照していただければわかると思いますが、ブラウザがそのHTMLファイルを表示するために必要な条件等を提示する場所として使われます。
もちろん検索エンジンもこの部分を最初に読んでいきます。
この部分で、重要と思われるロボット検索エンジン向けのタグは次の３つです。
- 検索エンジンの注目度が高く、人の目にも見える： <title>●●</title>
《タグの使い方》 <title>ページタイトル：サイト名</title> ※最も重要なキーワードを前方にした方が良い。
【使用例】サイト名「レシピ辞典」、ページタイトル「とんこつラーメンの作り方」 <title>とんこつラーメンの作り方：レシピ辞典</title>
《タグの説明》ブラウザの左上タイトルバーに表示され、検索結果のタイトルとしても表示される最もインパクトを必要とする部分。
ロボット検索エンジンもこの部分に最も重要なキーワードが含まれていると判断するケースが多い。
ポイントはページ本文と深く関連した言葉である事、ページ毎に設定する事、長文にしない事、記号を使わないこと。
- webページの宣伝文： <meta name="description" content="●●●">
《タグの使い方》<meta name="description" content="ページの概略"> ※全角２０～４０文字を目安にページ紹介文を記述
【使用例】 <meta name="description" content="とんこつで有名なラーメン店の味が、誰でも簡単に早く・安く作れるお勧めレシピ">
《タグの説明》検索結果の表示で使用されることがある。そういう意味では宣伝を担うのでセンスある文章がクリック率を左右する。
もともとロボット検索エンジン向けにwebページの概要を伝えるために用意されたタグだが、重要視されていない。
- タイトルや宣伝文の補助： <meta name="keywords" content="●●,●●,●●">
《タグの使い方》<meta name="keywords" content="第１語句,第２語句,第３語句"> ※(,)カンマ区切りで３～５単語程度を記述
【使用例】 <meta name="keywords" content="料理,グルメ,麺類">
《タグの説明》このタグもロボット検索エンジン向けに関連の深いキーワードを伝えるために用意されたが、重要視されていない。
そのため補助的な要素として使うと良い。
|
◎ＳＥＯに効果があるタグの使用例
|
- ●の部分は自分のwebページに適した内容に書換えてください
- 必要なタグの行だけをコピーしてお持ち帰りください
- コピーした部分をご自分のwebページソースにペースト（貼り付け）してください
|
|