Back to Engineering Blog
Marketing & Strategy6 min read•

How to Customize OpenGraph Social Previews for Short Links (Twitter, Discord, LinkedIn)

Pasting raw links on social networks often generates broken cards, missing images, and truncated text. Here is how OpenGraph injection creates high-CTR preview cards for every link.

S

Sarah Jenkins

E-Commerce Strategy Lead

Why Social Preview Cards Matter for Click-Through Rates

When you share a link on Discord, Twitter/X, LinkedIn, Slack, or WhatsApp, the platform does not simply display raw text. Instead, it deploys a web crawler to inspect the destination URL and render a rich media card:

  • A prominent headline
  • A short descriptive summary
  • A large horizontal preview image
  • Studies show that posts featuring complete, high-resolution preview cards receive up to **3.2 times more clicks** than plain text links.

    Unfortunately, many destination websites have poorly configured meta tags. The result? A blank gray box, a stretched logo, or a generic placeholder like "Home | My Website".

    How OpenGraph Crawlers Work

    When a link is posted on a social platform, automated bot crawlers visit the URL before any human clicks it:

  • **Discord:** `Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)`
  • **Twitter/X:** `Twitterbot/1.0`
  • **LinkedIn:** `LinkedInBot/1.0`
  • **Facebook & WhatsApp:** `facebookexternalhit/1.1`
  • These crawlers search the HTML `<head>` for standardized OpenGraph meta tags:

    <meta property="og:title" content="Your Catchy Headline" />
    <meta property="og:description" content="A compelling 1-2 sentence overview." />
    <meta property="og:image" content="https://tlink.bond/social-card.png" />
    <meta name="twitter:card" content="summary_large_image" />

    If your shortened link immediately issues a raw 301 or 302 redirect, some social crawlers fail to follow deep redirect chains, resulting in broken preview cards.

    The Edge Injection Solution

    To guarantee that your preview cards always render correctly, TLink inspects incoming User-Agent strings. When an automated social crawler visits your short link:

  • The server identifies the crawler using verified bot regex patterns.
  • Instead of an immediate raw redirect, the edge worker serves a lightweight, static HTML document with your custom OpenGraph tags.
  • The crawler parses the custom title, description, and preview image card.
  • When a human visitor clicks the link in the social app, the server issues a standard HTTP 307 temporary redirect straight to the destination page.
  • Social Bot (Discord / Twitter) -> Worker detects Crawler -> Serves Custom OG Tags -> Card Renders
    Human Visitor Click ------------> Worker detects Browser -> Issues HTTP 307 --------> Target Destination

    Best Practices for High-Converting Social Cards

    1. Optimal Image Dimensions

    Always upload preview images formatted to **1200 x 630 pixels** (a 1.91:1 aspect ratio). This ratio renders sharply on both desktop feeds and mobile messaging apps without awkward edge cropping.

    2. Keep Text Concise

  • **Title:** Aim for 40 to 60 characters. Anything longer risks truncation on mobile devices.
  • **Description:** Use 100 to 140 characters. Front-load the core value proposition so searchers understand the benefit before clicking.
  • 3. Test Before Publishing

    Use link validation tools or paste the link into a private Discord channel to confirm that the image, title, and destination display as intended before launching your public campaign.

    With TLink, you can customize OpenGraph preview cards for any link without touching a single line of code on your destination site.

    Tags:#OpenGraph#Social Cards#Discord#Twitter#Click-Through Rate

    Try TLink Free Today

    Sub-100ms redirects, 50/50 A/B split routing, and lossless vector QR codes. 100% free forever.