LoginSignup
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tis1116(篠田 泰志)

WebサービスのSEO対策 ~初心者編~

Last updated at Posted at 2021-03-06

背景

著者はNext.jsを利用しWebサービスのフロントエンド開発を行っています。そこでrobots.txtを修正しクロール対策を実施することがありました。これを機にSEO対策についての基本を学んだと同時に、Webに関わる方は理解しておくべき内容と感じたので記事としています。

※outputも兼ねて記述しているため、間違いあればご指摘お願いします。

本記事のターゲット

  • Webエンジニア or デザイナーとして開発に携わっているが、SEO対策まで実施したことのない方
  • SEO対策の重要性をわかっているが、対策方法がわからない
  • 検索エンジンの仕組みについてざっくりと理解したい方
  • SEO対策についてざっくりと理解したい方

本記事のゴール

  • 本記事を読んで検索エンジンの仕組みとSEO対策についてなんとなく理解してくれること

本記事の流れ

  • 検索エンジンの仕組み

    • クローリング
    • インデックス
    • ランキング

  • どのようなSEO対策を実施すべきか

    • クロール最適化
    • インデックス最適化
    • コンテンツ最適化

検索エンジンの仕組み

SEO対策を理解するには、まず検索エンジンがどのような仕組みで動いているかを理解する必要があります。概要を下記に示します。

あなたがWebサイトを作って、世間に公開したとします。
そして検索エンジンが検索順位を決めるまでに下記ステップが存在します

  1. クローリング
  2. インデックス
  3. ランキング

それぞれの説明を下記に示します。

クローリング

Web上にはクローラーという検索エンジンのロボットが常に巡回しています。(Web上の警察みたいな感じ)
クローラーはWeb上に公開されている全サイトのページを集めようと頑張っています。
このクローラーがあなたのサイトに回ってきたとき、初めてサイトの存在を知り情報収集を実施します。

この巡回から発見、情報収集までの流れをクローリングといいます。

クローラーの巡回方法ですが、1つ1つのWebページに貼られている内部リンクを辿って他のページに移動しています。

1stリリースの新規サイトなどは外部リンクがないので、Googleサーチコンソールから巡回の依頼をすることでクローラーが回ってくれます。
それ以降は定期的にクローラーが回ってくれます。

インデックス

クローラーがクローリングが終わると、集めてきたページ情報をGoogleのデータベースに登録します。この処理をインデックスといいます。巡回した得た情報を登録するぐらいの理解でいいと思います。

ランキング

検索エンジンはインデックスによってデータベースに登録された全てのWebページを見て、様々な要素を総合的に分析します。
そして分析結果をもとに、それぞれのWebページの検索順位を決めます。これをランキングといいます。

ざっくりと流れのまとめ

  • Web上にはクローラーという情報収集屋さんが定期的に回っている
  • 情報収集が完了するとGoogleのデータベースにWebページの情報を登録する
  • データベース情報をもとにサイトのランキング付けをする
  • ユーザーが検索した入力値に対してランキング上位から表示している

私たちは日頃何気なく検索エンジンを利用していますが、裏ではこのような処理がされています。

よってSEO対策とは**「検索エンジンのランキングで上位になるように調整すること」**です。

では、ランキング上位となり多く閲覧してもらうにはどのような対策を実施していくべきでしょうか?
その対策について次のセクションで説明します。

どのようなSEO対策を実施すべきか

具体的な対策として下記3つです。
それぞれの対策について説明します。

  • クロール最適化
  • インデックス最適化
  • ランキング最適化

クロール最適化

1つめはクロール最適化です。
クローリングの際に各ページを正確に読み取ってもらう、網羅的に認知してもらうようにすることです。

そのためにはクローラーに何度も巡回してもらう必要があります。

具体的な対策は下記です。

外部サイトからリンクを貼ってもらえるようなレベルの高いコンテンツ作り

1つめは質の高いコンテンツ作りです。質の高いコンテンツであれば外部サイトからもリンクを貼り付けてもらえるので、巡回回数が必然と増えていきます。

上位表示させたいページに優先的にクローラーが回るようにコンテンツ調整

2つめは公開したサイトの各ページをクローラーが網羅的に巡回できるよう設計することです。自社サイトの調整であるためこれを内部SEOといいます。

例えば下記のようなページ構成だとします

- ページA(ページBへの遷移ボタンがある)
- ページB(ページCへの遷移ボタンがある)
- ページC(ページAへの遷移ボタンがある)

かなりチープですが一応A,B,Cそれぞれ巡回できるようになっています。
これでも良いのですがクローラーに評価されるには多く巡回してもらい評価してもらうことが大事です。それを意識していると下記のようになります。

