1. ryosuketter

    Posted

    ryosuketter
Changes in title
+googleの検索結果に順位を表示させる方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,59 @@
+SEOを仕事にしている方なら、共感していただけると思うのですが、
+
+<img width="685" alt="スクリーンショット 2018-10-21 16.00.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/1ee208fb-9813-a697-7885-00dfbc9b071b.png">
+
+ある検索結果に対して、この記事は何位だっけ?というのを一番上から数えて...
+という経験はないですか?
+
+そんな時に、サクッと何位かわかる方法を紹介します。
+
+# やり方
+
+まず、chromeの拡張機能「[stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)」をインストールします。これは、お気に入りのWebサイトのスタイル(CSS)を任意のCSSに変えてしまうアドオンです。
+
+そして、詳細設定で、下記の通りに設定を行ってください。
+
+stylusを選択して、「管理」を選択
+
+<img width="248" alt="スクリーンショット 2018-10-21 15.42.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/45e965d0-002f-b222-3cc0-16eb6f99df43.png">
+
+すると、 色々なメニューが出力されます。そこから「新スタイルを作成」を選びます。
+
+<img width="233" alt="スクリーンショット 2018-10-21 15.39.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/91603209-fa58-ff29-3666-07a430531b1d.png">
+
+次に、
+
+- 指定のCSSを貼り付けます
+- 指定のURLを貼り付けます「https://www.google.co」
+- 任意の名前を入力(参考:google_rank) ← google検索した時のみこのスタイルを適応させる
+- 保存
+
+<img width="849" alt="スクリーンショット 2018-10-21 15.51.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/72e98884-c663-2ac0-b4f1-ab3382faf8c9.png">
+
+指定のCSSを下記に貼り付けます。
+
+```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検索した際にランクが表示されています。
+
+<img width="729" alt="スクリーンショット 2018-10-21 15.58.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/d4835101-1820-2e82-7e22-eb0131c3ff0a.png">
+
+これで、サクッと何位かわかるようになりましたね。
+
+# 改善ポイント
+
+2ページ目からも1から表示されてしまうところですね。ここ、なんとかできる方、コメント待ってます。もちろん、GRCとか使えば指定キーワードの順位は定期的に取れるんですが、今回はサクッとわかるやり方を紹介しました。ありがとうございました!