How to set custom link previews for your Dub links?

Dub.co is the only link management platform that lets you customize the social media cards for your links, so you can have full control over how your links look when shared on social media and improve click-through rates.

Why set custom link previews?

When running marketing campaigns, it's important to have a consistent brand voice across your links. However, that isn't always the case, especially when collaborating with external partners.

For example, your company was recently featured on TechCrunch, but the default link preview is a generic Unsplash image that doesn't accurately reflect your brand.

With Dub, you can set a custom-designed social media card for your link, which greatly improves the click-through rate and performance of your short link.

How to set a custom social media card?

To leverage this feature, toggle the "Custom Link Previews" switch in the link builder. This will reveal the following fields:

1. Image: The image that will be used for the social media card. You can upload an image from your computer or drag and drop an image into the field (recommended size: 1200 x 630 pixels, max 1.5MB).
2. Title: The title that will be used for the social media card (max 120 characters).
3. Description: The description that will be used for the social media card (max 240 characters).

You can also quickly access the Link Preview feature by using the keyboard shortcut L while in the link builder.

Generating custom link previews using AI

You can also generate custom link previews for your links using AI simply by clicking on the ✨ button:

Behind the scenes, Dub AI leverages the latest Large Language Models (LLMs) to analyze the content of the link and generate a title and description that is SEO-friendly and increases the click-through rate.

How do custom link previews look like?

When you share a Dub link that has a custom social media card, they will show up with the title, description, and image that you set on all social media platforms.

For example, this is a link that Taimur from Causal shared on Twitter when they launched their YC data dashboard project:

By leveraging Dub's custom link previews feature, they were able to set a custom title and preview image for their link, go.causal.app/ycombinator.

This resulted in a more engaging and informative tweet that effectively communicated the value of their product to a wider audience.

Bonus: Add a custom video preview

Dub also supports the og:video OpenGraph tag, which allows you to set a custom video preview for your links.

To set a custom video preview, you can pass a link to your video via the video attribute when creating a link using our API:

import { Dub } from "dub";
 
const dub = new Dub();
 
await dub.links.create({
  url: "https://example.com",
  proxy: true, // proxy has to enabled for custom link previews to work
  image: "https://example.com/image.png", // it's recommended to pass a fallback image for platforms that don't support og:video
  video: "https://example.com/video.mp4", 
});

Here's a demo of how custom video previews works – let's embed a link (https://dub.link/og-video) that has custom video preview enabled in Notion:

As you can see, the link unfurled into a video preview when embedded in Notion, but if you clicked on the link, it would redirect you to the destination URL.