スマホの検索結果に順位を表示してキーワードも常に表示する方法

タイトル読んでもなんのことか分かりにくいですね。。。
とりあえず、Before Afterをみてください。

「ウクライナ」の検索結果

Before	After

はい、一緒ですね。。。笑

これだとダメですね、では、次に１ページ分下にスクロールします。

Before	After

地味だからか、ちょっと分かりにくいですかね。。
Afterは、検索結果に順位が表示されて、かつ、Googleのロゴと検索バーが一緒にくっついてきます。

メリット

一人で仕事をしている時には、あんまり効果は発揮しません。
ですが、自分の検索結果を相手に伝える時は、とても便利です。

というのも、検索結果において重要なのは次の３つ。

1. 検索キーワード
2. 検索順位
3. 検索結果（title, description, so on...）

上の２つは、検索した本人はわかります。

ですが、例えば、画像だけ共有された相手には3.は分かるけど、1.と2.はわかりません。

検索結果を相手に伝える時のベストなスクショ

こんな感じでしょうか？

こうすることでさらに次のこともわかります。

1. パーソナライズのありなし（chromeだと標準でシークレットモードがウィンドウがダークなので）
2. URL

導入方法について

僕が大好きなstylishというchromeプラグインを利用しています。

1. stylishのインストール
2. インストール済みのスタイルを管理
3. 新しいスタイルを作成
4. コードを入力（下に載せておきます）
5. 適用先：ドメイン上のURL google.co.jp
6. 適当なファイル名で保存（僕はMobile Search Result Optimizationと命名）

CSS

/* 順位表示カウンター設置 */
body {
  counter-reset: result !important;
}

/* Google 順位表示 */
cite._Rm:before {
    content: counter(result) "位 " !important;
    counter-increment: result !important;
    font-size: 14px !important;
    color: red !important;
    font-weight: bold !important;
}

/* Google 検索窓の固定 Desktop */
.srp #searchform {
    position: fixed !important;
}

/* Google 検索窓の固定 Mobile */
div#qslc {
  position: fixed !important;
  background: #f2f2f2;
  z-index: 102;
}
div#sfcnt {
  position: fixed !important;
  top: 64px;
}
div#gsr {
    top: 154px;
    position: relative;
}

button.lsbb {
    position: fixed;
    top: 64px;
}

特に説明はしませんが、ポイントは

• counter-incrementによる、要素の個数を数えること
• position: fixed; でヘッダーを固定

といったところです。
色とかは好きなように調整するといいです。

ちなみに、上でも紹介しましたが、僕はこれを、モバイル検索結果最適化（MSRO）と呼んでいます。
Mobile Search Result Optimization

検索エンジンの最適化も重要ですが、検索結果を最適化させることで日頃の業務を最適化できます。