Generate beautiful Open Graph images via URL. No design skills required.
Install the SDK:
npm install ogis// 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 {
openGraph: {
images: [ogis.generateUrl({
title: post.title,
description: post.excerpt,
template: 'twilight'
})]
}
};
}<script lang="ts">
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
const ogImage = ogis.generateUrl({
title: 'My Page',
template: 'minimal'
});
</script>
<svelte:head>
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</svelte:head>---
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
const ogImage = ogis.generateUrl({
title: frontmatter.title,
description: frontmatter.description
});
---
<head>
<meta property="og:image" content={ogImage} />
</head><script setup lang="ts">
import { OgisClient } from 'ogis';
const ogis = new OgisClient({ baseUrl: 'https://img.ogis.dev' });
useSeoMeta({
ogImage: ogis.generateUrl({
title: 'My Page',
template: 'modern'
})
});
</script>No SDK needed - just construct the URL:
<meta property="og:image" content="https://img.ogis.dev/?title=Hello%20World&template=twilight" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Browse all templates at ogis.dev/playground.
twilight
|
daybreak
|
minimal
|
stripe
|
gradient-aurora
|
hero
|
All parameters are optional and passed as query parameters or SDK options.
| Parameter | Description | Example |
|---|---|---|
title |
Main heading text | My Blog Post |
description |
Secondary text below title | A deep dive into... |
subtitle |
Small text above title | Tutorial |
template |
Template name (see above) | twilight |
logo |
URL to logo image | https://example.com/logo.png |
image |
URL to background/hero image | https://example.com/hero.jpg |
Templates may support additional color customization parameters. See the playground for template-specific options.
docker run -d -p 3000:3000 twango/ogis:latestdocker compose up -dcargo build --release
./target/release/ogisConfigure via environment variables (prefixed with OGIS_) or CLI arguments:
| Environment Variable | CLI Argument | Default | Description |
|---|---|---|---|
OGIS_PORT |
--port |
3000 |
Server port |
OGIS_HOST |
--host |
0.0.0.0 |
Server host |
OGIS_HMAC_SECRET |
--hmac-secret |
- | Enable HMAC authentication |
OGIS_DEFAULT_TEMPLATE |
--default-template |
twilight |
Default template |
OGIS_MAX_INPUT_LENGTH |
--max-input-length |
500 |
Max text length |
OGIS_CACHE_SIZE |
--cache-size |
1000 |
Image cache size |
Run ogis --help for all options.
For private instances, enable HMAC-SHA256 signature validation:
# Server
docker run -d -p 3000:3000 -e OGIS_HMAC_SECRET=your-secret twango/ogis:latest// Client
const ogis = new OgisClient({
baseUrl: 'https://your-instance.com',
hmacSecret: process.env.OGIS_SECRET
});
// URLs are automatically signed
const url = ogis.generateUrl({ title: 'Secure Image' });
// => https://your-instance.com/?title=Secure+Image&signature=abc123...See Authentication docs for details.