Dynamic OpenGraph Image on Cloudflare Workers

og_image.js

import { ImageResponse } from 'workers-og'

export default {
  async fetch(request) {
    let param = request.url.split('/').pop() || '@_irfanfadilah'

		if (param.length > 50) {
			param = 'Text Too Long!'
		}

		const content = decodeURIComponent(param.replace(/\+/g, '%20'))

    const html = `
			<div style="
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: sans-serif;
				background: #2a3440;
				color: #ffffff;
				padding: 3rem;
				height: 100vh;
				width: 100vw;
			">
				<h1 style=" font-size: 3rem; font-weight: bold;">${content}</h1>
			</div>
		`

    return new ImageResponse(html, { width: 600, height: 315 })
  }
}

1. Create a new Cloudflare Workers project:

yarn create cloudflare

2. cd into newly created project directory and install workers-og:

yarn add workers-og

3. Open src/index.js and copy the gist above.

4. Run and test it locally:

yarn run start

5. Adjust the code to your liking and needs.

6. Deploy to Cloudflare Workers:

yarn run deploy

---

References:

• https://github.com/kvnang/workers-og (Cloudflare Workers)
• https://vercel.com/docs/functions/og-image-generation (Vercel Functions)

You can add more data by including another fetch to send a request to your server based on the given parameters inside the function. E.g.:

const user = await fetch(`https://yourserver.com/api/${username}`).then(res => res.json())

const html = `
  <div>
    <h1>${ user.name }</h1>
    <h2>${ user.website }</h2>
  </div>
`