個人開発したWebアプリに基本的なSEOを実践したので全部書く

Last updated at 2022-05-22Posted at 2022-04-24

集客としてのSEOの重要性

個人開発者の多くが悩む、集客。
せっかく作ったのに誰も使ってくれない、というやつです。

集客の手段は様々ありますが、よくあるのが主に以下の５つです。

広告
SNS運用
口コミ
SNSにおけるバズ
検索流入(Google, AppStoreなど)

この中でもお金がかからず、時間的コストもかけず、運に頼らないもので、
長期的に安定して集客ができるのは「検索流入」です。
SEOはその検索流入を最大化させようという取り組みになります。

対象読者

ツール系のWebアプリの検索流入を増やしたい個人開発者を対象としています。
SEOで検索をするとブログやメディアを対象とした解説記事が多く見つけることができますが、ツール系のWebアプリを対象としている記事は少ないという印象です。

また、内容としては「キーワード選定」と「タイトル、h1タグの設定」という超基本的(でも一番大事だと思う)な部分のみを扱っています。
そのほかやるべきことや細かいテクニックは最後に参考サイトを付記して補足しています。

超具体的に実践したこと

さて、本題に入っていきましょう。
今回は私が個人開発で作っている英語学習アプリで実践したSEO対策の工程を具体的に公開します。

今回のSEOの目的は「狙ったユーザの検索流入を増やす」ことで、以下の3つを実施しています。

① ターゲットの明確化
② キーワードの検討
③ キーワードをWebアプリに実装

ターゲットの明確化

自分のWebアプリはどんな人のどんな課題を解決させるか？を明確にしました。
頭に浮かぶユーザ像をまず思いつく限りに列挙してみました。

英作文の練習をしたい人
外資系の英語面接を受ける人
英検などのスピーキングテストの対策をしたい人
オンライン英会話などのフリートークに困っている人
会社や英語面接で自分の意見を英語で言わないといけない機会がある
いざ英語で自分の言いたいことを言おうとすると、5歳児のような稚拙なことしか言えない
英語にしやすいからという観点のみで、心にもない主張をしている瞬間がある
自分の言いたいことを英語にできるようになりたい
自分の英語を採点してくれる先生がいない
日常会話ができるようになりたい
自分がよく使う例文集を作りたい
英語脳を作りたい
表現のバリエーションを増やしたい
ライティング・スピーキングの練習をしたい
英語の添削をしてもらいたい
AIで勉強したい
DeepLで勉強したい

全てに対応することは大変なのでこの中で優先度をつけるため、どのターゲットに最もリーチしたいのかベスト５に絞りました(太字のもの)

ターゲットの更なる具体化

絞ったベスト5をさらに具体化します。
上記のようなペルソナでは粗すぎます。なぜペルソナが粗いと困るのか説明します。

まず「英作文の練習をしたい人」はGoogle検索を前にして「英作文」と検索欄に入力すると考えられます。
すると、以下のようなサジェストがされます。

英作文参考書
英作文中学
英作文問題集
英作文　添削
英作文　アプリ

「英作文の練習をしたい人」の中でも、中学生なら「英作文中学」を選ぶかもしれませんし、添削をして欲しい人なら「英作文添削」を選ぶかもしれません。
よって「英作文の練習をしたい人」を全て救おうとするとその範囲が広すぎてキーワードを決めることができなくなってしまいます。
自分の作ったWebアプリが最も刺さるのはどんなペルソナなのか考えて具体化します。
例えば「大学生以上の年齢で、英作文の添削をして欲しいが、身近に頼める人もいないので、アプリとかオンラインでサクッとAIにやってほしい人」のように明確化をします。

キーワード検討

刺したいターゲットを明確化したら、その人になりきった気持ちで検索ワードを考えていきます。
ラッコキーワードを使うとどんなサジェストが出るか一覧を出してくれるので便利です。

この時の検討ポイントとして、検索ワードが抽象的すぎずニッチすぎずのところまで具体化させました。
例えば「英作文」だと抽象的すぎるため、このワードで検索上位を取るのは至難の技です(こういうワードはビッグキーワードというそうです)。
逆にニッチすぎると誰も検索をしないので肝心の流入がなくなってしまいます。
そこでちょうど良い「検索ボリュームが少なくて、検索意図が明確であり、自分のアプリでも上位表示できそうなワード」を探していきます(こういうワードはロングテールキーワードというそうです)。

英作文の練習をしたい人
- 英作文
  - 添削
    - アプリ
    - AI
    - サイト
  - 練習
    - テーマ
    - 練習方法
    - 練習問題
    - 問題集
いざ英語で自分の言いたいことを言おうとすると、5歳児のような稚拙なことしか言えない
- 英語
  - 話せない
    - つらい
    - もどかしい
    - 悔しい
    - 外資系
