URL中的`#:〜:text =`如何突出显示文本? [英] How does `#:~:text=` in URL works to highlight text?
问题描述
TL; DR
某些浏览器如何/为什么能够在HTML正文中搜索并突出显示文本，然后在URL中紧随其后的是#:〜:text = ?
How/why are some browsers able to search and highlight text in the HTML body which is followed by #:~:text= in the URL?
说明
一天，我正在搜索在谷歌东西，该使我的Quora的结果.我观察到有2个句子以黄色突出显示，它们是上述参数后面URL的一部分.我以为这可能是Quora的SEO功能或其他功能，但是，它也在 Linkedin 和
One day I was searching for something on Google, which lead me to Quora's result. I observed that 2 sentences were highlighted in yellow, which were part of URL after the aforementioned parameter. I thought this would be Quora's feature for SEO or something, however, also found this on Linkedin, and Medium, and so on.
我想知道:
- 此突出显示是什么?为什么/如何运作?
- 这似乎是特定于浏览器的.哪些种类浏览器支持此功能?
它似乎可以在Chrome和Edge上使用；但不适用于Firefox，Safari和IE. - 前端程序员是否需要在代码中包含一些内容，以使搜索引擎突出显示其网页上的内容?(基于搜索引擎实际上附加了用户查询所预测的相关字符串的假设)
推荐答案
-
突出显示称为文本片段.它是Chrome 80上最近新增的一项新功能.它可以通过在URL哈希中指定文本片段来工作.
The highlighting is called Text Fragments. Its a new feature that was recently added to Chrome 80. It works by specifying a text snippet in the URL hash.
是的，它是特定于浏览器的.
Yes it is browser specific.
不，当您点击Google搜索结果中的链接时所获得的体验是精选片段的一部分，这些片段是通过算法确定的.您无法在代码中包含任何内容来提示搜索引擎突出显示页面上的文本.
No, the experience that you get when clicking on a link from Google's search results is part of Featured Snippets which are algorithmically determined. There is nothing you can incorporate into your code to prompt search engines to highlight text on your page.
网站管理员无需标记.这会自动发生，对HTML页面使用滚动到文本 https://chromestatus.com/feature/4733392803332096 .另请参阅此处的背景: https://support.google.com/webmasters/answer/6229325
There is no markup needed by webmasters. This happens automatically, using Scroll To Text for HTML pages https://chromestatus.com/feature/4733392803332096. See also more background here: https://support.google.com/webmasters/answer/6229325
来源:
- https://web.dev/text-fragments/
- https://www.theverge.com/2020/6/4/21280115/google-search-engine-yellow-highlight-featured-snippet-anchor-text
- https://www.theverge.com/2020/6/18/21295300/google-link-to-text-fragment-chrome-extension-chromium-highlight-scroll-down
- https://searchengineland.com/google-launches-featured-snippet-to-web-page-content-highlight-feature-335511
- https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html
这篇关于URL中的`#:〜:text =`如何突出显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
