HTMLとCSSで作るウェブサイト作成入門
検索エンジン対策 SEO
動画解説を見る
どんなに最新技術を駆使して、どれほど美しいウェブデザインを実装できたとしても、利用者にアクセスしてもらって利用してもらわなければウェブサイトの意味はありません。ところで現在、インターネット利用者の多くは、検索エンジンから検索してページにアクセスすることが知られています。だとすれば、多くの利用者にアクセスしてもらうためには、「検索エンジンにいかにヒットしやすくするか」を考える必要が出てきます。検索エンジンに適切なキーワードで登録され、そのキーワードで検索されたときにヒットして、できるだけ上位に表示されるようにするための対策が「検索エンジン対策」いわゆるSEO(search engine optimization)です。ここでは、SEOの方法を簡単に説明します。
●タイトルタグの最適化
検索エンジンの情報は、インターネット上を巡回し、Webページの情報を自動的に収集する検索ロボットによって集められます。つまり、検索ロボットに、そのWebページが「どのような内容のWebページか」を表すキーワードをうまく渡してあげる必要があります。また、検索結果のリストに表示されるのはタイトルタグの内容です。せっかく検索結果に表示されたも、ユーザーがクリックしてくれないと当然Webページは見てもらえません。その意味でタイトルタグ<title>の内容は、SEOにおいて最も重要なものとなります。よって、タイトルタグには「一般の人が検索するであろうキーワードを含め、見た人がクリックしたくなるようなWebページのタイトル」を記入する必要があります。よくあるダメな例を示します。
<title>○○(名前)のページ</title>
このようなタイトルは、Webサイトの内容も表していない上に「関心を持った人が検索するであろうキーワード」を含んでいません。名前を直接検索してくれるのは家族か友人ぐらいしかいません。名前を看板に活動している人なら良いかもしれませんが、それでも内容も分からないのは不親切です。「○○(名前)のページ」というタイトルからは、その人の日記サイトであることも想像されますが、そのようなサイトであれば、例えば「営業○○の365日 - 覚王山で猫と暮らす旅好き保険屋の日記」のように、「営業、覚王山、猫、旅、保険、日記」など、検索されそうなキーワードを入れるべきでしょう。またこれであれば検索結果を見ただけで内容がわかります。
またキーワードの入れ方にも工夫が必要です。それは、「ビッグワードとスモールワードを組み合わせる」ということです。ビッグワードは、一般的で大きなカテゴリを指し示す単語。スモールワードは、人や企業、商品、場所などを特定できるような単語を意味します。相対的ではありますが、この例なら「営業、猫、旅、保険屋、日記」がビッグワード寄り、「覚王山、○○(名前)」がスモールワード寄りです。通常、ビッグワードは検索されやすいものの競合サイトも多く検索上位に表示されにくい一方、スモールワードは検索されにくいですが競合が少ないためヒットすると上位表示されやすいという特徴があります。そのため、特にビジネス目的でWebサイトを作る際にはうまく組み合わせる必要があります。
例えば、ラーメン店のWebサイトなら「ラーメン、ランチ、豚骨」などがビッグワードにあたります。いずれも検索されやすい一般的な単語ですが、これらに関係する競合サイトは多数あるため、検索結果の上位に表示させることは難しくなります。そこで、スモールワードとして店名などを含めて「しゃちほこラーメン、極細麺、黒豚骨、名城公園」といった単語を組み合わせます(店名や商品名は架空のものですので同名もしくは似た名前のお店や商品が実在しても無関係です)。この場合、具体的には次のようなタイトルが考えられます。
<title>しゃちほこラーメン - 名城公園ランチに便利。濃厚黒豚骨スープに極細麺の店。</title>
つまり、ビッグワードで検索されやすく、スモールワードで特定されやすくしている、ということです。他にも、20〜30文字程度にしたほうが良いとか、検索されやすいキーワードをできるだけ前に持ってきたほうが良い、といったことも方法としてあるらしいのですが、検索エンジンのアルゴリズムは公開されていないため、はっきりしたことはわかっていません。
また、Webサイトを複数のページで構成している場合、各々のページに、「それぞれのページにあったタイトル」をつけることも必要です。上記しゃちほこラーメンであれば、「メニュー」とか「アクセスと営業時間」「スタッフ」「こだわり」などです。ページ毎に内容が違うわけですから、同じタイトルをつけていてはいけません。サイト構築の際には、より適切なタイトルを工夫してみて下さい。
●メタタグの最適化
タイトルタグと同様に重要なものとして、メタタグ<meta>があります。通常、HTMLのヘッダータグ<head></head>の間に記載(下図)し、ページの設定情報などを指定します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>しゃちほこラーメン - 名城公園ランチに便利。濃厚黒豚骨スープに極細麺の店。</title>
</head>
<body>
： |
・文字コード指定のメタタグ
検索ロボットは、インターネット上を巡回してウェブサイトの情報を収集していますが、運良く自分のサイトに巡ってきた際に、Webページがどの文字コードで記載されているかを指定していないと、せっかく設定したキーワードを正しく理解してもらえない、という問題が起こります。Shift_JISで作られたページは、次のように記載します。
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
・キーワード指定のメタタグkeywords
また、このWebページが何について書かれているかを示すキーワードを指定することもできます。例えば「しゃちほこラーメン」のページの場合、次のようなキーワードが考えられます。ただ、キーワードは多すぎると、「不正サイト」とみなされることがあるらしく、10個前後までにすることが良いでしょう。
<meta name="keywords" content="ラーメン,ランチ,名城公園,しゃちほこ,鯱,豚骨,細麺,黒豚骨,極細麺">
・概要指定のメタタグdescription
このメタタグは、Webページが何について書かれているか概要を記述するものです。書かれた内容は、検索結果の説明にもなるため、検索されるキーワードを含みつつ、閲覧者がクリックしたくなるような文言にする必要があります。はっきりしたルールがあるわけではありませんが、80文字程度にすると良いという話もあります。例えば「しゃちほこラーメン」のWebサイトの場合、次のように記載することがありえます。
<meta name="description" content="名城公園駅徒歩1分。黒豚からとった濃厚な豚骨スープに極細麺が合う。ランチタイムは半ライス無料！">
・消したほうが良いメタタグ
HTML作成ソフトを使用すると、次のようなメタタグが自動生成されます。SEO対策としてはむしろ逆効果という意見もありますので、もしある場合は、消すようにしましょう。
<meta name="GENERATOAR" content="Microsoft Front Page 2000">
・以前は必要だったメタタグ
また、検索ロボットに「検索エンジンのインデックスに登録して下さい」という意味の次のメタタグも、昔は意味があったようですが、最近ではあまり意味がないため、必ずしも書く必要はなさそうです。一応、紹介しておきます。
<meta name="ROBOTS" content="INDEX,FOLLOW">
・検索させたくないメタタグ
ただ、この検索ロボット向けのメッセージを使うと、検索ロボットに「自動登録されたくない」「検索エンジンで検索されたくない」という場合のメタタグを作ることもできます。SEOとは逆の対策になりますが、下記のメタタグを使うと検索ロボットに自動登録されないようです。
<META NAME="ROBOTS" CONTENT="NONE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
●h1タグの最適化
hタグ<h〜>は、見出し（文章構造）を設定するためのタグです。このhタグ<h〜>は、文章の「見出し」を設定するタグで、特に、<h1>タグは、文章の「大見出し」を指定し、「それ以降に何が書かれているか」を示すものです。そのため検索ロボットは、この大見出しの<h1>タグに書かれた内容を、検索の対象文字列として収集するようです。そこで、SEO対策としては、この<h1>タグに、検索キーワードを埋め込むことを考えます。例えば「しゃちほこラーメン」のWebサイトの場合、次のように店名や商品名、キーワードなどを<h1>タグで表示することが考えられるでしょう。
<h1>しゃちほこラーメン</h1>
<h1>黒豚骨</h1>
<h1>名城公園駅すぐ</h1>
●画像タグimgの最適化
検索ロボットは、画像自体にインデックスを張っているわけではありません(そのような技術もあるようですが)。基本的には、画像ファイルの説明書きや、その周囲の文字情報をインデックス化して検索できるようにしています。したがって、検索されやすくするためには、画像ファイルにもテキストで説明書きを追加しておく必要があります。<table〜>タグのbackground属性には指定できませんが、<img〜>タグであれば、以下のように、alt属性として説明書きを付けることができます。なお、alt属性に指定したテキストは、通常、ブラウザ上は表示されません。
<img src="gaikan.jpg" alt="しゃちほこラーメン店舗の概観">
<img src="map.jpg" alt="しゃちほこラーメンのアクセスマップ">
<img src="gokuhosomen.jpg" alt="極細麺">
ここで紹介したものは、SEOの中でも内部対策と呼ばれるものの一部です。内部対策には、他にも、HTML内で重要なワードを繰り返し登場させることや、内部リンクを充実させること、外部のCSSファイルにデザイン要素を分けることでHTMLファイルを簡素化すること、ページの情報量を増やすこと、広告などを入れ過ぎないことなどがあります。
またWebページが完成してネット上に公開した後に行う外部対策もあります。これは、基本的には別のサイトからのリンク、いわゆる被リンクを増やすことです。Yahooなど大手ディレクトリサービスやランキングサイトに登録したり、友人のウェブページやブログ、SNSなどからリンクを貼ってもらうことなどがあります。
ここで紹介した基本的な方法を踏まえつつ、必要に応じてSEO対策を講じて下さい。
|