Webサービス開発で必要なSEO基本知識

ここではWebサービスを開発をする上で必要になるSEOの基本的な知識を紹介します。

👽 Googleの公式ドキュメントを読む

検索エンジン最適化スターターガイド

Googleの公式ドキュメントによって、WebサービスでSEOのために守るべきルールを正しく把握できます。

😎 作成するコンテンツについて

Googleが重視するコンテンツのポイント

閲覧者に有益な情報を掲載して、ほかのサイトよりも質の高い記事を提供する
独自の調査、引用、リンク、レビュー、証言などを通じて、コンテンツの信頼性を高める
スペルミス、不自然な文体、事実誤認などを防ぐ。広告の量を多くしすぎない
SPサイトの内容が重要になる。SPサイトのランク付けを重視してPCも表示される

モバイルフレンドリーなUI/UXのポイント

フォントサイズは適切(16px以上)か
モバイル用のviewportをmeta要素に指定しているか
リンクの幅が狭すぎないか(誤作動の防止)
コンテンツが画面に収まっているか
サイトのファーストビューを1秒以内に表示する(レスポンスは3秒以内)
スマートフォンでは画像サイズを軽量化する(PCと出し分ける)

「Googleのモバイルユーザビリティレポート」でチェックできますので、ぜひ試してみてください。

WebサイトのURL構造を最適化する

URL構造(ルーティング)は、検索エンジンがクローリングしやすくなるための重要な要素のひとつです。

URLにコンテンツに関連した単語を入れる
1つのページのURLは1つにする(ユニークにする)
URLのディレクトリ構造はできるだけシンプルに
論理的かつ人間が理解できるURLになるようにコンテンツを整理する
できるだけ不必要なパラメータを排除する

ナビゲーションをわかりやすくする

ナビゲーションはユーザーがどのように詳細ページにたどり着くかを常に意識してサイトを構築することが大切です。

パンくずリストでユーザーの利便性を向上させる
URLの一部を取り除いても、URLがきちんと意味を持ち続ける(ページが存在する)ようにする
404ページを適切に配置する(役に立つ404ページを作る)

正しい方法でサイトを宣伝して被リンクを獲得しよう

ソーシャルメディアの特性を理解して、ユーザーが興味をもつコンテンツに絞って紹介するようにしたり、関連するコミュニティへ参加していくことで自然な被リンクの獲得を目指しましょう。

リッチスニペットを表示しよう

schema.orgで公表されている構造でマークアップすることで、Googleの検索結果にリッチスニペットを表示できる可能性があります。

詳細は「最新のSEO事情！schema.orgで構造化マークアップせよ！ - Qiita」がわかりやすいので御覧ください。

😼 HTMLタグの適切な使い方

titleタグ

titleタグはGoogleでの検索結果にメインで表示されます。

ページごとに異なるタイトルを付ける
検索エンジンで表示されるのは32文字前後
ページの内容を推測できるタイトルにする

descriptionタグ

descriptionタグは検索結果のtitleの下部に表示されます。

ページごとに固有で、ページ内容を正確にまとめる
検索エンジンで表示されるのはPCは124文字前後、スマートフォンは80文字以内

見出しタグを適切に伝えよう

h1, h2, h3, h4, h5, h6はHTML内での重要性を表すために使います。目次を作るようにコンテンツの何が主要なのかを考えて、コンテンツのポイントとなる部分に見出しタグを設置するようにしましょう。

画像のalt属性は必ず設定する

「画像のalt属性」は画像が表示されない際にユーザーに代替情報を知らせることと、検索エンジンに画像に関する情報を知らせることの2つの意味があります。alt属性もアンカーテキストなどと同じく、簡潔で説明的なテキストを心がけましょう。

適切なアンカーテキストを設置しよう

アンカーテキストとは「リンクが設定されたテキスト」のことです。アンカーテキストでは次のことに気を付けましょう。

簡潔で説明的なテキストを心がける
リンクだとすぐに分かるようなCSS/テキストスタイルを使う
内部リンクのアンカーテキストも簡潔で意味のあるテキストにする

ページネーションのrel属性を設定しよう

ページネーションを設定した際はrel属性でnextとprevを指定する必要があります。

コメント欄や掲示板にはnofollowを設定しよう

コメント欄や掲示板などユーザーが気軽に書き込める場所は、時としてスパムの標的となります。スパムサイトへのリンクがページ内に存在すると、「Googleがそのサイト自体の評価を下げてしまう可能性があります」。これを防ぐためにユーザーが自由に操作できるリンクにはrel属性の値にno followをセットするようにしましょう。