具体的なSEO

Home>Information>具体的なSEO

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

以前「SEO（検索エンジン最適化）とは」では、SEOが検索エンジンの検索結果の上位に任意のウェブサイトを表示するテクニックであることを説明しました。
その際、SEOを行うには、正しい文法で記述すること、アクセシビリティを追求すること（利便性）、情報量を多くすること（信頼感）の3つを挙げました。

ここではさらに、具体的にどのようにするのかを解説します。

正しいHTML

DOCTYPEの記述

HTML文書の最初には必ずDOCTYPE宣言をして、そのHTML文書が、どのバージョンの文法によって書かれているかを明示します。大抵のブラウザは、DOCTYPE宣言がなくても認識して表示しますが、正式にはDOCTYPE宣言は必須ですので、必ず記述しましょう。

→DOCTYPE宣言については「HTML：DOCTYPE宣言」をご覧下さい。

使用言語の指定

html要素の開始タグには、必ずlang属性によって使用言語を明示します。
わたしたちは日本語を使っていますので、<html lang="ja">という表記になります。

TITLE要素を記述する

title要素には、そのHTML文書の要約を全角30文字程度で記述します。
title要素に書かれた内容は、重要なキーワードが含まれるとみなされます。また、検索エンジンによっては、検索結果を表示したときの説明文やタイトルに使用されるので、それを読んだ人がひきつけられるような内容にするといいでしょう。

もし、title要素に書いたテキストが30文字を超えるようなら、半角のカンマやスラッシュで区切りを入れて続けるといいようです。

title要素に書いたテキストは、ブラウザのタイトルバーに表示されます。オーサリングソフトを使ってHTML文書をつくったときに、title要素を指定しないと、「無題のドキュメント」などのタイトルが表示されてしまいます。これはみっともないだけでなく、SEOの観点からも勿体無いことをしているので、気をつけましょう。

META要素を記述する

meta要素は、HTML文書の属性値を記述するものです。
meta要素には様々な設定ができますが、以下のものを最低限記述しておきましょう。

  • <meta http-equiv="Content-Type" content="text/html; charset="文字コード">
  • <meta http-equiv="content-style-type" content="text/css">
  • <meta http-equiv="content-script-type" content="text/javascript">
  • <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7">
  • <meta name="keywords" content="KEYWORD,KEYWORD">
  • <meta name="description" content="文書の要約">
  • <meta name="authoer" content="著者名">

→詳しくは「HTML：META要素」をご覧下さい。

LINK要素を記述する

link要素は、そのページに読込むCSSファイルを指定するだけでなく、そのページの関連ページは何であるかを指定することもできます。これを指定することで、どのページと関連性があるのかを検索エンジンに教えることができます。

→詳しくは「HTML：要素リファレンス：link」をご覧下さい。

その他の必要な要素

連絡先の記述

HTML文書の中に、そのHTML文書に関するお問い合わせ先を明示してある場合、address要素で囲いましょう。

→詳しくは「HTML：要素リファレンス：address」をご覧下さい。

略語

文章中に何かの略語を示した場合は、それが略語であることを示すabbr要素や、頭字語を示すacronym要素を使います。

→詳しくは「HTML：要素リファレンス：abbr」「HTML：要素リファレンス：acronym」をご覧下さい。

強調

文章中に強調したい語句がある場合、それを強調していることを示すstrong要素を使います。同じような動作をするB要素には“強調”の定義がないので、b要素ではなく必ずstrong要素にします。

※b要素やbig要素は見た目を修飾するだけで、論理的な意味を持たない要素ですが、強調の意味で使われることが多いため、「強調」を意味していると、検索エンジンに解釈されることもあるようですが、より確実にはstrong要素を使うことです。

→詳しくは「HTML：要素リファレンス：strong」をご覧下さい。

見出しの書き方

h1要素は、大見出しで、ページの中に必ず1つ入れる必要があります。但し、2つ以上入れてはいけません。
さらに見出しを追加したい場合には、h2要素を使います。h2要素以降は幾つ入っても構いませんが、若い見出しから順番に配置します。つまり、h1要素の次にh3要素が来て、それからh2要素が来る、といったやり方は文法的に間違っています。h1要素の次はh2要素、その下にh3要素、再びh2要素が来てh3要素、という並びです。h1要素→h2要素→h3要素→h4要素→h2要素・・・というのはありです。

見出しは重要なキーワードが含まれている、とみなされますので、重要なキーワードを含ませましょう。

また、見出し要素はそのまま使うとかなり文字サイズが大きくなってしまうので、CSSを使って文字の大きさなどを調整する場合があります。このときに、h1要素よりもh2要素の方が大きい、というような順番を逆に捉えられるような見た目にしてはいけません。

なお、見出し要素にテキストを使いたくない場合は、画像を使うこともできます。
<h1><img src="URL" alt="テキスト"></h1>
のように、画像を見出し要素にした場合は、alt属性に適切な見出しテキストを入力します。

タグ、属性の書き方

要素を書くときは、閉じるタグが必要な要素の場合は、必ず閉じるタグを書きます。<p>や<li>など、閉じるタグを書かなくても意図通りに表示するものもありますが、こういったものでも、文法的には必ず閉じるタグは必要です。

要素に属性を書くときは、その値はダブルクォーテーション（”）で囲いましょう。
次の要素との間には半角スペース1つ分を空けます。また、同一の要素の中にくり返して同じ属性を設定しないようにしましょう。

アクセシビリティの追求（利便性）

テキストの読みやすさ

