スポンサーリンク

強調スニペットからのリンク先ページでテキストがハイライトされる。URLパラメータ”#:~:text=”の正体

プログラミング全般

先日、自分の作ったサイトのページが、Google検索の強調スニペットに表示されていたのですが、そこからたどったページの表示にちょっとした機能が追加されていることに気づきました。

自分のサイトのページの中に、記述した覚えのない蛍光線や太字(strongやbold)の表示が反映されていたのです。

スポンサーリンク

Google強調スニペットで表示された文字列がリンク先で蛍光線&太字表示される。

強調スニペットとは、ユーザーが検索した質問の答えを直接検索結果に表示するGoogle検索の機能です。

この協調スニペットは、Google検索結果画面の上部に固有の検索結果枠として表示されます。

そして、強調スニペットからのリンク先ページを見ると、以下の例のように表示されていました。

画像は例です。

書き出しの文に黄色い蛍光線と太字の修飾がされています。

が、この部分には特に文字修飾のHTMLやCSSは記述していなかったはず。。

URLを見ると、以下のようになっています。

https://cravelweb.com/consumer-electronics/1030259235#:~:text=0kg(ゼロキログラム)補正とは、,補正する機能です。

Google検索結果の一覧のリンクURLに、自動的に「#:~:text=」以下の文字列が付加されていました。

スポンサーリンク

URLについた「#:~:text=」の正体

この「#:~:text=」ですが、2020年4月ごろにアップデートされたGoogle Chromeの新機能のようでした。

この機能は「Scroll To Text Fragment」と呼ばれるようです。

具体的な記述方法は上記の例の通り、URLの末尾に「#:~:text=(文字列)」を追記することで、=以下の文字列がハイライト表示されるというものです。

記述にはURLフラグメント「#」が使われているので、特殊なURL解析などを行っていない限り、通常のページ表示やアクセス情報の取得、スクリプトの動作などに影響はありません。

また反映させる文字列の記述は、そのまま入力されたテキストが対象となるほか、カンマ「,」区切りで「:~:text=(開始文字列),(終了文字列)」のように指定することで、開始文字列から終了文字列までを含む文字列全体をハイライト表示することができるようです。

なおこの「Scroll To Text Fragment」機能は、PC、モバイルいずれのChromeにも対応していました。

Chromeの独自機能のためユーザー環境は限られてしまいますが、記述がシンプルなためサイトのちょっとしたユーザビリティ改善などにも使えるかもしれませんね。

スポンサーリンク

WordPress&Cocoonのお悩みにお答えします

クラベルではWordPressのブログサイト構築、Cocoonテーマの導入やカスタマイズに関するご相談を承っております。

お困りの方はぜひ一度お問い合わせください。また、現在ココナラをつかったサービス出品も始めてみました。お悩みおひとつの解決からお手軽にお申込みできますので、こちらもぜひあわせてご覧ください。

最短当日★ワードプレスの疑問質問トラブル解決します ご相談無料!初心者歓迎!優しく丁寧、徹底的にサポートします!
Cocoonテーマサイト構築&カスタマイズします ご相談無料★公式サポート対象外もOK!プログラミングはお任せ
プログラミング全般Web開発
この記事は良かったですか?
最新情報をお届けします。
クラベルをフォローする
スポンサーリンク
この記事を書いた人
クラベル

Webサイト構築、Wordpressのカスタマイズやphpプログラミングなどやってます。BPM(ビジネスプロセス管理)、BPR(業務改革)コンサルなどにも従事。世の中すべてピタゴラ装置をモットーに自動化します。ブログは省エネ運営中。Cocoonカスタマイズやゲーム、ガジェットの話題など。

プロフィール詳細、お仕事のご依頼はこちら

クラベルをフォローする
クラベル

コメント

タイトルとURLをコピーしました