ここでは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
をセットするようにしましょう。