Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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