#link preview

Forgetting the fact that I’ve forgotten most of the Javascript I’ve ever learned, I spent, uh, too many hours creating a quick-and-dirty simple bookmarklet to halfway automate the manual creation of the link preview. (Quick-and-dirty because I’m certain there are edge cases I haven’t accounted for and which will break things.)

Add this bookmarklet to your browser.

Go to the AO3 page (fic/chapter/user/etc) you want a link preview for.

Run the bookmarklet, copy the resulting text from the popup window.

In the tumblr editor, switch to HTML mode.

Paste the copied text.

If there are no edge cases, you now have a link preview!

There are more detailed instructions on the page in Step 1.

This semi-technical, so not for everyone; hopefully AO3 will unblock tumblr soon 🤞

No warranty!

This post has a lot going on to check what's being picked up when it's reblogged.

Hopefully it's not too confusing!

Me: This is confusing You: Yeah for sure

E.g., paste the URL to an AO3 work into a tumblr post (rich text editor), and it looks like it’s starting to work, but then instead of that fancy box, you just get a raw plain-text URL?

It works for me for links to other sites, just not AO3 (but it used to work for AO3)…

(I constructed the one in my prior post manually via copy-and-paste of HTML…)

N.B. (2026-02-09) If you’re happy with the way the link preview looks ordinarily and just want a solution for when the link preview box fails to appear for your Archive of Our Own works or if your works are Archive-locked and get the generic “New Session” preview, then the bookmarklet I wrote to generate the link preview HTML code from an AO3 work page, discussed in this post, is almost certainly an easier solution.

I told @evilpenguinrika how to do this in broad strokes a while ago, but I thought I’d take some screenshots tonight to illustrate things in more detail.

I will show how to perform two different types of edits, removing an element of the link preview altogether, and editing the text of an element of the preview.

First, I pasted in my link (and then added some text below it, “Chapter 2 is up!” for illustrative purposes).

2. Then I switched to from the Rich Text editor to the HTML editor (using the gear icon in the upper right corner of the post); this is tumblr’s HTML for the above:

3. In this step, I’ll remove an element of the preview altogether. Here I’m going to get rid of the “An Archive of Our Own, a project of the Organization for Transformative Works” line, which is the entire "description":"blah blah", block of code (technically, JSON embedded in HTML 🤯). I select it as shown, making sure to get all four double-quotes and the trailing comma, and then hit delete.

Poof, that line is gone!

4. In this step, I’m going to edit the text of an element of the preview. Here I’ll edit the text of the title to make it less verbose…in this case, I’m going to change what’s inside the double-quotes that follow the "title": part:

I got rid of everything after “Chapter 2” (I also got rid of the first \n and leading space because I’m particular, but that’s not necessary). Remember to confine your editing to what’s inside the pair of double-quotes that follows the "title": part.

Voilà!

You’re welcome! Glad it’s working for you 😀 I’m always happy when I can put some of my former web skills to use to make something useful that helps people out.

If you ever encounter any problems with it, don’t hesitate to reach out 👍

─────

By Shiv Shankar, Senior Product Manager

Sometimes a plain blue link just isn’t compelling enough. When you want to share a link to a beautiful tropical vacation destination, a hilarious viral video or thought-provoking news story, Yahoo Mail now transforms the blue link into a visual, rich, informative card. This way the email recipient gets a snapshot of the content before deciding to click.

In April 2014, we launched the very first version of link preview with the goal of transforming blue links into visual, informative content in Yahoo Mail. Our users have really enjoyed it – we see more than 25 million link previews being shared monthly!

Today, we’ve enhanced the feature on desktop, such that now you can play video and audio right in the email, and share the link directly to your social networks. We’ve also improved the underlying technology to produce a richer preview with price, movie title, article author and more.

What’s New

Control the Size & Location: Select the size of the preview image (small, medium, large) or choose where it fits best in the email (inline with text or at the bottom).

Preview Video & Audio: Play video or audio content right within your email. Try YouTube, SoundCloud, Tumblr, Vimeo and more.

Share an Enhanced Preview: Link preview now includes even more information from websites including authors of articles, hotel prices, logos for top sites, and more.

Also, any link preview you receive in an email can be shared on Tumblr, Facebook and Twitter with the Share button at the top right of the preview image.

Try it out! All you have to do is copy and paste a link into the body of an email.