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.

The webpage requests that the worker fetch the linked page, which the worker does and sends back to the webpage so it can display a page preview.

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.

Using it

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.