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

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

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

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

やり方

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

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

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

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

次に、

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

指定の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検索した際にランクが表示されています。

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

改善ポイント

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