Link previews everywhere
Link previews are great!
I find link previews are fantastic little piece of interactivity; they give insight into where a link leads before you click it. From poorly formed link text to sketchy URLs, there's plenty of reasons a bit more information might help before clicking into a new link. Outside of a few sites like Wikipedia, Github, and Twitter that have implemented previews for some internal links, they're relatively rare to see around the web.
Making global previews can be tricky
One key challenge—and why you likely don't often see previews for arbitrary links on webpages—is that fetching dynamic content from a different domain is impossible from the browser.
Link previews are also often displayed as little popups that appear when a link is hovered, making them not particularly mobile-friendly. It's often considered a best practice to avoid hover events that aren't purely decorative, and unfortunately link previews fall into the category of non-decorative hover interactions.
That said, when considering them a form of progressive enhancement, they're certainly a very useful addition to pages when viewed on a desktop. I also don't think it's impossible to have link previews on mobile sites, but that's a design exploration for another day.
How these link previews work
This package is composed of two components:
- A script that inserts link previews on a webpage, written as a web component.
- A serverless worker function that fetches and serves the links' meta information, deployable on Cloudflare Workers.
The serverless function is my solution to the aforementioned CORS problem; it does the work of requesting each link on behalf of the client. A script embedded in the page extracts links, sends them to the worker, then adds the preview popups when hovered.
This structure brings us closer to the goal of global link previews; now any arbitrary link on a page can be turned into a rich preview when hovered thanks to a helpful worker off-client.
More details are available on the project's repository.
This project is very much a work in progress, there'll still be lots of weirdness in use. There's a ton to consider to make these previews bulletproof for use on any website, so I'm starting small and mainly focusing on getting the package working for sites with static content, like this one.