ライティング・スピーキングの練習をしたい
- スピーキング
  - スピーキングテスト
    - 対策
  - 勉強法
  - 練習
    - 文章
- ライティング
  - 添削
    - アプリ
  - 初心者
  - オンライン
英語の添削をしてもらいたい
- 英語
  - 添削
    - 文法
DeepLで勉強したい
- DeepL
  - 学習
  - 勉強
- Google翻訳
  - 勉強法
- AI翻訳

フレーズ検討

上記のキーワードを使って、自分のWebアプリに取り込めそうなフレーズを考えます。

英作文添削アプリ
AI英作文添削アプリ
英作文の添削をしてくれるサイトです
英作文練習アプリ
英作文練習サイト
英作文の練習問題を集めました
英作文の練習に使えるテーマがたくさんあります
英作文の練習ができる問題集です
英語が話せなくて、辛い・もどかしい・悔しい
外資系企業の面接で英語が話せない
スピーキングテスト対策にも使えます
スピーキングの勉強に必要なのは、ライティングです
スピーキングの練習は文章でやろう
ライティングの添削アプリです
ライティングの初心者向け練習サイトです
オンラインでライティングの添削をしてくれます
英語の添削で文法を学ぶ
DeepLで学習できるアプリを作った
DeepLで勉強できるアプリを作った
Google翻訳などのAI翻訳を使って勉強ができるの知ってた？

実装

H1, H2タグの設定

Google検索エンジンはH1, H2タグを見るため、ランディングページに上記のフレーズを使った説明をH1, H2タグで加えました。
来客頻度の高いページも検索にかかりやすいため、H1, H2タグでそのページの意図を説明する文章を追加しました。

タイトルとメタタグの設定

全てのページで異なるタイトルをつけた方が良いため、Next.jsのHeadタグを使ってカスタムのコンポーネントを作ってPageごとに設定しました。

Next.jsコード

import Head from "next/head"

export type MetaData = {
    title?: string
    description?: string
    pagePath?: string
    image?: string
}


export default ({ ogpInfo: props }: { ogpInfo: MetaData }) => {
    const defaultUrl = "https://englister.yunomy.com"
    const defaultImg = "https://englister.yunomy.com/static/otehon2.png"
    const defaultTitle = 'Englister | 英語で意見を言えるようになる英作文練習アプリ'
    const defaultDescription = '英作文の練習をしてAIが英語年齢の診断と添削をします。スピーキングやライティングのテスト対策や外資系企業の英語面接対策に向いています。'

    const title = props.title ? `${props.title} | ${defaultTitle}` : defaultTitle
    const description = props.description ? props.description : defaultDescription
    const url = props.pagePath ? `https://englister.yunomy.com${props.pagePath}` : defaultUrl
    const imgUrl = props.image ? `https://englister.yunomy.com${props.image}` : defaultImg

    return (
        <Head>
            {/* title */}
            <title>{title}</title>
            <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
            <link rel="canonical" href={url} />

            {/* OG */}
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            <meta property="og:url" content="https://englister.yunomy.com/" />
            <meta property="og:image" content={imgUrl} />
            <meta property="og:site_name" content={title} />

            {/* twitter card */}
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:site" content="@yuno_miyako2" />
            <meta name="twitter:url" content={url} />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta name="twitter:image" content={imgUrl} />

            <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
            />
        </Head>
    )
}

noteの作成

ブログやメディアと違ってツール系Webアプリの場合、コンテンツ数を増やすことが難しいかと思います。
キーワードを全てwebアプリに取り込むことが難しいため、私はnoteやQiitaなどで記事を書きました。
「英語面接で英語が拙くて５歳児になってしまい恥ずかしい思いをした」というストーリでnote記事を書き、その経緯で今回のアプリを作ったことを書くことでそこからの流入を実現することができました。

まとめ

狙ったユーザにリーチするため、キーワードの選定とWebアプリへの実装を実施しました。
またWebアプリの中だけでは抑えきれなかったキーワードについてはnote記事でカバーして間接的な検索流入を実現しました。
上記対応で検索流入で一定数の集客を確保することができました。
もちろんまだまだSEOでやれることは多いため、今回参考にしたサイトを最後に付記しておきます。
こちらに更なるテクニックや実施すべきことが詳細に書かれているためぜひご覧ください。

参考サイト

最後に

読んでいただきありがとうございました
Twitterやっているのでフォローお願いします！！！！！！！！　

※追記 今回の実例で利用した英語学習アプリの宣伝もさせてください😆
利用者の96.7%(N=187)が「英語力の向上に効果がある」と答えるほど画期的な英語勉強法だと思うので、ぜひ1問解いてみてください！

348

334

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up