アクセシビリティとは、アクセスのしやすさの意味です。ユーザが快適にウェブサイトを利用できるつくりになっているかを追求することです。

その最たるものがテキストの読みやすさでしょう。
まずテキストの大きさです。基本的にはユーザが自分でテキストの大きさを調節できるようになっていることが推奨されます。ですから、フォントサイズを指定するときは、サイズを固定してしまう絶対指定（pt、mm、in）ではなく、ユーザがブラウザの設定で自由にサイズを変更できる相対指定（px、em、%）を使うようにしましょう。

テキストの色を背景色と近くすることは、スタイリッシュととらえる人もいますが、それは制作者側のエゴで、ユーザにとっては読みづらいサイトになってしまいます。テキストは背景色とは明度・彩度・色相が異なるものにするべきです。
具体的にいうと、背景色が#eeeeeeのときに、テキストの色が#666666だと、読みづらいと判断されることがあります。#333333程度の差をつけてください。

テキストの色を全く背景色と同じにしてしまったり、サイズを1ptにしたり、テキストの位置をブラウザの外に指定するといったことは、ユーザの利便性を度外視した指定なので、してはいけません。

テキストの読みやすさでいうと、大きさのほかに、文字と文字の間の広さ（字間）、行と行の幅（行間）、1行に並べる文字数などにも気を配りましょう。1行の文字数は50文字程度がぎりぎりでしょう。行間は150%くらいをとると読みやすくなります。字間は1行の文字数とのかねあいもありますが、1～2px程度でいいでしょう。

リンクの判別

人が違和感を覚えるのは、いつもと違うときです。普段使っているものと同じであれば、感覚的に使うことができますが、今までと違うインターフェイスにしてしまうと、新しい操作を覚えなければなりません。だから、多くのアプリケーションの操作は似たようなつくりになっているのです。
ウェブサイトにおいても、CSSを使えばリンクの色を変えたり、下線を消したりすることが可能です。しかし、色を変えてしまったら、そのリンク先は初めて訪問するのか、既に見たことがあるページなのかの判断がつかなくなり、下線を消してしまったらそれがリンクなのかわからなくなります。
そのため、リンクに関してはデフォルトを維持するのが最も有効です。
ただし、メニュー項目など、リンクが設定されているのが当たり前であるときは、下線を消してもいいでしょう。大事なのは、そこにリンクがある、とユーザがわかることです。

アンカーテキストには、title要素や見出し要素で使われている言葉（キーワード）が含まれるようにすると、より効果的です。
また、アンカーテキストに「こちら」「ここ」「クリック」などという言葉を使うよりも、キーワードそのものやリンク先を説明した言葉を使う方が効果的です。

画像が表示されない場合の配慮

img要素を使って画像を表示する場合、href属性と共に、必ず画像の幅と高さ、補足情報を示す属性を使います。
<img src="URL" width="100" height="50" alt="テキスト">
のようにします。また、border属性は推奨されないので、style="border:none"などと、CSSで設定しましょう。

情報の蓄積（信頼感）

ウェブサイトの信頼感とは、ユーザが「このサイトにある情報は信用できる」「このサイトにいけばほしい情報が得られる」といった、ウェブサイトが提供するコンテンツに対する期待値のようなものです。
人が信頼するキーワードは、「経験豊富」「老舗」などです。つまり、昔からやっていて情報量の蓄積が多くあるサイトこそが信用できる情報源となるのです。

ですから、信頼感のあるサイトをつくるには、正しい情報を載せることはもちろん、こまめに更新をして情報をためていくことです。
いくら情報量がたくさんあっても、その情報が他人にとって理解できるものでなければ意味がありません。文章を書くときに、読み手にとってわかりやすい文章であるか、手順を説明するものであれば、それを読んでその手順どおりに行動できるか、を客観的に考えて書きましょう。

テーマ

テーマとは、そのサイト内のウェブページに共通して見られる内容のことです。
検索エンジンによりテーマづけされたウェブサイトのページは、それらが一つのグループとして扱われ、検索エンジンが検索精度の高い結果を提供するために使われます。

テーマの判別は、複数ページにおけるのキーワードの共通性からテーマ付けをしたり、あるページからリンクされている複数のページをリンク元のページの配下にあるページとしてテーマ付けすることでなされます。
また、外部のサイトからリンクをされている場合も、テーマを判断する一因になります。

キーワードによるテーマ判別は、そのページ内の重要な要素に書かれているキーワードを中心に分析されます。したがって、title要素や、h1をはじめとする見出し要素、アンカーテキスト、強調要素に出現する言葉が重要になってきます。

クリック度数

クリック度数とは、検索結果によって表示されたサイトへのリンクが、どれだけユーザによってクリックされたかをはかる指標です。
検索エンジンは、たくさんクリックされるサイト＝より人気のあるサイト、とみなします。
検索エンジンの検索結果から、クリックされる率を高めるには、まず検索エンジンの上位に表示させることが第一ですが、そのほかにも、title要素やmeta要素のdescriptionや、HTML文書のできるだけ上の方にそのページの要約文を載せることによって、その文章を検索結果の説明文として表示させることができます。
ユーザは、この説明文を読み、自分が探している情報がその先にあるかどうかを判断します。ユーザをひきつけるかどうかは、そのページに何が書いてあるかを短い文章でまとめられるかどうかにかかっています。
title要素の場合は 全角30文字程度、そのほかの場合でも60文字程度でまとめられるようにしましょう。

関連リンク

よく読まれている記事

UpDate:2009-12-2