如何產生醒目顯示文字的連結？讓使用者一目瞭然的功能(Scroll to Text Fragment)

若你在優化任何非網站的網址(Office文件、PDF、留言、Email、Google 我的商家、SERP結構化資料如 FAQ 中的網址)，除了在網址使用 #id (錨點)之外，Scroll to Text Fragment 或許是另一個可以考慮的方式。

URL Scroll to Text Fragment 是什麼？

它的功能是在網址中設定文字，使用者點擊網址進入網頁後，可能看到被強調的文字，並將畫面移動到該文字處，文字高度在畫面中間。這並不是什麼新功能，早在 chrome 80 以後就出現在以 chrome 為核心的瀏覽器之中了。

如何創建？

複製醒目顯示文字連結

在 chrome 90 之後的版本，網頁上選取（反白）文字之後按右鍵，就會出現「複製醒目顯示文字的連結」的功能，點擊該功能產生的連結，貼到任何除了該連結頁面之外的地方，被點擊後就可以產生上一段文字提到的效果。如果沒有該功能，可能是被設定成關閉，網址列輸入 chrome://flags 並按下enter後，找到 Copy Link To Text 後就能開啟該功能（enabled）。

如何關閉？

但是，在最新版本的 chrome 中，chrome://flags 已經找不到 Copy Link To Text 這個指令了，換句話說就是沒辦法關閉這個功能，還請注意。

文字反白之後右鍵即可看見該功能

 

連結的架構與DIY

若不想透過 chrome 附加的功能直接設定使用的話，自己也可以設計出這種特殊網址，方法與錨點類似，不過是加上「#:~:text=」

完整結構：https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

方法1 整段文字：

只使用 textStart 的話是最簡單的使用方式：#:~:text=文字，它會當成要 highlight 的所有文字，就像{這個連接}的範例一樣。

方法2 文字區段：

你也可以打上兩段文字：#:~:text=文字1,文字2，分別代表開頭和結尾，它會找尋這一區段的文字 highlight，這裡也用{這個連接}示範一次。

方法3 多段文字：

可以使用「&」區隔：#:~:text=文字1&text=文字2。但是個人不建議這樣做，畫面很亂。

另外，你可以使用 CSS ::target-text 改變 highlight 文字的樣式。（chrome 95 預設是紫色的底，以前是黃色）

使用 Scroll to Text Fragment 進入網頁的效果

注意事項：

若已經在該頁面中，打上這段網址、點擊網址，或是重新整理，都不會產生效果。在頁面之中滑動還是要依靠錨點、開新分頁、CSS scroll-behavior 或 JavaScript 等方式達成。

而在網址上加的目標文字，保險起見最好經過 encode 處理。最顯而易見的問題就是文字包含「,」，這會和起始文字與結尾文字之間的逗號搞混，並喪失其效果。

另外，最一開始也說這是 chrome 核心的功能，支援度有限，完全不如錨點的全支援性。

各瀏覽器的支援度

為什麼要使用它？

如同一開始提到的，Scroll to Text Fragment 可以使用在 SERP 強化 UX，讓使用者點擊後快速到達該結構化資料提到的相關段落，並 hightlight 起來不讓使用者迷失在文字中。另外，也可以在社群中使用這種方式分享網址，快速讓別人知道你要表達的重點是什麼。

當然，這種功能就像 HTML 的 accesskey 一樣，只是一種網頁的使用方式而已，當成必需使用的規則就太誇張了。