Dynamic OG
Dynamic OG helps developers easily create og images without needing to develop their proprietary code.
It is completely free to use and a self-hosted paid version is also available. This tutorial serves as a base for Dynamic OG.
Here are some of the templates available in Dynamic OG. Get started with the Simple theme below.
All these are dynamically generated based on the queries on the url.
Use Dynamic OG for your projects/companies for free.
Getting started witht the simple theme
We're going to use nextjs and ImageResponse from next/og to create our simple images.
To create a new nextjs app
npm i create-next-app
npx create-next-app@latest
In this simple-og project we're going to use App Router. You can also find the github repo at the bottom of the blog.
✔ What is your project named? … simple-og
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/shrihari/testRepos/simple-og.
npm install @vercel/og
Inside your app folder create 2 files.
cd simple-og/src/app
touch Simple.tsx
touch img/route.tsx
In the Simple.tsx file. You have to be picky with the css as the ImageResponse supports only certain types of styles.
type TSimpleTemplate = { title: string , website: string }
export function SimpleTemplate({ t }: { t: TSimpleTemplate }) {
return (
<div
style={{
background: '#f8fafc', color: '#334155',
width: '100%', height: '100%',
display: 'flex', alignItems: 'center',
justifyContent: 'center', padding: "24px",
}}>
<div style={{
margin: '6px', padding: "24px", width: "100%",
borderRadius: "24px", height: "100%", fontSize: 72,
display: "flex", flexDirection: "column",
border: `#334155 2px solid`, color: '#334155'
}}>
{t.title?.slice(0, 80)}
<hr style={{ border: `#334155 1px solid`, width: "100%" }}></hr>
<p style={{ fontSize: "52", fontWeight: "700", display: 'flex',
justifyContent: 'center', color: '#334155' }}> {t.website}</p>
</div>
</div>
)
}
In the img/route.tsx file
import { SimpleTemplate } from '../Simple';
import { ImageResponse } from 'next/og'
import { NextRequest } from 'next/server'
// Route segment config
export const runtime = 'edge'
// Image generation
export async function GET(request: NextRequest) {
const params = request.nextUrl.searchParams
const title: string = params.get("title") || "No title";
const website: string = params.get("website") || "No website"
const t = { title, website }
return new ImageResponse(
(
<SimpleTemplate t={t} />
),
{
width: 1200,
height: 630,
headers: {
'Cache-Control': 'public, max-age=3600, immutable',
},
},
)
}
On your browser open http://localhost:3000/simple/img?title=Every%20moment%20is%20a%20fresh%20beginning.&website=blogs.gratitude.com
Just change the queries param values to generate a dynamic image based on the queries.
Deploy on your preferred servers. You can use vercel for free if you are using only couple thousands requests per month!
Source code on github simple-og-image
It is completely free to use all our default templates and a self-hosted paid version is also available. This tutorial serves as a base for Dynamic OG.
Self Hosted Dynamic OG Includes
Get lifetime access for just $10 per template. Customize them to match your style. Own your templates for ever.
Leave server setup to us. Deploy on your preferred platform: Cloudflare Workers, Netlify Functions, Vercel, or even machines.
You own the source code of your templates. This means your designs are yours, not ours. We simply provide the tools.
Learn more about Dynamic OG
Top comments (0)