Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@ryosuketter

CSSを書いてgoogleの検索結果に順位を表示させる方法

SEOを仕事にしている方なら、共感していただけると思うのですが、

スクリーンショット 2018-10-21 16.00.21.png

ある検索結果に対して、この記事は何位だっけ?というのを一番上から数えて...
という経験はないですか?

そんな時に、サクッと何位かわかる方法を紹介します。

やり方

まず、chromeの拡張機能「stylus」をインストールします。これは、お気に入りのWebサイトのスタイル(CSS)を任意のCSSに変えてしまうアドオンです。

そして、詳細設定で、下記の通りに設定を行ってください。

stylusを選択して、「管理」を選択

スクリーンショット 2018-10-21 15.42.51.png

すると、 色々なメニューが出力されます。そこから「新スタイルを作成」を選びます。

スクリーンショット 2018-10-21 15.39.37.png

次に、

  • 指定のCSSを貼り付けます
  • 指定のURLを貼り付けます「https://www.google.co」
  • 任意の名前を入力(参考:google_rank) ← google検索した時のみこのスタイルを適用させる
  • 保存

スクリーンショット 2018-10-21 15.51.54.png

指定のCSSを下記に貼り付けます。

body {
    counter-reset: result !important;
}

h3.LC20lb:before {
    content: counter(result) ". " !important;
    counter-increment: result !important;
    display: inline-block;
    background: #fbe4c2;
    margin-right: 1em;
}

ポイントは、CSSのプロパティであるcounter-incrementを使って、任意のクラス(h3.LC20lb)を要素回数ごとに連番をつけているところです。

ここまで設定できたら、google検索した際にランクが表示されています。

スクリーンショット 2018-10-21 15.58.36.png

これで、サクッと何位かわかるようになりましたね。

改善ポイント

2ページ目からも1から表示されてしまうところですね。ここ、なんとかできる方、コメント待ってます。もちろん、GRCとか使えば指定キーワードの順位は定期的に取れるんですが、今回はサクッとわかるやり方を紹介しました。ありがとうございました!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?