I hate using the work “hack” for two reasons. First, it’s WAY overused and second, it’s almost always used incorrectly. I’m going to get off my soapbox long enough to publish that SEO-friendly title and bring you a pretty damn cool way to link directly to a bit of content that you think your users will enjoy.
Scroll To Text Fragment
OK, full disclosure, this isn’t a brand-new feature and it only works on Chromium-based browsers out of the box. That’s about 70% of the browser market at the time of this writing (source) and there’s a plugin for Firefox that will provide the same functionality in that browser but it’s not baked into the core code for non-Chromium browsers yet. Regardless, it’s a quite useful tool for drawing attention to a specific portion of text within a webpage.
Scroll to text fragment will allow you to embed a link in your webpage that both sends a user to a different website as well as scrolls the destination page and highlights a portion of text that you choose. It’s very useful on sites where you are explaining something and want to add more detail by calling in an outside resource. Also, it doesn’t rely on the destination website to create HTML anchors or anything like that in their pages.
Bonus, it’s easy as hell to do…kind of…
All you have to do is alter the URL of your link a little bit. You’ll need to add
#:~:text=
plus the URL encoded text to the end of you link. So the whole “formula” for building a link like this would be:
DOMAIN + #:~:text= + URL-encoded text
The “URL-encoded text” portion can be a little confusing. It involves replacing spaces and all non-alphanumeric characters with the HTML character codes that can be used in a URL. I usually use an online encoder to handle that part.
In Action
So, putting it all together, if I wanted to direct you to the conclusion section of my last blog post, all I would have to do is create a link that looks like this:
https://netvantagemarketing.com/data-privacy/#:~:text=The%20Tip%20of%20the%20Iceberg
and then link some text using that URL (go ahead…it’s safe to click) and VIOLA! Instant deep link for your website visitor’s reading enjoyment!
Interesting fact I just noticed… In that live link I placed in the previous paragraph to demonstrate the use of this tool, I did in fact put the “%20” characters between each word at the end of the URL. Our CMS seems to have stripped out those characters and apparently the whole thing still works as intended. Interesting.
To Sum Up
If you want to send your (Chrome) users to the exact part of an article you want them to view, this is a nifty little trick that will allow you to do that. It’s not perfect since only Chromium users will get the full effect of the scrolling and highlighting. However, the bonus is that other browsers will just ignore the extra code and load the destination page normally. Hopefully this, or something similar, becomes standard across all browsing platforms and universal support is provided by browser manufacturers.
If you have other deep-linking tips or tricks make sure to let me know about them! Until next time…
Leave a Reply