Wynglet

OpenGraph Link Preview Images

Generate OpenGraph link preview images in bulk for all your sites, without the use of a separate template editor or API integration.

Overview

When you share a link on social media and messaging platforms—like Reddit, BlueSky, Facebook, Instagram, LinkedIn, Signal, Telegram, Slack, Discord, WhatsApp, iMessage, and many others—a preview image is displayed. This preview is generated from the OpenGraph meta tags on your page.

Wynglet automatically generates these preview images by:

  1. Fetching your page
  2. Rendering a designated HTML element using Chrome Headless
  3. Taking a screenshot of it
  4. Serving and caching the image

The source of truth for the image data & design remains within your primary website, so you can use tools you are already familiar with & assets that you already have.

Getting Started

Option 1: Use the Default Template

The easiest way to get started is with Wynglet’s default template. Just paste this meta tag into the <head> of your page:

<meta property="og:image" content="https://wynglet.your-server.com/link-previews/v1?url=your-site.com/some/page">

Then test it by posting your page URL to any social platform.

Option 2: Use Your Own Custom Template

  1. Create a hidden element in your page with the design you want for the preview image:

    <div id="link-preview" style="display: none; width: 1200px;">
  <h1>Wynglet</h1>
  <p>Self-hosted OpenGraph / social link preview image generation tool.</p>
</div>

  2. Paste the meta tag into your page (using the default #link-preview selector):

    <meta property="og:image" content="https://wynglet.your-server.com/link-previews/v1?url=your-site.com/some/page">

  3. If you can’t use the default selector for any reason, specify an alternate one:

    <meta property="og:image" content="https://wynglet.your-server.com/link-previews/v1?url=your-site.com/some/page&sel=.custom-selector">

Design Capabilities

Wynglet uses the full power of the Web platform for rendering preview images. You can use:

Anything you can design for the Web, you can use to create a link preview image. You’re not limited to a WYSIWYG editor or a predefined set of templates.

Security

To prevent abuse and to conserve resources, Wynglet blocks all domains by default, until you explicitly authorize each domain you care about.

Manage your authorized domains in the Dashboard.

How It Works

Here’s what happens when someone requests a link preview:

  1. Wynglet fetches the URL you provide
  2. Uses Chrome Headless to render the page and execute JavaScript
  3. Un-hides your designated preview element
  4. Takes a screenshot of that element
  5. Compresses and caches the image
  6. Serves it to the requesting platform

Dashboard Integration

Use the Dashboard’s Link Previews section to:

Bulk Import with Sitemap

Pre-generate link previews for an entire site by importing a sitemap URL. The import runs concurrently in the background; you can monitor progress or cancel it at any time.

Example

Here’s the live version of the automatically-generated OpenGraph for this page:

Example

Test your Wynglet installation by posting your original page URL to any social platform and seeing the preview appear.

Tips & Best Practices

Comparison with Alternatives

There are many paid SaaS tools for generating preview images: BannerBear, RenderForm, Templated.io, Imejis.io, Pablle, Orshot, Abyssale, etc.

They all work roughly the same way: you design a template using their custom tools, then provide your data (title, description, etc.), and pay them per request to generate and serve images.

This model comes with several drawbacks:

Wynglet is different.

Next Steps