Skip to main content
Generate your first Open Graph image in under a minute.

​
Installation

Install the TypeScript SDK: 
npm install ogis

​
Basic Usage

import { OgisClient } from 'ogis';

const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });

// Generate an image URL
const imageUrl = ogis.generateUrl({
  title: 'My Blog Post',
  description: 'An introduction to ogis',
  template: 'twilight'
});

console.log(imageUrl);
// => https://img.ogis.dev/?title=My+Blog+Post&description=An+introduction+to+ogis&template=twilight

​
Framework Integration

// app/blog/[slug]/page.tsx
import { OgisClient } from 'ogis';

const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    openGraph: {
      images: [ogis.generateUrl({
        title: post.title,
        description: post.excerpt,
        template: 'twilight'
      })]
    }
  };
}

​
Parameters

ParameterDescriptionExample
titleMain heading textMy Blog Post
descriptionSecondary text below titleA deep dive into...
subtitleSmall text above titleTutorial
templateTemplate nametwilight, minimal, modern
logoURL to logo imagehttps://example.com/logo.png
imageURL to background/hero imagehttps://example.com/hero.jpg

​
Using Meta Tags Helper

The SDK includes a helper to generate all required meta tags: 
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });

const tags = ogis.generateMetaTags({
  title: 'My Page',
  template: 'twilight'
});

// Returns:
// [
//   { property: 'og:image', content: 'https://img.ogis.dev/?...' },
//   { property: 'og:image:width', content: '1200' },
//   { property: 'og:image:height', content: '630' },
//   { property: 'og:image:type', content: 'image/png' }
// ]

​
Setting Defaults

Configure default parameters that apply to all generated URLs: 
const ogis = new OgisClient({
  baseUrl: 'https://img.ogis.dev',
  defaults: {
    template: 'twilight',
    logo: 'https://example.com/logo.png'
  }
});

// Logo and template are automatically included
const url = ogis.generateUrl({ title: 'My Post' });

​
Next Steps

Self-Hosting

Deploy your own instance

Authentication

Secure private instances with HMAC