Barkah Fadhil
Back to projects
•
2 min read
Pixl - OpenGraph Image Generator

Pixl

Creating social media preview cards usually takes too much time or requires heavy design tools. Pixl simplifies this by providing a straightforward interface to generate OG images instantly. The focus is purely on typography and simple backgrounds.

📋 Features

The tool is kept lean with only the essential features:

  • 4 Layout Templates:
    • Plain: Solid background for maximum simplicity.
    • Gradient: Simple color fades.
    • Pattern: Subtle repeating backgrounds.
    • Minimal: Clean, structured layout.
  • Alignment Control: Option to center your text with one click.
  • Live Preview: See your changes instantly as you edit.

💻 Tech Stack

  • Next.js: For the framework and image rendering.
  • Tailwind CSS: For the styling and layout.

🛠️ Using Pixl

Pixl is a free service that generates OG images on-the-fly using URL parameters.

Basic URL Structure

https://pixl-og.vercel.app/api/og?heading=YOUR_TITLE&text=YOUR_DESCRIPTION&template=plain&centered=false

Parameters Explained

  • heading - The main title of your page
  • text - The description or subtitle
  • template - Visual style (plain, gradient, pattern, minimal)
  • centered - Text alignment (true or false)

Example

For a page with:

  • Title: “10 Tips for Better Productivity”
  • Description: “Simple strategies to boost your daily workflow”

The URL would be:

https://pixl-og.vercel.app/api/og?heading=10%20Tips%20for%20Better%20Productivity&text=Simple%20strategies%20to%20boost%20your%20daily%20workflow&template=plain&centered=false

Implementation in HTML

Add these meta tags to your HTML <head> section:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://pixl-og.vercel.app/api/og?heading=Your%20Page%20Title&text=Your%20page%20description&template=plain&centered=false" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://yoursite.com/your-page" />
<meta property="twitter:title" content="Your Page Title" />
<meta property="twitter:description" content="Your page description" />
<meta property="twitter:image" content="https://pixl-og.vercel.app/api/og?heading=Your%20Page%20Title&text=Your%20page%20description&template=plain&centered=false" />