- ページA(ページB,Cへの遷移ボタンがある)
- ページB(ページA,Cへの遷移ボタンがある)
- ページC(ページA,Bへの遷移ボタンがある)

こうするだけでクローラーにとっては巡回経路が圧倒的に増え評価してもらう機会が増えます。
この視点はエンジニアやデザイナーでも意識できると思うので取り入れてみてください。

※リンクを貼ってもらうことが重要ですが、訳もわからない外部サイトからのリンクはNGです。検索エンジンはナチュラルリンクか判定を実施し、違和感がある場合はペナルティとなります。

metaタグを利用してページの概要を明確に理解してもらうよう調整

検索エンジンにWebサービスを明確に理解してもらうようheadタグにmetaタグを加えることでページの概要を明確に伝えることができます。
SEO対策と言われて最初に浮かぶのがこの手法ではないでしょうか?

ちなみにNext.jsだと下記のように設定できます。

import React from 'react';
import Head from 'next/head';


function HeadTag() {
  return (
    <Head>
      // 検索時のタイトル
      <title>title</title>
　　　 // 検索時の説明文
      <meta content={description} name="description" />
　　　 // サービスに関連するキーワード
      <meta content={keywords} name="keywords" />
      // 正規化を実施
      <meta content={canonical} name="canonical" />
　　　 // サービスのアイコン配置
      <link rel="icon" type="image/x-icon" sizes="16x16" href="/images/favicon16.ico" />
      <link rel="icon" type="image/x-icon" sizes="32x32" href="/images/favicon32.ico" />
      <link rel="icon" type="image/x-icon" sizes="48x48" href="/images/favicon48.ico" />
      <link rel="icon" type="image/png" sizes="96x96" href="/images/favicon.png" />
    </Head>
  );
}

export default HeadTag;

XMLサイトマップの作成

サイトマップとはサイトにどのようなコンテンツがあるのかを一覧でまとめてみれるページのことです。
その中の1つにXMLサイトマップと言うものがあります。
これを設定すると新しいページの存在を通知できたり、通常のクロール処理で検出できないページを知らせることができます。

著者は触っていないので紹介までとさせていただきます。

インデックス最適化

次はインデックス最適化です。
この最適化方法として検索結果に乗らなくても良い無駄なページはクローラーが巡回しないように設定し、必要なページのみ登録することです。
これをすることによって有益なページだけ巡回するため、評価が上がる可能性があります。

上記の設定方法ですが、ここで私が業務で携わったrobots.txtが登場します。

robots.txtとは

  • 指定したページに対して、検索エンジンがクロールしないように命令できる機能です。
  • robots.txtに設定を記述し、サイトにアップロードすることで実装できる

この実装方法については下記リンク参考にしてください

//sitemapの指定
Sitemap: https://http://example.com/sitemap.xml

// どのクローラーの動きを生後するか示す
// 基本的に「*」でOK
User-agent: *

// Disallowでクローラーが巡回しないディレクトリ or ファイルを指定
Disallow: /page1
Disallow: /page2/*

// Allowでクローラーが巡回可能なディレクトリ or ファイルを指定
Allow: /*

コンテンツ最適化

最後にコンテンツ最適化です。これはコンテンツ(自分のサイト)の有益性を高めましょうと言う話です。
どれだけクロール最適化やインデックス最適化を実施してもコンテンツの質が悪ければ評価されません。

具体的には下記です。

  • HTML構造の最適化
  • 検索エンジンが読み取りやすいようページの整理(文言からページの構成など)

まとめ

以上が検索エンジンの仕組みとSEO対策についてでした。
最後に私が感じたエンジニアとデザイナーがSEO観点で確認すべきことをまとめておきます。

エンジニア

  • HTML構造が適切であるか、タグ配置などはルールに則ったものであるか
  • 最重要なページにクローラが何度も巡回しやすいリンク配置となっているか
  • クローラーにサイトの隅々まで認知してもらえるようなリンク配置となっているか
  • robots.txtによる巡回制限が適切なものになっているか

デザイナー

  • UI作成時に各ページで使用している文言が簡潔でわかりやすいものであるか
  • UI作成時にHTML構造が複雑なデザインになっていないか
  • UI画面作成時に最重要なページにクローラが何度も巡回しやすい設計となっているか
  • UI作成時にクローラーにサイトの隅々まで認知してもらえるようなリンク配置となっているか

今回の記事でなんとなく検索エンジンの仕組みとSEO対策について理解していただけたら、とても嬉しいです！！

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?