Googleリッチスニペットからのリンクで該当箇所がハイライトされるやつ

前から不思議に思っていて調べてみました。

Googleリッチスニペットからのリンクで該当箇所がハイライトされるやつ

Googleの検索結果でリッチスニペットで検索該当箇所が表示されたとき、リンク先にも該当箇所がハイライトされたりします。例えばこういうやつ。

夏 ペース 落ちる の検索結果

そうか～、やっぱり夏はペースが落ちるかー、と思いながら詳細を読むためにクリックすると…?

徹底解説｜夏のランニングは走れない？距離を伸ばすための工夫と必需品

こんな感じで検索で表示された箇所がハイライト表示されます。ついでにウィンドウも該当箇所にスクロールされて表示されます。

これ、URLは

となっていて、#以降はこうなります。

#:~:text=また、真夏は走るペース,30%2Fkmまで落ちます。

この:~:text=の後にハイライトしたい部分の冒頭と文末をカンマ区切りで指定することで、ブラウザ側でハイライト表示とフォーカス移動をするようです。

Text Fragment

これ、Text Fragmentという名前で規定されているようです。

Scroll To Text Fragment と :~:text | blog.jxck.io

URLの `#:~:text=` とは何か？（ Text Fragments ） – Qiita

書式は

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

こんな感じのようです。#の後が顔文字みたいで面白いですが、過去Googleで検索されたことのない文字列から決めたとのこと。面白いですね。