How does `#:~:text=` in URL works to highlight text?

Question

TL;DR

How/why are some browsers able to search and highlight text in the HTML body which is followed by #:~:text= in the URL?

---

Explanation

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.

---

I'd like to know:

1. What is this highlighting called? Why/how does it work?
2. This seems to be browser-specific. What kind of browsers support this?
   It seems to work on Chrome and Edge; but not on Firefox, Safari, and IE.
3. Does a frontend programmer need to incorporate something in the code to have search engines highlight content on their web-pages? (Based on the assumption that search engines actually appends the relevant string predicted by user's query)

Outmost

And it also happens here. See Strange highlighting for a few seconds. – Pironi

The fading highlight you see on stackoverflow is unrelated, it's a site feature when linking to a specific answer – Kingcup

See Also: What exactly is the `#:~:text=` location hash in an URL? – Lenity

"How/why are some browsers able to search and highlight text in the HTML body" - because some programmer wrote code for that specific browser to implement such a feature – Tabaret

Answer 1

1. 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.

2. Yes it is browser specific.

3. 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.

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

Sources:

• 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

Lehet

Great answer. Just some additions: It's Chromium-only right now but intended to be a feature of the web platform and interoperable across browsers. See Mozilla's standards-positions and Safari's webkit-dev. An additional link is the WICG repo where the feature is being incubated. – Kingcup

Answer 2

While text fragments is natively implemented only in latest Google Chrome (and the latest versions of Chromium-based browsers, such as the new Microsoft Edge), there is a browser extension/add-on that seems to enable it on Firefox and Safari: https://github.com/GoogleChromeLabs/link-to-text-fragment

It appears to use #ref-for-fragment-directive:~:text= and additional arguments (instead of just simple #:~:text=).

• Firefox: https://addons.mozilla.org/firefox/addon/link-to-text-fragment/
• Safari: https://apps.apple.com/app/link-to-text-fragment/id1532224396

Curiously enough, the extension has also been made available for Chrome and Edge too (!).

.

UPDATE: I'm testing it on Firefox Developer Edition, and it doesn't work for me.

Inhibit

The extension is available in Chrome mainly to allow generating these kinds of links by selecting text and using the context menu - very handy! In fact, this feature is being built into Chrome - you can try it out now using chrome://flags/#copy-link-to-text – Kingcup

Answer 3

I want to say a few words with regards to question 2.

This feature is a browser-specific one. It works on Chrome 80 and other Chrome-based browsers like Edge. Unfortunately, Safari and Firefox does not have the same functionality.

When it comes to Safari, it is said that there's a Safari-version extension called Link to Text Fragment, whose counterpart in Chrome works perfectly. It works by appending your selected text prefixed by #:~:text= after the current URL. However, after testing it, I found it not working on Safari. And the user ratings and reviews confirmed its malfunction.

As a workaround, I found out 2 methods.

[] 1st, you can make your own 'extension' with a line of JS code. Just add a new bookmark in Safari. Give it a name and Edit its URL as

javascript:(function(){const%20selectedText=getSelection().toString();const%20newUrl=new%20URL(location);newUrl.hash=`:~:text=${encodeURIComponent(selectedText)}`;window.open(newUrl);})();

This is called a bookmarklet. Then, after you select a block of text on a webpage, click this new bookmarklet you just created. A new page with the appended URL with be open to you. Remember on the new page, the text that you selected would not be shown in highlight, since #:~:text= only works on Chrome-based browsers. But the new URL generated will be useful to you.

[] The 2nd method is implemented inside QuickNote of MacOS. Check this link out, saying after you create a link using Add to Quick Note in right-click menu,

"A link to the webpage appears in the Quick Note, and the text in Safari is highlighted. When you revisit the website, your highlight is still there, and a thumbnail of the Quick Note appears in the lower-right corner of the screen."

Then the highlighted text on webpage could be shared with MacOS users.

I think these would be very useful for those in need. ^^

Updates: It turns out that #:~:text= is supported for Safari Version 16.1+ !

Chrome	Edge	Safari	Firefox	Opera	IE
4-73 : Not supported	12-18 : Not supported	3.1 - 16.0 : Not supported	2 - 111 : Not supported	10 - 65 : Not supported	6 - 10 : Not supported
74-80 : Not supported	79-81 : Not supported	16.1 - 16.3 : Supported	112 : Not supported	66 - 67 : Not supported	11 : Not supported
81-111 : Supported	83-111 : Supported	16.4 : Supported	113 - 114 : Not supported	68 - 94 : Supported
112 : Supported	112 : Supported	16.5 - TP : Supported		95 : Supported
113-115 : Supported

Valdemar