URL 中的`#:~:text=` 如何突出显示文本？

Question

TL; 博士

某些浏览器如何/为什么能够在 HTML 正文中搜索和突出显示#:~:text=URL 中后跟的文本？

---

解释

有一天，我在 Google 上搜索某些东西，这使我找到了 Quora 的结果。我观察到有 2 个句子以黄色突出显示，它们是上述参数之后的 URL 的一部分。我认为这将是 Quora 的 SEO 功能或其他功能，但是，也在Linkedin和Medium上找到了它，等等。

---

我想知道：

1. 这个突出显示叫什么？为什么/它是如何工作的？
2. 这似乎是特定于浏览器的。什么样的浏览器支持这个？
   它似乎适用于 Chrome 和 Edge；但不适用于 Firefox、Safari 和 IE。
3. 前端程序员是否需要在代码中加入一些东西来让搜索引擎在他们的网页上突出显示内容？（基于搜索引擎实际附加用户查询预测的相关字符串的假设）

Answer 1

1. 突出显示称为Text Fragments。它是最近添加到 Chrome 80 的一项新功能。它通过在 URL 哈希中指定文本片段来工作。

2. 是的，它是特定于浏览器的。

3. 不，您在点击 Google 搜索结果中的链接时获得的体验是精选片段的一部分，这些片段是通过算法确定的。您无法在代码中加入任何内容来提示搜索引擎突出显示页面上的文本。

网站管理员不需要任何标记。这会自动发生，对 HTML 页面使用 Scroll To Text https://chromestatus.com/feature/4733392803332096。另请参阅此处的更多背景：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