SEO対策の基本(おまけ:display:none; はブラックハットか?)
APOLLO11でWebデザイナーとして働いている藤井です。 現在SEO対策の勉強中です。 そこでこの記事では「SEO(エスイーオー)対策とはなにか」を知らないひとに対して 僕が勉強する中で覚えた「最低限おさえておきたい知識」に的を絞って紹介していこうと思います。
- ⑴SEO対策とはなにか
- ⑵Google検索の仕組み
- ⑶SEOの本質〜ホワイトハットとブラックハット〜
この3つのセクションを順に読むことでSEO対策の基本的な知識は身につくはずです。
SEO対策とはなにか
「自社のサイトや自分で作ったサイトをより多くのひとに見てほしい。」そう思うのは当然のことだろう。 そもそもWebサイトはユーザーに見られることではじめてその価値やサービスを提供できるので、多くのユーザーに見られることは大切だ。 しかし残念なことに6割以上の人が検索結果の3ページ以降をみていないという。どんなに良い出来だと思ったサイトでも検索結果に表示されなければ存在していないのと変わらない。 上記のようなことを避けるための解決策としてあげられるのがSEO対策や検索エンジン最適化と呼ばれるものだ。SEO対策の解釈として「検索結果でのサイトの掲載順位を上げるための対策」というものがよく用いられるが、SEO対策の本質とは少し異なる。確かに結果的には掲載順位を上げることにつながるのだが、そこに焦点を絞ると誤った手法をとって検索圏外という事態を引き起こしかねない。SEO対策の正しい知識を身につけるためにまずはGoogle検索の仕組みについて見ていこう。
Google検索の仕組み
Google検索の仕組みを知っておくことで今後のSEO対策への理解がぐっと深まることはずだ。Web製作に関わっていながらSEO対策の勉強をするまで僕も知らなかったのだが、これを知ることでサイト製作のときに新しい視点が加わったと思う。Web製作に関わるならぜひ一読してほしい。 実は僕らが検索し、閲覧しているWebサイトは「Googleがみつけることができたサイト」だけだ。Googleではクローラと呼ばれるプログラムが常に検索エンジンを巡回していて、クローラはページ内のリンクを辿りながらサイトの情報を取得していく。こうしてクローラがサイトの存在を認識することをインデックスと呼び、インデックスされたサイト、つまり「Googleがみつけることができたサイト」をユーザーである僕らが検索し、閲覧しているのだ。 既述した通り、クローラはユーザーと同じようにページ内のリンクを辿ってサイトの情報を取得している。ユーザーにとって使いやすいサイトをを作ることは検索エンジンに対してサイトをわかりやすく説明することにつながり、インデックスされやすくなる。 ちなみにWebサイトをインデックスするための特別な手続きはなく、サーバーにあげることで巡回しているクローラが勝手に発見しインデックスしてくれる。自分のサイトがインデックスされているかどうかは、アドレスバーに『site:自分のサイトのURL』を入力することで確認できる。 もし自分のサイトがインデックスされていない場合はいくつかの原因が考えられるが、内容が少し専門的なものになってしまうのでここでは割愛させてもらう。
実際の順位の決まり方
では検索結果の掲載順位はどのようにして決まっているのだろうか。 例をもとに説明していこう。 Googleで「スカイツリー 高さ」と検索したとしよう。するとGoogleは検索クエリからインデックスされているサイトに対して検索をかける。もちろん概略的な検索クエリであれば数多くのサイトがヒットするだろうが、ここでヒットしたサイトに対してGoogleの検索エンジンが200以上の問いを立てる。
- 検索クエリとサイトのコンテンツ内容がどれだけ一致しているか。
- 質のよい被リンクがどれだけあるか・・・etc
被リンク
自分のサイトのURLが他のサイトに記載されている状態 質の良さは掲載サイトの評価に比例し、ナチュラルリンクともいう。
検索クエリ
ユーザーが検索バーに入力した単語または複数語を指す。 これらの質問の数々はランキングアルゴリズムといってGoogleが独自に開発した「サイトの掲載順位を決める評価方法」である。上のアルゴリズムはあくまでイメージであり算出方法の詳細は公表されていない。 つまり「スカイツリー 高さ」という検索クエリでヒットしたサイトに対してランキングアルゴリズムを適用し、総合得点の高いサイトから順に検索結果に表示しているというわけだ。
SEOの本質〜ホワイトハットとブラックハット〜
Google検索の仕組み、掲載順位が決まる流れを理解したところでSEO対策の本質という話に戻ろうと思う。 本来そのWebサイトの利便性がユーザーにとって完璧であればSEO対策はいらない。掲載順位を決めているランキングアルゴリズムはユーザーの利便性を元にうまれたものだからだ。 Googleの理念の1つにこんなものがある。 「ユーザーに焦点を絞れば、他のものはみな後からついてくる。」 これは様々な場面に当てはまり、もちろんSEO対策にもあてはまる。実践的な内容に関してここでは触れていないためイメージしづらいだろうが、数あるSEO対策のどれもが結果的に「ユーザーの利便性」「ユーザーの満足度」へ行き着く。つまりユーザーのことを1番に考えるサイト作りをしていれば掲載順位という結果は後でついてくるということだ。掲載順位はあくまで結果という位置付けにしておかなければならない。では誤った手法とは何か。 実はSEO対策にはホワイトハットとブラックハットと呼ばれるものがある。 ホワイトハットとはWebマスター向けガイドラインに準拠し、ユーザーの利便性を考えて用いられる手法のことで
- ナビゲーションバーの作成
- コンテンツ内容をわかりやすく表したタイトルをつける
などがこれにあたる。 ブラックハットとは掲載順位を引き上げるためだけに用いられる手法であり、そこにユーザーの利便性が含まれていることはない。 ランキングアルゴリズムの穴を探したり、その性質を逆手に取ることで成立していて
- 検索でヒットしやすくするための隠しテキスト(白の背景に白の文字)
- 被リンクを得るためのコメントスパム
などがこれにあたる。 誤った手法とはもちろんブラックハットのことだが、なぜこれが誤った手法かといえば、Googleがランキングアルゴリズムでサイトを評価する際、ユーザーにとって利便性があるかだけでなく、「そのサイトがユーザーに不快感をもたらす質の悪いサイトでないか」も見ているからだ。 もし質の悪いサイトだと判断された場合にはペナルティで掲載順位を大幅に下げられたり、最悪のケースだと検索結果に表示されなくなってしまう。 Googleのランキングアルゴリズムは日々アップデートされておりブラックな手法に対する取り締まりは強化されている。ホワイトな手法とブラックな手法のどちらをとればいいかは明白だ。 残念なことにSEO対策を行っている会社でもブラックな手法を取っているところはある。いくら良いサイトを作ってもそういった会社に対策を依頼したことで、ランキングアルゴリズムのアップデートとともに検索圏外なんてことざらで、すごくもったいない。SEO対策を他者に依頼するならその会社がホワイトな手法とっているか見極めることが大切だ。
藤井まとめ
ここまで読んで 「SEO対策」=「ユーザーにとって質の高いサイトを作ること」 という解釈ができていればOKだと思う。ランキングアルゴリズムはGoogleがつくっているものだし、そのGoogleがユーザーの利便性を第一に考えているのだから。
吉丸まとめ(2015/12/16)
概念上の基本的なことは、上述の内容で合っています。 ホワイトハットとブラックハットの話題が出たので、テクニカルな点について少し言及します。 ブラックハットSEOというと、自作自演リンクのことをイメージされる方も多いと思いますが、
- 隠しテキスト
- 隠しコンテンツ
この「隠し○○」もよく言及され、以下の様なコードやcssを使って実行されます。
- 背景白に白テキストでワードサラダ(キーワードを多数盛り込んだ)文書を羅列
- テキストを postion→absolute→left:-9999px; などで飛ばす
- display: none;
ただ、このdisplay: none; は「ちょっと待ってくれ!使ってるよ!」の人も多いかと思います。レスポンシブデザインにおいては、ブラウザ幅に合わせてコンテンツを表示・非表示にするケースが多いですが、その時にdisplay: none;で制御するケースが数多くあると存じます。 ではこのdisplay: none; はブラックハットであり、使ってはいけないのか? というとそうでもありません。 以下の動画を参照ください。GoogleのMatt Cutts氏が、wikipediaのスマホ版を例に、display: none; について言及しています。
つまり、PCとスマホの切り替えで利用される、display:none;は問題がなく、ユーザービリティの為の表示・非表示(Ajaxなど)も問題がないということです。 「ユーザービリティの為のdisplay: none; ならいい」とは言うけど、「具体的にどうすればいいのか?」ですが、これはロボットに、「このdisplay:none;はユーザービリティの為だよ!」と伝わるコードの書き方をすれば良いのです。例えば以下の様な書き方です。
1 |
<div class="visiblePC">sample</div> |
1 2 3 4 |
/*768px以上の時*/ .visiblePc{display:block;} /*767px以下の時*/ .visiblePc{display:none;} |
同じクラスが状況によって表示・非表示であることがよくわかります。
1 |
<div class="hiddenPC visibleSp">sample</div> |
1 2 3 4 |
/*768px以上の時*/ .hiddenPc{display:none;} /*767px以下の時*/ .visibleSp{display:block;} |
これはダメな例です。やってることは同じなのですが、.hiddenPcは、display:none;という命令のみ持っているとロボットに勘違いされかねません。idやclassにdisplay:none;を使う時は、必ずCSSのメディアクエリーや、jqueryなどで、ユーザーの状況に応じてそれらのコンテンツが表示されることを示すことが重要です。 SEOで大事なことは、ユーザビリティが高く、なおかつ検索ロボットにも「ユーザービリティが高い」と認識してもうことが出来るコンテンツやサイトを作ることです。