【SEO超入門】個人開発しているサイトで、特定のキーワードでSEO1位取るまでにやったこと
対象読者
・SEOのSの字もわからない人
・SPAのサイトでSEO対策できるのかな？と思っている人
概要
こんにちは。都内でWebエンジニアとして働いている名人です。
趣味で将棋をやっていることから、かれこれ8年ほどニックネームで名人と呼んでもらっています。
個人開発で始めて、かれこれ半年以上手をかけている「オンラインでブレインストーミングできるサイト」が「オンラインブレスト」でSEO1位になりました。（2018/10/14時点）
「オンラインブレスト」なんて一般化している概念じゃないので、ニッチもニッチなワードなんですが、それでも1位を取るためには多少なりとも工夫が必要だったので、僕と同じようにSEOのSの字もわからない方のためになればいいなーと思って書きます。
※オンラインブレストでそもそもGoogle検索する人は今は少ないので経営的には意味は薄いのですが、勉強になりましたしニッチワードでも1位を取るって大事だなと思ったので書きます。なので、そういうツッコミは無しでお願いします笑
ざっくりやったこと
・【コンテンツ増やした】社内の人から声をかけて、地道にブレインストーミングをサイト上で実施してもらった
・【ブログに載せてもらった】ユーザーさんに、ブログにツールの感想を書いてもらった。被リンクをもらえた
・【クローリングされるようにした】ページ遷移を全部aタグにした
・【コンテンツにちゃんとタグ付けした】ある程度ページが集まったところで、titleタグ、descriptionタグをページごとに動的に書きかえるようにした。SPAで実装していたので、JavaScriptを使って動的に書きかえた
・【ユーザー目線の見出しにした】自分のビジョンがガッツリ反映された抽象的なtitleタグやh1見出しを駆逐して、要はこういうツールだよね！というのを書くようにした
コンテンツ増やした
僕の開発しているオンラインブレストツール「ブレストLive」は、ブレインストーミングごとにURLが付与されていて、その中で議論を行いアイデアを出していくことで、全てページ内に情報が溜まっていく仕組みになっています。
コンセプトとしては、URLをシェアするだけで誰でもブレストに参加できること、というのを持っていました。
コンセプト的にはCtoCですが、サイトを作っただけで盛り上がるものでもないので、まずは自分の会社内で「オンラインブレストしませんか？」と声をかけて、例えば新規事業を出したいけどいいアイデアが出ない後輩や先輩にアイデアを集め、保存が効くツールとして使ってもらいました。
個々の付箋が匿名だったり、いいねができたり、発言数ランキングを表示する機能などがウケて、1回のブレストで200以上のアイデアが出ることもよくありました。
それを今年の5月から、かれこれ5ヶ月ほど継続して活動しています。するとコンテンツとしては大量の文言が載ったページがたくさん生成されてきました。
ブログに載せてもらった
そういう活動をしていたら、Twitterで知り合ったとある方から、「自分が開発しているサービスの改善案を募集したい。URLをTwitter等で拡散して不特定多数から集めたい」という話で盛り上がり、実際にやってみました。
そのときのページがこちら。Previewは同じですが、中身は違うページです(汗)
結果的に大いに盛り上がったのですが、開発者の方が勝手にブログに僕のサービスの感想を上げてくれたのです。
たいそう嬉しかったとともに、SEO的にも被リンクが1つきてくれたので、この時点で「オンラインブレスト」で急に3位に上がってきました。びっくりしました笑
それまではこのツールはSNS流入が主だと思っていたのでSEOは何も考えてなかったのですが、少し興味を持ちました。
クローリングされるようにした
恥ずかしい話、「ブレストLive」はほとんどのページをJavaScriptによるページ遷移をしていて、aタグではなかったです。
なので、検索結果にもランディングページしかクローリングされてなかったです。
これはなぜかというと、JavaScriptでVue.jsというライブラリでこのサイトは作っているのですが、Vue.jsの記法でページ遷移できる方法があったので、そっちを使うのが「「「通」」」なのかなとか勝手に思って基本JavaScriptで遷移してました。これはひどい。
丁寧にaタグに変えていきました。
ほぼ同時期に、ランディングページを改修して、今までのオンラインブレストで盛り上がったもののURLを貼るようにしました。これでランディングページから直でブレストページまでクローリングされるようにしました。
コンテンツにちゃんとタグ付けした
次に、各ブレインストーミングのページだったり、ブレインストーミングの一覧画面だったりごとにtitleタグとかdescriptionを書き換えるようにしました。
ここに至るまでずっと全ページでtitleタグもdescriptionが全く一緒だったのです。エンジニアなら分かると思いますが、SPAで実装していたのでベースのHTMLは基本的に一緒なんですよね。
クローリングされても、これらが全く同一だったので重複コンテンツと思われたらしく、あるときは
の結果が40件だったり、60件だったり、10件だったり一日の中でも結構増減して、不安定な感じになっていました。ここらへんはSEOが生き物のように感じられて面白かったです。本を読むよりよっぽど生身な勉強ができた感じがしました。
ということで、これもページごとにブレストのタイトルなどを動的に書き換えてtitleタグ、descriptionタグを別で生成するようにしました。
SPAなのでベースは全部JavaScriptなので、ここの書き換えはページがローディングされたあとJavaScriptで動的に書き換えています。
なので、僕のサイトは開いた瞬間と開き終わったあとのtitleタグが違うのです。興味がある方はブラウザのタブをじーっと見ながら開いたらいいと思います。
興味深いのは、GoogleBotが、それでも、動的に書き換えた方のtitleタグをクローリングしてくれることです。賢いですね。
ネットで調べても断言している記事があんまりなかったので、少なくとも僕のはうまくいきました笑
ここの詳しい話はQiitaにでも書きますｗ
【ユーザー目線の見出しにした】
これはもう、ランディングページでの以前と今のtitle、descriptionを比較していただくのがいいでしょう。
- <title>【ブレストLive】みんなで社会課題の解決策を話し合うオンラインブレスト</title>
- <meta name="description" content="教育、地方創生、環境問題、食、雇用などの社会課題の解決策から、日常のちょっとした困りごとの解決策まで、様々な解決策を話し合った課題やブレストの議事録を保存し、みんなで共有・閲覧ができるサイトです。共に議論したメンバーはFacebookアカウントを交換でき、またあとから議事録を見た人がメンバーに加わることもできます。みんなの力で課題解決のブレストを進めましょう">
+ <title>【ブレストLive】｜新しいブレインストーミングのやり方 オンラインブレスト</title>
+ <meta name="description" content="アイデアの出し方に困ったらオンラインブレインストーミングでアイデア集めしよう！「ブレストLive」は社会課題や身近な課題の解決に挑む人が、素敵なアイデアを集めることで次の一歩に踏み出せるオンラインブレストツールです。人工知能も駆使した新しいブレインストーミングのやり方です。個人でも、法人でも利用できます">僕がこのサイトを作っているのって、3人よれば文殊の知恵というのをオンラインで実現したかったのがきっかけで、要は社会課題を解決しようとしているNPOだったり起業家だったりが、みんなオンラインに集結して知恵を集めて課題を解決していこうぜ、と思っていたので「みんなで社会課題の解決策を話し合うオンラインブレスト」としていました。
なんですけど、実際できあがったツールはオンラインブレストツールになりました。上記を目的とするなら、マッチングサイトの体を成すのが自然なのですが、開発している過程で色々とピボットを繰り返した結果、オンラインブレストツールという形になったので、titleタグと実態が合っていないんですよね。
この辺の葛藤とか、なぜオンラインブレストツールに落ち着けたのかあたりはまた別の機会にお話するとして、ここではそれに合わせて内容を修正した、というのを明言しておきたいです。
descriptionの中にもブレスト、ブレインストーミング、アイデア、ブレインストーミングのやり方など、様々なワードを散りばめました。ここに社会課題とかを強めに入れちゃうと、途端に中身と合わなくなるしブレるので、単語は残したけど意味的には弱めました。
※もちろんまだまだ工夫の余地がありそうなのは間違いないのですが、一旦オンラインブレストで1位という目的を達成したのでこのやり方で正しかった、という体で書いています。
結果
結果として、今は170件ほどインデックスされていて、晴れて「オンラインブレスト」で1位になりました。
特に今は2位のブログがめっちゃ手ごわかったのですが、抜かせてよかったです。
長々と語ったのですが、実際は対策としては3ページしかインデックスされていなかった10月3日に数時間テコ入れして、その2日後には46ページインデックスされていて、その後も各種ページのタグの設定をやっていけば件数が増え、おそらくはそれが大きく影響して順位が上がりました。
SEO勉強したいけど敬遠している2週間前の僕のようなエンジニアがいれば、一旦個人開発のサイトで何かしらのキーワードで当たるまでやってみる、というのは面白いチャレンジかも知れないです。
会社でのWebエンジニアの仕事でもSEO対策はあり得ることだと思いますが、身の入り方が違うなあと思います。
「ブレインストーミング やり方」でも5ページまでのし上がってきたので、こちらも工夫したらそれこそ流入が出てきそうだなーと思ったり。
まずはユーザーを増やすのが大事なので目の前のユーザーを大事にしつつ、こういったチャレンジもやっていけたらなあと思います。
以上ですm(_ _)m
日々技術書を始めとする書籍を買って読んでいます。書籍代にさせていただきますので、よかったらぜひサポートお願いします！